前端一定离不开一个东西,动画,无论是游戏还是app还是网页,都一定有动画效果,微信小游戏,小程序也有动画效果,这里有三种办法实现小程序的动画效果。
1、每帧setData()
onReady: function () {
var that = this;
setInterval(function(){
that.onUpdate();
},1000/60);
},
onUpdate: function() {
this.setData ({
angle: this.data.angle + 1,
})
}
data中的angle数据是用来设置上面图片的角度的,所以可以通过这种方法实现旋转效果,首先在启动页面的时候模拟一个update效果,每一帧执行一次。
该种方法非常耗费性能,不推荐使用。
2、使用Animation实现旋转效果
onReady: function () {
var animation = wx.createAnimation({
duration: 3000,
timingFunction: "linear",
});
this.animation = animation;
animation.rotate(45).step();
this.setData({
animationData: animation.export()
})
this.interval = setInterval(function () {
animation.translate(30).step();
this.setData({
animationData: animation.export()
})
}.bind(this), 3000)
},
Animation不但可以实现旋转,也可以实现放大缩小,移动等动画。
该种方法可以使用,但是不推荐,因为我自己在使用的时候总遇到各种问题,显示有问题,旋转有问题等等,可能是我用的方法不对吧。而且通过定时器去做也是挺耗费性能的事情,微信小程序本来就性能低下。
3、使用keyfreams
.question .desc .image-rotate {
position: absolute;
z-index: 2;
margin-left: 20rpx;
margin-top: 20rpx;
height: 280rpx;
width: 280rpx;
border-radius: 140rpx;
animation: headRotate 6s linear infinite
}
/* 头像旋转效果 */
@keyframes headRotate{
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多,而且很简单。
css可以实现很多的效果,多看看css对于我们实现前端效果有很大帮助。