最近小程序中有一個(gè)圖片旋轉(zhuǎn)的需求，最初是想著通過切換多張圖片達(dá)到旋轉(zhuǎn)的效果，后來發(fā)現(xiàn)微信小程序帶有動(dòng)畫api，然后就改由image+Animation來實(shí)現(xiàn)。

首先在wxml中定義image

1. <image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image>

注意其中的animation屬性，image就由它來實(shí)現(xiàn)動(dòng)畫。

而{{animation}}我們?cè)趈s的data中定義

1. data: {
2. animation: ''
3. },

相關(guān)代碼

1. var _animation;
2. var _animationIndex
3. const _ANIMATION_TIME = 500;
4. pages {
5. ...
6. onShow: function () {
7. _animation = wx.createAnimation({
8. duration: _ANIMATION_TIME,
9. timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
10. delay: 0,
11. transformOrigin: '50% 50% 0'
12. })
13. },
14.  
15. /**
16. * 實(shí)現(xiàn)image旋轉(zhuǎn)動(dòng)畫，每次旋轉(zhuǎn) 120*n度
17. */
18. rotateAni: function (n) {
19. _animation.rotate(120 * (n)).step()
20. this.setData({
21. animation: _animation.export()
22. })
23. },
24.  
25. /**
26. * 開始旋轉(zhuǎn)
27. */
28. startAnimationInterval: function () {
29. var that = this;
30. that.rotateAni(++_loadImagePathIndex); // 進(jìn)行一次旋轉(zhuǎn)
31. _animationIntervalId = setInterval(function () {
32. that.rotateAni(++_loadImagePathIndex);
33. }, _ANIMATION_TIME); // 沒間隔_ANIMATION_TIME進(jìn)行一次旋轉(zhuǎn)
34. },
35.  
36. /**
37. * 停止旋轉(zhuǎn)
38. */
39. stopAnimationInterval: function () {
40. if (_animationIntervalId> 0) {
41. clearInterval(_animationIntervalId);
42. _animationIntervalId = 0;
43. }
44. },
45. }

微信自帶的Animation可以實(shí)現(xiàn)一次動(dòng)畫，然后可以通過setInterval來達(dá)到不斷旋轉(zhuǎn)的目的，在使用時(shí)，控制startAnimationInterval和stopAnimationInterval即可。

注意：

這里為什么不直接給_animation.rotate(120 * (n)).step()設(shè)置一個(gè)足夠大的值，原因有兩點(diǎn)：

1. 1、我們需要便利的控制開始和停止，
2. 2、animation在小程序進(jìn)入后臺(tái)后，會(huì)持續(xù)運(yùn)行，占用手機(jī)內(nèi)存和cpu，而小程序依賴于微信，在iphone上會(huì)導(dǎo)致微信被終止運(yùn)行

在使用animation時(shí)，會(huì)發(fā)現(xiàn)有時(shí)候出現(xiàn)旋轉(zhuǎn)速度很快或者反向旋轉(zhuǎn)再正向旋轉(zhuǎn)的清空，這都是由于rotate的值設(shè)置有問題。

1. 1、rotate的值應(yīng)該是上一次結(jié)束時(shí)的值，
2. 2、如果設(shè)置了全局變量，記得在oncreate時(shí)初始化，不然第二次打開同一頁面會(huì)有問題。
3.