Fork me on GitHub

[小程序]--在项目中实现动画的三种方式

版权声明:阳仔原创,转载请注明出处。 https://blog.csdn.net/honey199396/article/details/80091623

前端一定离不开一个东西,动画,无论是游戏还是app还是网页,都一定有动画效果,微信小游戏,小程序也有动画效果,这里有三种办法实现小程序的动画效果。

image

每帧setData()

1
2
3
4
5
6
7
8
9
10
11
12
onReady: function () {
var that = this;
setInterval(function(){
that.onUpdate();
},1000/60);
},

onUpdate: function() {
this.setData ({
angle: this.data.angle + 1,
})
}

data中的angle数据是用来设置上面图片的角度的,所以可以通过这种方法实现旋转效果,首先在启动页面的时候模拟一个update效果,每一帧执行一次。
该种方法非常耗费性能,不推荐使用。

Animation实现旋转效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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不但可以实现旋转,也可以实现放大缩小,移动等动画。
该种方法可以使用,但是不推荐,因为我自己在使用的时候总遇到各种问题,显示有问题,旋转有问题等等,可能是我用的方法不对吧。而且通过定时器去做也是挺耗费性能的事情,微信小程序本来就性能低下。

使用Keyfreams

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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对于我们实现前端效果有很大帮助。

支持作者