微信小程序 连续旋转动画(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 相关文章推荐
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
php实现的简单日志写入函数
2015/03/31 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
python使用Berkeley DB数据库实例
2014/09/26 Python
星球大战与Python之间的那些事
2016/01/07 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
python web框架中实现原生分页
2019/09/08 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
Sql面试题
2013/03/20 面试题
Javascript如何发送一个Ajax请求
2015/01/26 面试题
社区工作者思想汇报
2014/01/13 职场文书
挂靠协议书
2015/01/27 职场文书
2015年售票员工作总结
2015/04/29 职场文书
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android