qingyuan/components/hx-jump-ball/hx-jump-ball.vue

<template>
	<view class="hx-jump-ball">
		<view class="ballBox" :animation="ballBoxAnimationData" >
			<view class="ballOuter" 
			:animation="ballOuterAnimationData" 
			:style="{width:ballWidth*2 + 'upx',height:ballHeight*2 + 'upx','background-color':backgroundColor,'background-image': backgroundImage ?`url(${backgroundImage})`: '','z-index':index}">
			<text style="font-size: 24;margin: auto;color: #FFFFFF;font-weight: 700;line-height: 20upx;text-align: center;">+1</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hx-jump-ball",
		data() {
			return {
				flag: false,
				ballBoxAnimation: null,
				ballOuterAnimation: null,
				ballBoxAnimationData: {},
				ballOuterAnimationData: {},
			};
		},
		props: {
			//小球宽度
			ballWidth: {
			    type: Number,
				default: 20
			},
			//小球高度
			ballHeight: {
			    type: Number,
				default: 20
			},
			//小球颜色
			backgroundColor: {
			    type: String,
				default: "#ff4444"
			},
			//图片
			backgroundImage: {
			    type: String,
				default: ""
			},
			//小球的堆叠顺序
			index: {
			    type: Number,
				default: 999
			},
			//开始动画
			start: {
			    type: Number,
				default: 1
			},
			//html元素class名称，[起点元素，终点元素]
			element:{
				type: Array,
				default(){
					return []
				}
			},
			//下落速度 ms毫秒
			speed:{
				type: Number,
				default: 400
			},
			//贝塞尔曲线
			bezier:{
				type: String,
				default: "cubic-bezier(.6,-0.63,.94,.71)"
			}
		},
		watch:{
			'start': {
				handler(val,oldVal) {
					console.log(val,oldVal);
					let that = this;
					if(!that.element){
						return;
					}
					if(that.flag == true){
						return;
					}else{
						that.flag = !that.flag;
						console.log(that.flag);
						that.getElementCoordinate(that.element[0],that.element[1]);
					}
					
				},
				deep: true, //对象内部的属性监听，也叫深度监听
			}
		},
		created() {
			this.ballBoxAnimation = uni.createAnimation({
				duration: 0,
				timingFunction: this.bezier,
				delay: 0
			}); 
			this.ballOuterAnimation = uni.createAnimation({
				duration: 0,
				timingFunction: "linear",
				delay: 0
			});
			this.setEnd();
			//初始化位置
		},
		mounted() {
			this.monitoring() // 注册监听事件
			 uni.$on('update',function(data){
			        this.setEnd();
			    })
		},
		methods:{
			 monitoring() { // 监听事件
			 let that = this;
			    this.$on('childMethod', (res) => {
					that.element = res;
					that.getElementCoordinate(that.element[0],that.element[1]);
			    })
			},
			//获取元素坐标
			getElementCoordinate(startElement,endElement){
				let that = this;
					  const SLeft = startElement.left  + ((startElement.width + that.ballWidth ) / 2  - that.ballWidth);
					  const STop = startElement.bottom - ((startElement.height - that.ballHeight ) / 2  + that.ballHeight);
					  
					  
						  //计算出元素的中心坐标
					  	  let ELeft = endElement.left + ((endElement.width + that.ballWidth ) / 2  - that.ballWidth);
					  	  let ETop = endElement.bottom - ((endElement.height - that.ballHeight ) / 2  + that.ballHeight);
						  //#ifndef H5
						  ELeft = ELeft;
						  ETop = ETop;
						  //#endif
						  //初始化位置
						  that.setStart(SLeft,STop,ELeft,ETop);
					  	  that.startAnimation(SLeft,STop,ELeft,ETop); 
			},
			
			
			//开始动画
			startAnimation(SLeft,STop,ELeft,ETop){
				let that = this;
				let jumpDistance = SLeft - ELeft;
				//#ifndef MP-WEIXIN
				setTimeout(function() {
					that.flag = !that.flag;
					that.$emit("msg",{code:0,status:true});
				},600);
				//#endif
				//#ifndef H5
				setTimeout(function() {
					that.flag = !that.flag;
					that.$emit("msg",{code:0,status:true});
				},700);
				//#endif
				
			
			//  暂时注释掉，待uniapp修复bug后再调整
				//根坐标
			// 	this.ballBoxAnimation.translate3d(ELeft,STop,0).step({duration: 800});
			// 	this.ballBoxAnimation.translate3d(ELeft,ETop,0).step({duration: 800});
			// 	this.ballBoxAnimationData = this.ballBoxAnimation.export();
			
			// 	console.log('根坐标执行玩');
			// 	//相对根的坐标
			// 	this.ballOuterAnimation.translate3d(jumpDistance,0,0).step({duration: 800});
			// 	this.ballOuterAnimation.translate3d(0,0,0).step({duration: 800});
			// 	this.ballOuterAnimationData = this.ballOuterAnimation.export();
			// 	console.log('相对根的坐标');
			// 	setTimeout(function() {
			// 		console.log("动画完成");
			// 		that.flag = !that.flag;
			// 	}, 800);
				
				//因为uniapp  step()有bug，所以必须要延时执行
				setTimeout(function() {
					//根坐标
					that.ballBoxAnimation.opacity(1).translate3d(ELeft,ETop,0).step({duration: that.speed});
					that.ballBoxAnimationData = that.ballBoxAnimation.export();
					
					
					//相对根的坐标
					that.ballOuterAnimation.opacity(1).translate3d(0,0,0).step({duration: that.speed});
					that.ballOuterAnimationData = that.ballOuterAnimation.export();
				
				}, 50);
				
			},
			 //动画开始前初始化小球位置并显示小球
			setStart(SLeft,STop,ELeft,ETop){
				this.ballBoxAnimation.translate3d(ELeft,STop,0).opacity(1).step({duration: 0});
				this.ballBoxAnimationData = this.ballBoxAnimation.export();
				
				this.ballOuterAnimation.translate3d(SLeft - ELeft,0,0).opacity(1).step({duration: 0});
				this.ballOuterAnimationData = this.ballOuterAnimation.export();
			},
			
			//隐藏小球
			setEnd(){
				this.ballBoxAnimation.opacity(0).step({duration: 0});
				this.ballBoxAnimationData = this.ballBoxAnimation.export();
				
				this.ballOuterAnimation.opacity(0).step({duration: 0});
				this.ballOuterAnimationData = this.ballOuterAnimation.export();
			}
		}
	}
</script>

<style>
	.ballBox{
		position: fixed;
		left: -10upx;
		top: 15upx;
		z-index: 9;
		/*  用颜色来演示用原理 */
		/* background-color: #4CD964; */
		height:30rpx;
		width:30rpx;
	}
	.ballOuter {
	   background:red;
	   height:100%;
	   width:100%;
	   border-radius: 50%;
	   background-size: 100% 100%;
	   background-position: center;
	   z-index: 999;
	}
	
</style>