小程序怎么實現購物車拋物線動畫

這篇文章主要介紹“小程序怎么實現購物車拋物線動畫”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“小程序怎么實現購物車拋物線動畫”文章能幫助大家解決問題。

分析

要實現拋物線動畫，我當時想到的是用插件的方式，網上有很多，但是要兼容小程序還是有點困難，況且小程序的主包有2M限制;

那么如何在小程序中實現這種效果呢?

 wx.createAnimation 
css3 transition

實現方式有了，我們再來看一下什么是拋物線，數學上定義拋物線的種類有很多，但就上圖的效果而言，需要 水平方向勻速運動 & 垂直方向加速運動 ; wx.createAnimation 提供 timingFunction , 即水平方向 linear , 垂直方向 ease-in

小程序實現

本次實現基于 wepy框架 (非小程序原生)，所以 $apply ---> setData 就好了~

html

<view class="box">
	<view><button bindtap="handleClick">點擊</button></view><view animation="{{animationY}}" style="position:fixed;top:{{ballY}}px;" hidden="{{!showBall}}"><view class="ball" animation="{{animationX}}" style="position:fixed;left:{{ballX}}px;"></view></view>
</view>

JS

// 設置延遲時間
    methods = {
		handleClick: (e) => {
			// x, y表示手指點擊橫縱坐標, 即小球的起始坐標
			let ballX = e.detail.x,
			    ballY = e.detail.y;
			this.isLoading = true;
			this.$apply();
			this.createAnimation(ballX, ballY);
		}
    }
	setDelayTime(sec) {
		return new Promise((resolve, reject) => {
			setTimeout(() => {resolve()}, sec)
		});
	}
	// 創建動畫
	createAnimation(ballX, ballY) {
		let that = this,
		bottomX = that.$parent.globalData.windowWidth,
		bottomY = that.$parent.globalData.windowHeight-50,
		animationX = that.flyX(bottomX, ballX),      // 創建小球水平動畫
		animationY = that.flyY(bottomY, ballY);			 // 創建小球垂直動畫

		that.ballX = ballX;
		that.ballY = ballY;
		that.showBall = true;
		that.$apply();
		that.setDelayTime(100).then(() => {
			// 100ms延時,  確保小球已經顯示
			that.animationX = animationX.export();
			that.animationY = animationY.export();
			that.$apply();
			// 400ms延時, 即小球的拋物線時長
			return that.setDelayTime(400);
		}).then(() => {
			that.animationX = this.flyX(0, 0, 0).export();
			that.animationY = this.flyY(0, 0, 0).export();
			that.showBall = false;
			that.isLoading = false;
			that.$apply();
		})
	}
	// 水平動畫
	flyX(bottomX, ballX, duration) {
		let animation = wx.createAnimation({
			duration: duration || 400,
			timingFunction: 'linear',
		})
		animation.translateX(bottomX-ballX).step();
		return animation;
	}
	// 垂直動畫
	flyY(bottomY, ballY, duration) {
		let animation = wx.createAnimation({
			duration: duration || 400,
			timingFunction: 'ease-in',
		})
		animation.translateY(bottomY-ballY).step();
		return animation;
	}

關于“小程序怎么實現購物車拋物線動畫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。