小程序模板网

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

发布时间:2018-05-08 14:21 所属栏目:小程序开发教程

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


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24342.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询