微信小程序 Animation实现图片旋转动画示例
发布时间：2020-12-14 20:05:00 所属栏目：资源 来源：网络整理
导读：最近小程序中有一个图片旋转的需求，最初是想着通过切换多张图片达到旋转的效果，后来发现微信小程序带有动画api，然后就改由image+Animation来实现。 首先在wxml中定义image 注意其中的animation属性，image就由它来实现动画。 而{{animation}}我们在js的da
|
最近小程序中有一个图片旋转的需求，最初是想着通过切换多张图片达到旋转的效果，后来发现微信小程序带有动画api，然后就改由image+Animation来实现。 首先在wxml中定义image 注意其中的animation属性，image就由它来实现动画。 而{{animation}}我们在js的data中定义 改变animation的值（官网提供角度范围是-180~180，但是我发现角度越大会一直旋转） 相关代码 0) {
clearInterval(_animationIntervalId);
_animationIntervalId = 0;
}
},}
微信自带的Animation可以实现一次动画，然后可以通过setInterval来达到不断旋转的目的，在使用时，控制startAnimationInterval和stopAnimationInterval即可。 注意： 这里为什么不直接给_animation.rotate(120 * (n)).step()设置一个足够大的值，原因有两点： 1、我们需要便利的控制开始和停止， 2、animation在小程序进入后台后，会持续运行，占用手机内存和cpu，而小程序依赖于微信，在iphone上会导致微信被终止运行 在使用animation时，会发现有时候出现旋转速度很快或者反向旋转再正向旋转的清空，这都是由于rotate的值设置有问题。 1、rotate的值应该是上一次结束时的值， 2、如果设置了全局变量，记得在oncreate时初始化，不然第二次打开同一页面会有问题。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |