微信小程序 连续旋转动画(this.animation.rotate)详解


Posted in Javascript onApril 07, 2017

微信小程序 连续旋转动画

一、.js中封装旋转动画方法

添加animation属性

data:{
    animation:''"
    }

改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转)

onShow: function() {
    console.log('index---------onShow()')
     this.animation = wx.createAnimation({
     duration: 1400,
     timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
     delay: 0,
     transformOrigin: '50% 50% 0',
     success: function(res) {
      console.log("res")
     }
    })
   },
   rotateAni: function (n) {
    console.log("rotate=="+n)
    this.animation.rotate(180*(n)).step()
    this.setData({
     animation: this.animation.export()
    })
   },
 

二、在.wxml中需要的控件上添加animation属性

<view class="show-iconView">
   <image src="{{src}}" class="show-iconImage" animation="{{animation}}" mode="scaleToFill"></image>
 </view>

三、连续动画需要添加定时器

this.interval = setInterval所传参数每次++i就行!

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
简单介绍react redux的中间件的使用
Apr 06 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
js时间查询插件使用详解
Apr 07 #Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 #Javascript
js简单实现网页换肤功能
Apr 07 #Javascript
JS简单实现获取元素的封装操作示例
Apr 07 #Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 #Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 #Javascript
You might like
PHP5中MVC结构学习
2006/10/09 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
PHP常用技巧汇总
2016/03/04 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
浅谈Redux中间件的实践
2018/07/27 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
体育运动口号
2014/06/09 职场文书
企业标语口号
2014/06/10 职场文书
干部对照检查材料范文
2014/08/26 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
单位委托函范文
2015/01/29 职场文书
学年个人总结范文
2015/03/05 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
Linux安装apache服务器的配置过程
2021/11/27 Servers
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL