uni-app加入购物车动画效果

index.vue

<template>
	<view class="content">
		<view class="list">
			<view class="item flex" v-for="(d,i) in  shops" :key="i">
				<view class="il flexs">
					<image :src="d.img" mode="widthFix"></image>
					<view class="">
						<view class="bold name">{{d.name}}</view>
						<view class="price">¥{{d.price}}</view>
					</view>
				</view>
				
				
				<!-- 添加按钮 就这么简单  为什么需要id 避免抖动 -->
				<view class="add flexc bold" @tap="add($event,d.id)">+</view>
			</view>
		</view>
		
		
		
		<!--  -->
		<view class="cart">
			<image id="cart" src="../../static/cart.png" mode="widthFix"></image>
		</view>
		
		<!-- 只需要绑定购物车位置即可 -->
		<flyInCart ref="inCart" :cartBasketRect="cartBasketRect"></flyInCart>
	</view>
</template>

<script>
	//  加入购物车动画组件
	import flyInCart from '@/components/flyInCart.vue'
	
	export default {
		components:{
			flyInCart
		},
		data() {
			return {
				title: 'Hello',
				//购物车位置数据
				cartBasketRect:{},
				//商品数据
				shops:[
					{id:1,img:'../../static/1.jpg',name:'猫的娃娃',price:'666'},
					{id:2,img:'../../static/2.jpg',name:'DVDAV发',price:'5'},
					{id:3,img:'../../static/3.jpg',name:'ad分',price:'5.5'},
					{id:4,img:'../../static/4.jpg',name:'恩爱大V发',price:'44'},
					{id:5,img:'../../static/5.jpg',name:'安防重复',price:'1'},
					{id:6,img:'../../static/5.jpg',name:'安防重复',price:'1'},
					{id:56,img:'../../static/5.jpg',name:'安防重复',price:'1'},
					{id:566,img:'../../static/5.jpg',name:'安防重复',price:'1'},
					{id:5666,img:'../../static/5.jpg',name:'安防重复',price:'1'},
					{id:56666,img:'../../static/5.jpg',name:'安防重复',price:'1'},
					{id:566666,img:'../../static/5.jpg',name:'安防重复',price:'1'},
					{id:5666666,img:'../../static/5.jpg',name:'安防重复',price:'1'}, 
					
				]
			}
		},
		
		methods: {
			//e 是位置等参数  id是为了重复使用点击位置点  需要保证id不重复  一般商品id不可能重复吧 (#^.^#)
			add(e,id){
				this.$refs.inCart.addToCart(e,id);
			}
		},
		onPageScroll() {
			//调用是因为 重复使用了点击动画位置 保证不抖动。 不传参调用即清空点击点
			this.$refs.inCart.addToCart();
		},
		onReady() {
			const self = this
		 
			let q = uni.createSelectorQuery()
			//获取购物车位置
			setTimeout(function(){
				q.select('#cart').boundingClientRect(data => {
				 self.cartBasketRect = data
				}).exec();
			},100)
		}
	}
</script>

<style>
	.list{
		padding-top: 50rpx;
	}
	.price{
		font-size: 30rpx;
		color: red;
	}
	.name{
		margin-bottom: 70rpx;
	}
	.flexs{
		display: flex;
		align-items: flex-start;
	}
	.flexc{
		display: flex;
		align-content: center;
		justify-content: center;
	}
	.add{
		background: #ff9900;
		width: 50rpx;
		height: 50rpx;
		border-radius: 45%;
		position: absolute;
		right: 0;
		transition: all .13s;
	}
	.add:active{
		transform: scale(1.2);
	}
	.flex{
		display: flex;
		align-content: center;
	}
	.il{
		 
	}
	.il image{
		width: 160rpx;
		border-radius: 16rpx;
		margin-right: 20rpx;
	}
	.item{
		width: 90%;
		margin: 50rpx auto;
		position: relative;
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.bold{
		font-weight: bold;
		font-size: 30rpx;
	}
	.cart{
		width: 96%;
		position: fixed;
		bottom: 20px;
		height: 45px;
		background: #1b1919;
		margin: auto;
		border-radius: 20px;
		left: 2%;
	}
	.cart image{
		width: 160rpx;
		position: absolute;
		bottom: 0;
		left: 5%;
	}
</style>

components 下面的文件

 <!--  这个文件夹 插件要求的   跟外面的一模一样，。。。。。。 -->
<template>
	<view class="relative">
		<view  class="ball" v-for="(d,i) in balls" :key="i" :style=" d.inited ? 'transition: transform .5s ease-in; transform: translate3d(0, ' + offsetY + 'px,0); top: ' + ballY + 'px;' : '' ">
			<view class="inner arbg" :style="d.inited ? 'transition: transform .5s linear; transform: translate3d( ' + offsetX + 'px,0,0); left: ' + ballX + 'px; opacity: 1;' : '' "></view>
		</view>
	</view>
</template>
 
<script>
	export default {
		props:{
			cartBasketRect:Object,// 购物车篮的rect信息
		},
		 data() { 
		  	return {
				offsetX: 0,
				offsetY: 0,
				ballX: 0,
				ballY: 0,
				balls: {},
				//避免抖动
				lastEvent:'',
				lastId:''
			}
		  },
		  created() {
			  	let balls = [];
			  	for (let i = 0; i < 5; i++) {
			  		balls.push({ inited: false });
			  	}
				this.balls = balls
		  },
		  methods:{
			  getBalls() {
			  	return balls;
			  },
			  addToCart (e,id) {
				  if(!id){
					  this.lastId  = ''
					  return
				  }
				  
				  const self = this
				  if(this.lastId == id){
					  e = this.lastEvent
				  }else{
					  this.lastId  = id
					  this.lastEvent = e
				  }
						let ballX = e.touches[0].clientX - 10
			  			let	ballY = e.touches[0].clientY - 9;
						this.offsetX = -Math.abs(this.cartBasketRect.left - ballX + 10)
						this.offsetY = Math.abs(this.cartBasketRect.top - ballY +(this.cartBasketRect.height/1.5))
						this.ballX = ballX
						this.ballY = ballY
							
						
			  			for (let i = 0; i < 5; i++) {
			  				if (!this.balls[i].inited) {
								this.balls[i].inited = true
									setTimeout(() => {
										self.balls[i].inited= false
									}, 500);
								break;
							}
			  			}
			  }
		  }
		  
		  
	}
</script>

 
<style scoped>
.ball {
	position: fixed;
	z-index:8;
}
.ball .inner {
	background: #ff9900;
	width: 30rpx;
	height: 30rpx;
	position: fixed;
	border-radius: 50%;
	opacity: 0;
}
</style>