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

建站知识 2021-07-03 08:42www.168986.cn长沙网站建设

前言

本文主要介绍的是关于微信小程序实现可实时改变转速的css3旋转动画的相关内容，分享出来供大家参考学习，狼蚁网站SEO优化话不多说了，来一起看看详细的介绍吧。

先上效果图

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

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>

  data: {
    backgroundcolor:'red'
  },
  changeColor:function(e){
    this.setData({
      backgroundcolor: e.currentTarget.dataset.color
    })
  }

那么狼蚁网站SEO优化咱们说一说这个旋转的动画。小程序里呢，有自己的动画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这个东西。

微信小程序中的Page

Page()定义在js文件中，Page() 函数用来注册一个页面。

Page()函数接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

object参数为

1.我们需要将控制动画时间的css属性放到内联样式中去

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

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

  data: {
    animationTime:'2000ms'
  },

<view class='animationSlow' style='animation-duration: {{animationTime}};-webkit-animation-duration: {{animationTime}};'></view>

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

效果图

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

解决IOS系统的BUG

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

animation-play-state: paused|running;

简而言之就是先用这个属性把动画暂停，修改转速，然后再让它跑起来。这一切都得再js里进行。

1.需要在标签的内联样式里加上这个属性，在Page.data里再定义一个属性控制开始暂停。

<view class='animationSlow' style='animation-duration: {{animationTime}};-webkit-animation-duration: {{animationTime}};animation-play-state:{{status}};-webkit-animation-play-state:{{status}};'></view>

 data: {
    animationTime:'2000ms',
    status: 'running'//paused
  },

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

 changeTime:function(e){
    this.setData({
      status: 'paused'
    })
    this.setData({
      timeAnimation: e.currentTarget.dataset.time,
      status: 'running'
    })
  },

3.来上效果图了。

效果图

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

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对狼蚁SEO的支持。

上一篇：css 盒模型文档流几种清除浮动的方法实例详解下一篇：CSS3 background-image颜色渐变的实现代码

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设