Shulou(Shulou.com)06/02 Report--

This article mainly shows you how WeChat Mini Programs makes rotation animation. The content is easy to understand and clear. I hope it can help you solve your doubts. Next, let me take you to study and learn the article "WeChat Mini Programs how to make rotation animation".

The energy given to WeChat Mini Programs is infinite. With the gradual maturity of Mini Program development, the demand that Mini Program development can achieve is becoming more and more perfect. Recently, there is a demand for picture rotation in Mini Program. On WeChat Mini Programs, you can achieve the rotation effect by switching multiple pictures, but WeChat Mini Programs's own API has such an animation component, so Mini Program can use image+Animation to make rotation animation.

First define image in wxml

Notice the animation attribute, which is used to animate image.

And {{animation}} we define it in the data of js

Data: {

Animation:\'\'

}

Related code

Var _ animation

Var _ animationIndex

Const _ ANIMATION_TIME = 500

Pages {

...

OnShow: function () {

_ animation = wx.createAnimation ({

Duration:_ANIMATION_TIME

TimingFunction:\ 'linear\', / / linear,ease,ease-in,ease-in-out,ease-out,step-start,step-end

Delay: 0

TransformOrigin:\'50% 0\'

})

}

/ * *

* realize image rotation animation, rotated 120 degrees at a time

, /

RotateAni: function (n) {

_ animation.rotate (120 * (n)) .step ()

This.setData ({

Animation:_animation.export ()

})

}

/ * *

* start to rotate

, /

StartAnimationInterval:function () {

Var that = this

That.rotateAni (+ _ loadImagePathIndex); / / perform a rotation

_ animationIntervalId = setInterval (function () {

That.rotateAni (+ _ loadImagePathIndex)

}, _ ANIMATION_TIME); / / there is no interval between _ ANIMATION_TIME for a rotation

}

/ * *

* stop spinning

, /

StopAnimationInterval:function () {

If (_ animationIntervalId > 0) {

ClearInterval (_ animationIntervalId)

_ animationIntervalId= 0

}

}

}

Wechat comes with Animation can achieve an animation, and then through setInterval to achieve the purpose of continuous rotation, in use, control startAnimationInterval and stopAnimationInterval.

When using animation, you will find that sometimes there is a fast rotation speed or reverse rotation and then forward rotation emptying, which is due to a problem with the value setting of rotate.

1. The value of rotate should be the value at the end of the last time.

2. If the global variable is set, remember to initialize it when you oncreate, otherwise it will be a problem to open the same page for the second time.

Note:

Why not directly set a large enough value for _ animation.rotate (120 * (n)) .step () here for two reasons:

1. We need convenient control to start and stop

2. After Mini Program enters the background, animation will continue to run, taking up mobile phone memory and cpu, while Mini Program depends on Wechat, which will cause Wechat to be terminated on iphone.

What does Mini Program mean? Mini Program is an application that can be used without download and installation. It can be used immediately by scanning a QR code or searching it. It is easy to operate and easy to spread. It can achieve seven major functions, such as message notification, offline code scanning, official account association, and so on. It is based on Wechat, similar to APP. You can use it whenever you want. After using it, you will leave without taking up memory.

The above is about "how WeChat Mini Programs makes rotation animation". If this article is helpful to you and thinks it is well written, please share it with your friends to learn new knowledge. if you want to know more about it, please pay more attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.