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

  发布时间:2018-09-11 17:22:51   作者:LcFireRabbit   我要评论

这篇文章主要给大家介绍了关于微信小程序如何实现可实时改变转速的css3旋转动画的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

本文主要介绍的是关于微信小程序实现可实时改变转速的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这个东西。

微信小程序中的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动画的一个属性。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.来上效果图了。


效果图

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

总结

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

相关文章

  • 纯CSS3绘制旋转的鲜花花束动画效果源码

    这是一款基于纯CSS3绘制旋转的鲜花花束动画效果源码。画面中由简单的三角形、矩形图形拼接构成的一束鲜花围绕着中心轴线旋转。旋转过程中各个面呈现出逼真的3D立体视觉效果
    2018-09-01
  • CSS3实现的球形表面旋转运动动画效果源码

    这是一款基于CSS3实现的球形表面旋转运动动画效果源码。画面中立体球形的表面浮现出8个小球排列成圆环形状,沿着立体球形的周围做轮子滚动的动画效果,滚动小球进入大球的
    2018-08-04
  • CSS3+SVG实现的分层大理岩旋转金字塔动画效果源码

    这是一款基于CSS3+SVG实现的分层大理岩旋转金字塔动画效果源码。画面中的金字塔外观看上去有大理岩构成,随着金字塔的旋转,整个金字塔分成三部分逐渐分离开,而后又逐渐合
    2018-07-10
  • 纯CSS3实现的3D风扇旋转动画效果源码

    这是一款基于纯CSS3实现的3D风扇旋转动画效果源码。画面中由纯css3绘制的3D风扇扇叶做规律性的旋转,点击下方的按钮可控制风扇旋转的开启、关闭以及风扇的转头与风速调节等
    2018-06-15
  • 纯CSS3实现的切片面包旋转动画效果源码

    这是一款基于纯CSS3实现的切片面包旋转动画效果源码。画面上一堆叠在一起的切片面包立体图形呈现出螺旋状分散、旋转、聚合的动画转换效果
    2018-05-12
  • js和CSS3实现3D立方体图片画廊特效

    这是一个可实现js和CSS3 3D立方体图片画廊旋转特效,通过CSS3进行布局,构建立方体,然后设置JS代码实现点击缩略图进行立方体旋转的操作
    2018-04-10
  • 纯css3实现小山村风车动画旋转场景特效源码

    纯css3实现小山村风车动画旋转场景特效源码,使用css3绘制黑夜里小村庄风车动画场景,效果非常不错,有需要的朋友可以直接下载使用
    2018-04-02
  • CSS3+SVG实现漂亮的可折叠旋转木马动画特效源码

    这是一款基于CSS3+SVG实现漂亮的可折叠旋转木马动画特效源码,画面上呈现出伞下的旋转木马围绕轴心旋转的动画效果,点击底部的“TOGGLE”按钮可使伞收起,停止旋转木马的动
    2018-03-25
  • HTML5+CSS3实现的鼠标响应式三叶指尖陀螺玩具旋转动画源码

    这是一款基于HTML5+CSS3实现的鼠标响应式三叶指尖陀螺玩具旋转动画源码。画面上由HTML5+css3绘制而成一个三叶指尖陀螺,通过鼠标点击可控制陀螺快速旋转
    2018-03-22
  • 纯CSS3实现的旋转原子动画特效源码

    这是一款基于纯CSS3实现的旋转原子动画特效源码。画面中的电子围绕原子核运转,同时电子运行轨道还不时地变换颜色,形成比较逼真的旋转原子动画特效
    2018-03-21

最新评论