您当前的位置: 首页 > 解决方案

微信小程序可实时改变转速的css3旋转动画

  • 作者: admin
  • 发布于 2018-08-30 14:08:03
  • 来源:  
  • 栏目:解决方案

导语: 先上效果图 最上面那一行就是个简单的换颜色效果,极其简答就不多说了,直接上代码。

 

先上效果图 

14.gif

最上面那一行就是个简单的换颜色效果,极其简答就不多说了,直接上代码。

 
  1. <view class='box' style='background-color:{{backgroundcolor}}'>
  2. </view>
  3. <view class='viewBox'>
  4. <button bindtap='changeColor' data-color='black' class='box'></button>
  5. <button bindtap='changeColor' data-color='violet' class='box'></button>
  6. <button bindtap='changeColor' data-color='orange' class='box'></button>
  7. <button bindtap='changeColor' data-color='blue' class='box'></button>
  8. <button bindtap='changeColor' data-color='green' class='box'>绿</button>
  9. </view>

JS

 
  1. data: {
  2. backgroundcolor:'red'
  3. },
  4. changeColor:function(e){
  5. this.setData({
  6. backgroundcolor: e.currentTarget.dataset.color
  7. })
  8. }

那么下面咱们说一说这个旋转的动画。小程序里呢,有自己的动画api,但是用起来感觉极其麻烦,而且容易产生倒转,对设备的性能消耗也多,动画多了以后就会极其卡顿,所以还是css3的动画比较好。 
首先来写这个css3动画 
css3旋转动画

 
  1. <view class='animationSlow'></view>
  2. .animationSlow {
  3. width: 100rpx;
  4. height: 100rpx;
  5. background-color: orange;
  6. animation-name: myfirst; /*动画的名称 */
  7. animation-duration: 2000ms; /*动画从开始到结束的时间*/
  8. animation-timing-function: linear; /*动画执行快慢的参数*/
  9. animation-iteration-count: infinite; /*动画执行多少次的参数*//*以下是兼容ios所需,参数意义与上相同*/
  10. -webkit-animation-name: myfirst;
  11. -webkit-animation-duration: 2000ms;
  12. -webkit-animation-timing-function: linear;
  13. -webkit-animation-iteration-count: infinite;
  14. }
  15. @keyframes myfirst {
  16. /*开始转的角度*/
  17. from {
  18. transform: rotate(0deg);
  19. }/*结束的角度*/
  20. to {
  21. transform: rotate(360deg);
  22. }
  23. }
  24. /*兼容ios*/
  25. @-webkit-keyframes myfirst {
  26. from {
  27. transform: rotate(0deg);
  28. }
  29. to {
  30. transform: rotate(360deg);
  31. }
  32. }

 

效果图 

15.gif

如果只是一个一次性的动画效果,现在这些代码就OK了。 
如果想要实时可以改变旋转的转速,我们还得再加点东西。

实现可以实时修改转速 
微信小程序里涉及到实时数据就避免不了Page.data这个东西。 
1.我们需要将控制动画时间的css属性放到内联样式中去

 
  1. <view class='animationSlow' style='animation-duration: 2000ms;-webkit-animation-duration: 2000ms;'></view>

2.在页面对应的js中,设置掌控时间的Page.data属性,将wxml里内联属性的时间改为Page.data的属性。

 
  1. data: {
  2. animationTime:'2000ms'
  3. },
  4. <view class='animationSlow' style='animation-duration: {{animationTime}};-webkit-animation-duration: {{animationTime}};'></view>

3.接下来我们写几个按钮,绑定上修改这个时间的方法,进而来改变转速。这一步都是基本代码,我就不贴代码了。放个效果图吧。

效果图

16.gif

那么接下来重点来了:其实这里有个bug,这个效果呢在安卓机上是一点点问题都没有的。但是在苹果机上,动画一旦开始,再通过这个方法去修改转速,就不能生效了。

解决IOS系统的BUG 
上面说了,IOS系统上呢,动画一旦开始,这个方法就不能用了。那么咱是不是可以先把这个动画停下来,然后再改转速呢?这个办法可不可以呢?答案是肯定的,但是不是去把动画时间改为0,而是采用了css3动画的一个属性。CSS3 动画教程

 
  1. animation-play-state: paused|running;

简而言之就是先用这个属性把动画暂停,修改转速,然后再让它跑起来。这一切都得再js里进行。 
1.需要在标签的内联样式里加上这个属性,在Page.data里再定义一个属性控制开始暂停。

 
  1. <view class='animationSlow' style='animation-duration: {{animationTime}};-webkit-animation-duration: {{animationTime}};animation-play-state:{{status}};-webkit-animation-play-state:{{status}};'></view>
  2. data: {
  3. animationTime:'2000ms',
  4. status: 'running'//paused
  5. },

2.然后我们去修改改变转速的方法。暂停>(修改>跑起来),效果上稍微有些延迟。

 
  1. changeTime:function(e){
  2. this.setData({
  3. status: 'paused'
  4. })
  5. this.setData({
  6. timeAnimation: e.currentTarget.dataset.time,
  7. status: 'running'
  8. })
  9. },

3.来上效果图了。

效果图

16.gif

可能动图上感觉不出来,不过你们可以去真机试一下,就可以展现出来了。



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部