微信小程序 连续旋转动画(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新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
关于JS中prototype的理解
Sep 07 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
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
php 模拟POST提交的2种方法详解
2013/06/17 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
jquery实现图片左右切换的方法
2015/05/07 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
vuex的使用步骤
2021/01/06 Vue.js
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
python中__call__方法示例分析
2014/10/11 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
自学python的建议和周期预算
2019/01/30 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Python多线程获取返回值代码实例
2020/02/17 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
酒店管理自荐信
2013/10/23 职场文书
公司经理聘任书
2014/03/29 职场文书
《观舞记》教学反思
2014/04/16 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
回复函范文
2015/07/14 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL