is working on an unmanned small program. One day the product says it wants to learn from a producer, and adds a parabolic ball to a shopping cart. Well, the product you are the biggest, do it!

give you a look at the effect of

<p> </strong></p>

analysis this fixed the starting position of animation, naturally can not use GIF, so can only use native code to achieve

that we have what tools to achieve animation?

applet provides JS API createAnimation to create animation

CSS animation

tool. Now let's see what parabolas are.

here we only discuss the level of parabola, horizontal parabola from the mathematical principle is uniform, the vertical acceleration level [movement], into the code level is in timingFunction animation, linear animation animation level by using ease-in

, vertical so we need to put this parabola animation into two different animation but at the same time the effect of animation.



to achieve the realization of a small

program (x, y) {/ / x y finger click coordinates, i.e. the starting point let self = this ball, cartY = app.globalData.winHeight - 50, / / end position (CART picture) vertical coordinate cartX = 50, / / end position (shopping car picture) abscissa animationX = flyX (cartX, x), animationY / / create lateral ball animation = flyY (cartY, y), / / create ball longitudinal animation (this.setData {ballX: x, ballY: y, showBall: true setTimeoutES6}) (100) (.Then (=>) {/ / delay of 100 seconds; make sure that the ball is already in place, and display self.setData (animationX.export, animationY:) {animationX: (animationY.export), return setTimeo (}) UtES6 (400) / 400 ball parabola animation length (=>) (.Then)}; {/ / delay of 400 seconds after the hidden ball (this.setData {showBall: false})})} function {setTimeoutES6 (SEC) setTimeout return new Promise / Promise ((resolve, reject) {setTimeout (=> ({resolve) (=>);}}})), SEC function flyX (cartX, oriX) {/ / animation = wx.createAnimation (let animation level {duration: 400, timingFunction:'linear', animation.left}) (cartX).Step (return) animation function flyY (cartY, oriY}) {/ / animation = wx.createAnimation let vertical animation ({timingFunction:} duration: 400,'ease-in', (cartY) (.Step) return animation}


 < view anim Ation= "{{animationY}}" style= "position:fixed; top:{{ballY}}px;" hidden= "turning! ShowBall}}" > < view; animation= "{{animationX}}" style= "position:fixed; left:{{ballX}}px; > < /view> < /view> 

as far as I know, transform: (transtate) to achieve the animation than top & left performance better, but try to find down and can not do the interactive effects of the ideal, look forward to future research.





you might be interested in this article:

This concludes the body part