⼩程序Animation实现图⽚旋转动画⽰例
最近⼩程序中有⼀个图⽚旋转的需求，最初是想着通过切换多张图⽚达到旋转的效果，后来发现⼩程序带有动画api，然后就改由image+Animation来实现。
代码转换⾸先在wxml中定义image
<image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image>
注意其中的animation属性，image就由它来实现动画。
⽽{{animation}}我们在js的data中定义
data: {
animation: ''
},
改变animation的值（官⽹提供⾓度范围是-180~180，但是我发现⾓度越⼤会⼀直旋转）
onShow: function() {
console.log('index---------onShow()')
this.animation = wx.createAnimation({
duration: 1400,
timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
delay: 0,
transformOrigin: '50% 50% 0',
success: function(res) {
console.log("res")
}
})
},
rotateAni: function (n) {
console.log("rotate=="+n)
ate(180*(n)).step()
this.setData({
animation: port()
})
},
相关代码
var _animation;
var _animationIndex
const _ANIMATION_TIME = 500;
pages {
...
onShow: function () {
_animation = wx.createAnimation({
duration: _ANIMATION_TIME,
timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
delay: 0,
transformOrigin: '50% 50% 0'
})
},
/
**
* 实现image旋转动画，每次旋转 120*n度
*/
rotateAni: function (n) {
_ate(120 * (n)).step()
this.setData({
animation: _port()
})
},
/**
* 开始旋转
*/
startAnimationInterval: function () {
var that = this;
_animationIntervalId = setInterval(function () {
}, _ANIMATION_TIME); // 没间隔_ANIMATION_TIME进⾏⼀次旋转
},
/**
* 停⽌旋转
*/
stopAnimationInterval: function () {
if (_animationIntervalId> 0) {
clearInterval(_animationIntervalId);
_animationIntervalId = 0;
}
},
}
⾃带的Animation可以实现⼀次动画，然后可以通过setInterval来达到不断旋转的⽬的，在使⽤时，控制startAnimationInterval和stopAnimationInterval即可。
注意：
这⾥为什么不直接给_ate(120 * (n)).step()设置⼀个⾜够⼤的值，原因有两点：
1、我们需要便利的控制开始和停⽌，
2、animation在⼩程序进⼊后台后，会持续运⾏，占⽤⼿机内存和cpu，⽽⼩程序依赖于，在iphone上会导致被终⽌运⾏
在使⽤animation时，会发现有时候出现旋转速度很快或者反向旋转再正向旋转的清空，这都是由于rotate的值设置有问题。
1、rotate的值应该是上⼀次结束时的值，
2、如果设置了全局变量，记得在oncreate时初始化，不然第⼆次打开同⼀页⾯会有问题。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。