How to realize the Parabola Animation of Shopping cart with Mini Program

This article mainly introduces the relevant knowledge of "how to realize the parabola animation of the shopping cart by Mini Program". The editor shows you the operation process through an actual case, the method of operation is simple and fast, and is practical. I hope this article "how to realize the parabola animation of shopping cart by Mini Program" can help you solve the problem.

Analysis.

To achieve parabolic animation, I thought of using plug-ins. There are many on the Internet, but it is still a bit difficult to be compatible with Mini Program, and the main package of Mini Program has a 2m limit.

So how to achieve this effect in Mini Program?

Wx.createAnimation css3 transition

Now that we have the way to realize it, let's take a look at what is a parabola. There are many kinds of parabolas that are defined mathematically, but as far as the effect of the picture above is concerned, it requires horizontal and uniform motion & vertical acceleration; wx.createAnimation provides timingFunction, that is, horizontal linear and vertical ease-in.

Mini Program implementation

This implementation is based on the wepy framework (not native to Mini Program), so $apply-- > setData would be fine ~

Html

Click

JS

/ / set delay time methods = {handleClick: (e) = > {/ / x, y indicates that the finger clicks on the horizontal and vertical coordinates, that is, the initial coordinates of the ball 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)}) } / / create createAnimation (ballX, ballY) {let that = this, bottomX = that.$parent.globalData.windowWidth, bottomY = that.$parent.globalData.windowHeight-50, animationX = that.flyX (bottomX, ballX), / / create ball horizontal animation animationY = that.flyY (bottomY, ballY) / / create a vertical animation of the ball that.ballX = ballX; that.ballY = ballY; that.showBall = true; that.$apply () That.setDelayTime (100) .then (() = > {/ / 100ms delay, make sure the ball shows that.animationX = animationX.export (); that.animationY = animationY.export (); that.$apply () / / 400ms delay, that is, the parabola length of the ball 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 () })} / / horizontal animation flyX (bottomX, ballX, duration) {let animation = wx.createAnimation ({duration: duration | | 400, timingFunction: 'linear',}) animation.translateX (bottomX-ballX) .step () Return animation;} / / Vertical animation flyY (bottomY, ballY, duration) {let animation = wx.createAnimation ({duration: duration | | 400, timingFunction: 'ease-in',}) animation.translateY (bottomY-ballY). Step () Return animation;} this is the end of the introduction of "how Mini Program realizes the parabola animation of shopping cart". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.