微信小程序实现可实时改变转速的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中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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实现模仿socket请求返回页面的方法
2014/11/04 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
js propertychange和oninput事件
2014/09/28 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
jQuery的框架介绍
2016/05/11 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
Python 多进程原理及实现
2020/12/21 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
护理专业推荐信
2013/11/07 职场文书
网页设计个人找工作求职信
2013/11/28 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
计划生育证明格式范本
2014/09/12 职场文书
《失物招领》教学反思
2016/02/20 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
详解SQL的窗口函数
2022/04/21 Oracle
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL