微信小程序：Animation实现图片旋转动画

最近小程序中有一个图片旋转的需求，最初是想着通过切换多张图片达到旋转的效果，后来发现微信小程序带有动画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.