微信小程序 連續(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)文章
這篇文章主要為大家介紹了TypeScript的基礎(chǔ)類型，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
在本篇文章里小編給大家整理了一篇關(guān)于js正則表達(dá)式簡(jiǎn)單校驗(yàn)方法，有需要的朋友們可以參考下。2021-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義頭部導(dǎo)航欄，膠囊按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
本篇文章主要介紹了使用Dropzone.js上傳的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-10-10
這篇文章介紹了圖片上傳判斷及預(yù)覽腳本的效果實(shí)例，有需要的朋友可以參考一下2013-08-08
Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法
今天小編就為大家分享一篇Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09
javascript實(shí)現(xiàn)檢驗(yàn)的各種規(guī)則
這篇文章主要介紹了javascript實(shí)現(xiàn)檢驗(yàn)的各種規(guī)則,涉及javascript針對(duì)手機(jī)號(hào)、郵箱、網(wǎng)址、漢字及圖片等相關(guān)檢測(cè)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
JavaScript瀑布流的實(shí)現(xiàn)你學(xué)會(huì)了嗎
這篇文章主要為大家詳細(xì)介紹了JavaScript瀑布流的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
在 JavaScript 中,事件是非常核心的概念,它們使得我們可以設(shè)計(jì)交互性強(qiáng)的網(wǎng)頁(yè)應(yīng)用,本文主要和來(lái)大家聊聊如何在JavaScript中自定義事件,感興趣的可以了解下2024-04-04
前端插件之Bootstrap Dual Listbox使用教程
這篇文章主要介紹了前端插件之Bootstrap Dual Listbox使用教程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07