最近小程序中有一個圖片旋轉的需求，最初是想著通過切換多張圖片達到旋轉的效果，后來發現微信小程序帶有動畫api，然后就改由image+Animation來實現。

首先在wxml中定義image

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

注意其中的animation屬性，image就由它來實現動畫。

而{{animation}}我們在js的data中定義

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

相關代碼

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. * 實現image旋轉動畫，每次旋轉 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. * 開始旋轉
27. */
28. startAnimationInterval: function () {
29. var that = this;
30. that.rotateAni(++_loadImagePathIndex); // 進行一次旋轉
31. _animationIntervalId = setInterval(function () {
32. that.rotateAni(++_loadImagePathIndex);
33. }, _ANIMATION_TIME); // 沒間隔_ANIMATION_TIME進行一次旋轉
34. },
35.  
36. /**
37. * 停止旋轉
38. */
39. stopAnimationInterval: function () {
40. if (_animationIntervalId> 0) {
41. clearInterval(_animationIntervalId);
42. _animationIntervalId = 0;
43. }
44. },
45. }

微信自帶的Animation可以實現一次動畫，然后可以通過setInterval來達到不斷旋轉的目的，在使用時，控制startAnimationInterval和stopAnimationInterval即可。

注意：

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

1. 1、我們需要便利的控制開始和停止，
2. 2、animation在小程序進入后臺后，會持續運行，占用手機內存和cpu，而小程序依賴于微信，在iphone上會導致微信被終止運行

在使用animation時，會發現有時候出現旋轉速度很快或者反向旋轉再正向旋轉的清空，這都是由于rotate的值設置有問題。

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