微信小程序实现可实时改变转速的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中currentColor关键字的妙用
Feb 27 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
什么是css原子化,有什么用?
Apr 24 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
python操作MongoDB基础知识
2013/11/01 Python
Python程序设计入门(1)基本语法简介
2014/06/13 Python
Python网站验证码识别
2016/01/25 Python
Python的高阶函数用法实例分析
2019/04/11 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
keras.layer.input()用法说明
2020/06/16 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
python 怎样进行内存管理
2020/11/10 Python
python在协程中增加任务实例操作
2021/02/28 Python
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
远程调用的原理
2014/07/05 面试题
远程教育心得体会
2014/01/03 职场文书
初中班主任评语
2014/04/24 职场文书
校园安全标语
2014/06/07 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
2015年调度员工作总结
2015/04/30 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
交通事故责任认定书
2015/08/06 职场文书