微信小程序連續(xù)旋轉(zhuǎn)動(dòng)畫（this.animation.rotate）詳解

更新時(shí)間：2017年04月07日 10:41:47 作者：ForeverGuard

這篇文章主要介紹了微信小程序連續(xù)旋轉(zhuǎn)動(dòng)畫（this.animation.rotate）詳解的相關(guān)資料,需要的朋友可以參考下

微信小程序連續(xù)旋轉(zhuǎn)動(dòng)畫

一、.js中封裝旋轉(zhuǎn)動(dòng)畫方法

　　添加animation屬性

  data:{
    animation:''"
    }

　　改變animation的值（官網(wǎng)提供角度范圍是-180~180，但是我發(fā)現(xiàn)角度越大會(huì)一直旋轉(zhuǎn)）

 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>

三、連續(xù)動(dòng)畫需要添加定時(shí)器

　　this.interval = setInterval所傳參數(shù)每次++i就行！

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

利用JS實(shí)現(xiàn)加減簡易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript制作一個(gè)簡單的網(wǎng)頁版加減計(jì)算器，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下
2022-05-05
JavaScript深入理解系列之call與apply
Function.prototype.call和Function.prototype.apply都是非常常用的方法,它們的作用一模一樣,區(qū)別僅在于傳入?yún)?shù)形式的不同,下面這篇文章主要介紹了JavaScript深入理解系列之call與apply的相關(guān)資料,需要的朋友可以參考下
2022-04-04
typescript中聲明合并介紹
這篇文章主要介紹了typescript中聲明合并介紹，類型合并表明編譯器將合并兩個(gè)分開的并且名稱相同的聲明，合并之后的聲明擁有兩個(gè)聲明的特點(diǎn)，任意數(shù)量的聲明可以被合并，不僅限兩個(gè)，更多相關(guān)內(nèi)容需要的朋友可以參考下面文章內(nèi)容
2022-09-09
js HTML5多媒體影音播放
這篇文章主要為大家詳細(xì)介紹了js HTML5多媒體影音播放,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
js計(jì)算系統(tǒng)當(dāng)前日期是星期幾的方法
這篇文章主要為大家詳細(xì)介紹了js計(jì)算系統(tǒng)當(dāng)前日期是星期幾4種方法,需要的朋友可以參考下
2016-07-07
現(xiàn)代配置YAML對(duì)比JSON優(yōu)勢(shì)分析
這篇文章主要為大家介紹了關(guān)于現(xiàn)代配置指南中YAML對(duì)比JSON的優(yōu)勢(shì)分析說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步
2022-02-02
JavaScript原生拖放詳解
本文介紹了HTML5拖放事件的處理方法,包括拖放事件的觸發(fā)順序、dataTransfer對(duì)象的使用以及可拖動(dòng)能力的設(shè)置,通過這些方法,可以實(shí)現(xiàn)更豐富的用戶交互效果
2024-11-11
javascript 實(shí)現(xiàn)的多瀏覽器支持的貪吃蛇webgame
兼容FF IE的javascript版貪吃蛇游戲，非常厲害的高手。
2008-01-01
JavaScript中this的學(xué)習(xí)筆記及用法整理
在本篇文章里小編給大家整理的是關(guān)于JavaScript中this的使用以及代碼實(shí)例，需要的朋友們學(xué)習(xí)下。
2020-02-02
JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動(dòng)畫效果實(shí)例代碼
在本篇文章里小編給大家整理了關(guān)于JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動(dòng)畫效果實(shí)例代碼，有興趣的朋友們測(cè)試下。
2019-07-07