前言
本文主要介绍的是关于微信小程序实现可实时改变转速的css3旋转动画的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
先上效果图
最上面那一行就是个简单的换颜色效果，极其简答就不多说了，直接上代码。
WXML
| <view class='box' style='background-color:{{backgroundcolor}}'></view><view class='viewBox'> <button bindtap='changeColor' data-color='black' class='box'>黑</button> <button bindtap='changeColor' data-color='violet' class='box'>紫</button> <button bindtap='changeColor' data-color='orange' class='box'>橙</button> <button bindtap='changeColor' data-color='blue' class='box'>蓝</button> <button bindtap='changeColor' data-color='green' class='box'>绿</button></view> |
JS
| data: { backgroundcolor:'red' }, changeColor:function(e){ this.setData({ backgroundcolor: e.currentTarget.dataset.color }) } |
那么下面咱们说一说这个旋转的动画。小程序里呢，有自己的动画api，但是用起来感觉极其麻烦，而且容易产生倒转，对设备的性能消耗也多，动画多了以后就会极其卡顿，所以还是css3的动画比较好。
首先来写这个css3动画
css3旋转动画
| <view class='animationSlow'></view> |
| .animationSlow { width: 100rpx; height: 100rpx; background-color: orange; animation-name: myfirst; /*动画的名称 */ animation-duration: 2000ms; /*动画从开始到结束的时间*/ animation-timing-function: linear; /*动画执行快慢的参数*/ animation-iteration-count: infinite; /*动画执行多少次的参数*//*以下是兼容ios所需，参数意义与上相同*/ -webkit-animation-name: myfirst; -webkit-animation-duration: 2000ms; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;}@keyframes myfirst { /*开始转的角度*/ from { transform: rotate(0deg); }/*结束的角度*/ to { transform: rotate(360deg); }}/*兼容ios*/@-webkit-keyframes myfirst { from { transform: rotate(0deg); } to { transform: rotate(360deg); }} |
效果图
如果只是一个一次性的动画效果，现在这些代码就OK了。
如果想要实时可以改变旋转的转速，我们还得再加点东西。
实现可以实时修改转速
微信小程序里涉及到实时数据就避免不了Page.data这个东西。
新闻热点
疑难解答
