微信小程序连续旋转动画（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就行！

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

您可能感兴趣的文章:

利用JS实现加减简易计算器
这篇文章主要为大家详细介绍了如何利用JavaScript制作一个简单的网页版加减计算器，文中的示例代码讲解详细，感兴趣的可以了解一下
2022-05-05
JavaScript深入理解系列之call与apply
Function.prototype.call和Function.prototype.apply都是非常常用的方法,它们的作用一模一样,区别仅在于传入参数形式的不同,下面这篇文章主要介绍了JavaScript深入理解系列之call与apply的相关资料,需要的朋友可以参考下
2022-04-04
typescript中声明合并介绍
这篇文章主要介绍了typescript中声明合并介绍，类型合并表明编译器将合并两个分开的并且名称相同的声明，合并之后的声明拥有两个声明的特点，任意数量的声明可以被合并，不仅限两个，更多相关内容需要的朋友可以参考下面文章内容
2022-09-09
js HTML5多媒体影音播放
这篇文章主要为大家详细介绍了js HTML5多媒体影音播放,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
js计算系统当前日期是星期几的方法
这篇文章主要为大家详细介绍了js计算系统当前日期是星期几4种方法,需要的朋友可以参考下
2016-07-07
现代配置YAML对比JSON优势分析
这篇文章主要为大家介绍了关于现代配置指南中YAML对比JSON的优势分析说明，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
2022-02-02
JavaScript原生拖放详解
本文介绍了HTML5拖放事件的处理方法,包括拖放事件的触发顺序、dataTransfer对象的使用以及可拖动能力的设置,通过这些方法,可以实现更丰富的用户交互效果
2024-11-11
javascript 实现的多浏览器支持的贪吃蛇webgame
兼容FF IE的javascript版贪吃蛇游戏，非常厉害的高手。
2008-01-01
JavaScript中this的学习笔记及用法整理
在本篇文章里小编给大家整理的是关于JavaScript中this的使用以及代码实例，需要的朋友们学习下。
2020-02-02
JavaScript实现的3D旋转魔方动画效果实例代码
在本篇文章里小编给大家整理了关于JavaScript实现的3D旋转魔方动画效果实例代码，有兴趣的朋友们测试下。
2019-07-07