微信小程序实现可实时改变转速的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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 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实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
javascript正则表达式总结
2016/02/29 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
DOM事件探秘篇
2017/02/15 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python中的格式化输出用法总结
2016/07/28 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
《灯光》教学反思
2014/02/08 职场文书
社会公德演讲稿
2014/05/20 职场文书
上海世博会志愿者口号
2014/06/17 职场文书