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


Posted in HTML / CSS onSeptember 11, 2018

前言

本文主要介绍的是关于微信小程序实现可实时改变转速的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);
  }
}

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

效果图

如果只是一个一次性的动画效果,现在这些代码就OK了。

如果想要实时可以改变旋转的转速,我们还得再加点东西。

实现可以实时修改转速

微信小程序里涉及到实时数据就避免不了Page.data这个东西。

微信小程序中的Page

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

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

object参数为:

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

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

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

那么接下来重点来了:其实这里有个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旋转动画实例代码
效果图

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

总结

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

HTML / CSS 相关文章推荐
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 HTML / CSS
CSS3 background-image颜色渐变的实现代码
Sep 13 #HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 #HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 #HTML / CSS
css3绘制百度的小度熊
Oct 29 #HTML / CSS
css3实现信纸/同学录效果的示例代码
Dec 11 #HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 #HTML / CSS
详解Css3新特性应用之过渡与动画
Jan 10 #HTML / CSS
You might like
PHP生成便于打印的网页
2006/10/09 PHP
PHP新手上路(十四)
2006/10/09 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
CURL状态码列表(详细)
2013/06/27 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
Python书单 不将就
2017/07/11 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
法学专业应届生求职信
2013/10/16 职场文书
酒店前台接待岗位职责
2013/12/03 职场文书
酒店司机岗位职责
2013/12/14 职场文书
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
八一建军节活动方案
2014/02/10 职场文书
股权转让协议书范本
2014/04/12 职场文书
2014年计生标语
2014/06/23 职场文书
单位委托书怎么写
2014/08/02 职场文书
委托书范本
2014/09/13 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
单位综合评价意见
2015/06/05 职场文书
2015年支教教师工作总结
2015/07/22 职场文书