- A+
最近小程序中有一个图片旋转的需求，最初是想着通过切换多张图片达到旋转的效果，后来发现微信小程序带有动画api，然后就改由image+Animation来实现。
首先在wxml中定义image
|
1 2 |
<image <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"bth_image2"</span> mode=<span class="hljs-string">"aspectFit"</span> animation=<span class="hljs-string">"{{animation}}"</span> src=<span class="hljs-string">'../../images/***.png'</span>><span class="xml"><span class="hljs-tag"></<span class="hljs-name">image</span>></span></span> |
注意其中的animation属性，image就由它来实现动画。
而{{animation}}我们在js的data中定义
|
1 2 3 4 |
<span class="hljs-selector-tag">data</span>: { <span class="hljs-attribute">animation</span>: <span class="hljs-string">''</span> }, |
相关代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<span class="hljs-keyword">var</span> _animation; <span class="hljs-keyword">var</span> _animationIndex <span class="hljs-keyword">const</span> _ANIMATION_TIME = <span class="hljs-number">500</span>; pages { ... onShow: <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{ _animation = wx.createAnimation({ <span class="hljs-attr">duration</span>: _ANIMATION_TIME, <span class="hljs-attr">timingFunction</span>: <span class="hljs-string">'linear'</span>, <span class="hljs-comment">// "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"</span> delay: <span class="hljs-number">0</span>, <span class="hljs-attr">transformOrigin</span>: <span class="hljs-string">'50% 50% 0'</span> }) }, <span class="hljs-comment">/** * 实现image旋转动画，每次旋转 120*n度 */</span> rotateAni: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">n</span>) </span>{ _animation.rotate(<span class="hljs-number">120</span> * (n)).step() <span class="hljs-keyword">this</span>.setData({ <span class="hljs-attr">animation</span>: _animation.export() }) }, <span class="hljs-comment">/** * 开始旋转 */</span> startAnimationInterval: <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{ <span class="hljs-keyword">var</span> that = <span class="hljs-keyword">this</span>; that.rotateAni(++_loadImagePathIndex); <span class="hljs-comment">// 进行一次旋转</span> _animationIntervalId = setInterval(<span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{ that.rotateAni(++_loadImagePathIndex); }, _ANIMATION_TIME); <span class="hljs-comment">// 没间隔_ANIMATION_TIME进行一次旋转</span> }, <span class="hljs-comment">/** * 停止旋转 */</span> stopAnimationInterval: <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{ <span class="hljs-keyword">if</span> (_animationIntervalId> <span class="hljs-number">0</span>) { clearInterval(_animationIntervalId); _animationIntervalId = <span class="hljs-number">0</span>; } }, } |
微信自带的Animation可以实现一次动画，然后可以通过setInterval来达到不断旋转的目的，在使用时，控制startAnimationInterval和stopAnimationInterval即可。
注意：
这里为什么不直接给_animation.rotate(120 * (n)).step()设置一个足够大的值，原因有两点：
- 我们需要便利的控制开始和停止，
- animation在小程序进入后台后，会持续运行，占用手机内存和cpu，而小程序依赖于微信，在iphone上会导致微信被终止运行
在使用animation时，会发现有时候出现旋转速度很快或者反向旋转再正向旋转的清空，这都是由于rotate的值设置有问题。
- rotate的值应该是上一次结束时的值，
- 如果设置了全局变量，记得在oncreate时初始化，不然第二次打开同一页面会有问题。
我的微信公众号
微信扫一扫关注公众号，不定时更新
2018-11-21 3:24 下午 沙发
+
2018-04-19 5:47 上午 板凳
Hey webmaster
When you write some blogs and share with us,that is a hard work for you but share makes you happly right?
yes I am a blogger too
good luck and cheers!