微信小程序 連續(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)加減簡(jiǎn)易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript制作一個(gè)簡(jiǎn)單的網(wǎng)頁版加減計(jì)算器，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-05-05
Function.prototype.call和Function.prototype.apply都是非常常用的方法,它們的作用一模一樣,區(qū)別僅在于傳入?yún)?shù)形式的不同,下面這篇文章主要介紹了JavaScript深入理解系列之call與apply的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了typescript中聲明合并介紹，類型合并表明編譯器將合并兩個(gè)分開的并且名稱相同的聲明，合并之后的聲明擁有兩個(gè)聲明的特點(diǎn)，任意數(shù)量的聲明可以被合并，不僅限兩個(gè)，更多相關(guān)內(nèi)容需要的朋友可以參考下面文章內(nèi)容2022-09-09
這篇文章主要為大家詳細(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
本文介紹了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