最近小程序中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画api,然后就改由image+Animation来实现。
首先在wxml中定义image
注意其中的animation属性,image就由它来实现动画。
而{{animation}}我们在js的data中定义
改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转)
相关代码
微信自带的Animation可以实现一次动画,然后可以通过setInterval来达到不断旋转的目的,在使用时,控制startAnimationInterval和stopAnimationInterval即可。
注意:
这里为什么不直接给_animation.rotate(120 * (n)).step()设置一个足够大的值,原因有两点:
1、我们需要便利的控制开始和停止,
2、animation在小程序进入后台后,会持续运行,占用手机内存和cpu,而小程序依赖于微信,在iphone上会导致微信被终止运行
在使用animation时,会发现有时候出现旋转速度很快或者反向旋转再正向旋转的清空,这都是由于rotate的值设置有问题。
1、rotate的值应该是上一次结束时的值, 2、如果设置了全局变量,记得在oncreate时初始化,不然第二次打开同一页面会有问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。