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

更新时间：2017年04月07日 10:41:47 作者：ForeverGuard

这篇文章主要介绍了微信小程序连续旋转动画（this.animation.rotate）详解的相关资料,需要的朋友可以参考下

微信小程序连续旋转动画

一、.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就行！

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

您可能感兴趣的文章:

jquery单行文字向上滚动效果的实现代码
这篇文章主要介绍了jquery单行文字向上滚动效果的具体实现，此效果适应于很多场景，会的不会的都要学习下啊
2014-09-09
FireBug 调试JS入门教程如何调试JS
这篇文章主要为大家介绍下通过firefox的FireBug调试JS，需要的朋友可以参考下
2013-12-12
EasyUi中的Combogrid 实现分页和动态搜索远程数据
jquery easyui中的combogrid比较特殊，算是combo和grid的组合，combogrid结合一个可编辑的文本框和下拉数据网格面板，可以让用户迅速找到并选择，又可以进行搜索，展示与当前输入的字符相匹配的数据。下面给大家介绍EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016-04-04
JavaScript闭包与作用域链实例分析
这篇文章主要介绍了JavaScript闭包与作用域链,结合实例形式分析了javascript闭包的具体概念、功能、并对比作用域链分析了闭包的相关使用技巧与注意事项,需要的朋友可以参考下
2019-01-01
22种JavaScript中数组常用API总结
在前端开发中，数组是一种常见且重要的数据结构，本文主要介绍了前端中数组常用的API，包括添加、删除、截取、合并、转换等操作，希望对大家有所帮助
2023-05-05
JavaScript中async和await的使用及队列详情
这篇文章主要介绍了JavaScript中async和await的使用及队列详情，主要围绕js中async和await简单解析展开面试中可能会问到的关于队列的一些场景和知识点,需要的朋友可以参考一下
2022-07-07
PHP获取当前页面完整URL的方法
在大家在使用PHP编写程序的时候，我们常常想要获取当前页面的URL。下面就给大家分享了PHP获取当前页面完整URL的方法，文中还给出了如获取域名或主机地址、获取网页地址和包含端口号的完整url等的方法，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-12-12
asp错误 '80040e21' 多步 OLE DB&nbs
今天在写asp入库操作的时候提示Microsoft OLE DB Provider for ODBC Drivers 错误 80040e21 多步 OLE DB 操作产生错误，请检查每个 OLE DB 状态值，经测试时函数定义文件没有加载导致类型不对，所以无法入库
2023-05-05
javascript与CSS复习(三)
呵呵，又弄成了三部曲，这是最后一部分，关于鼠标和浏览器本身显示上的一些属性。
2010-06-06
bootstrap动态调用select下拉框的实例代码
今天小编就为大家分享一篇bootstrap动态调用select下拉框的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08