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

  • 2
  • 4,310 views
  • A+

最近小程序中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画api,然后就改由image+Animation来实现。

首先在wxml中定义image

注意其中的animation属性,image就由它来实现动画。

而{{animation}}我们在js的data中定义

相关代码

微信自带的Animation可以实现一次动画,然后可以通过setInterval来达到不断旋转的目的,在使用时,控制startAnimationInterval和stopAnimationInterval即可。

注意:

这里为什么不直接给_animation.rotate(120 * (n)).step()设置一个足够大的值,原因有两点:

  1. 我们需要便利的控制开始和停止,
  2. animation在小程序进入后台后,会持续运行,占用手机内存和cpu,而小程序依赖于微信,在iphone上会导致微信被终止运行

在使用animation时,会发现有时候出现旋转速度很快或者反向旋转再正向旋转的清空,这都是由于rotate的值设置有问题。

  1. rotate的值应该是上一次结束时的值,
  2. 如果设置了全局变量,记得在oncreate时初始化,不然第二次打开同一页面会有问题。

 

weinxin
我的微信公众号
我的微信公众号扫一扫
Liu, Thinkin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  1   博主  1

    • avatar Thinkin Admin

      +

      • avatar John 0

        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!