微信小程式Animation動畫的使用

目錄和css3動畫不同，小程式中動畫是主要是通過js控制的，簡單來說就是建立乙個動畫例項animation。呼叫例項的方法來定義動畫效果。最後通過動畫例項的export方法匯出動畫資料傳遞給元件的animation屬性。

首先需要通過wx.createanimation，建立乙個動畫物件，該物件接收四個屬性。

屬性名資料型別

預設值必填

說明duration

number

400否

動畫持續時間，單位 ms

timingfunction

string

'linear'

否動畫的效果

delay

number0否

動畫延遲時間，單位 ms

transformorigin

string

'50% 50% 0'

否動畫起點

其中，timingfunction屬性有七種值型別值說明

'linear'

動畫從頭到尾的速度是相同的

'ease'

動畫以低速開始，然後加快，在結束前變慢

'ease-in'

動畫以低速開始

'ease-in-out'

動畫以低速開始和結束

''ease-out'

動畫以低速結束

'step-start'

動畫第一幀就跳至結束狀態直到結束

'step-end'

動畫一直保持開始狀態，最後一幀跳到結束狀態

例子：

let change = wx.createanimation();

change.opacity(0).step();
this.setdata();

page(,

} })

元素往右邊移動200rpx，並且放大1.5倍的動畫例子：

move());

move.translatex(200 / 750 * wx.getsysteminfosync().windowwidth).scale(1.5,1.5).step();
this.setdata()
}

往期文章

細數js中實用且強大的操作符&運算子

個人主頁

微信小程式 動畫animation

二 動畫 注意獲取元素節點方法為非同步呼叫，因此使用promise，確保節點獲取到值後再返回獲取的width寬度。引數 select 想要獲取的節點的類名，使用 getrect classname getrect select exec 工具函式寫完後，呼叫獲取元素屬性，注意生命週期函式使用read...

微信小程式實現animation動畫

微信小程式實現animation動畫，具體內容如下 1.建立動畫例項 wx.crsitlrgfleateanimation object 建立乙個動畫例項animation。呼叫例項的方法來描述動畫。最後通過動畫例項的export方法匯出動畫資料傳遞給元件的animation屬性。注意 export...

微信小程式開發之animation動畫實現

wx.createanimation object 建立乙個動畫例項animation。呼叫例項的方法來描述動畫。最後通過動畫例項的export方法匯出動畫資料傳遞給元件的animation屬性。注意 export 方法每次呼叫後會清掉之前的動畫操作 動畫佇列 呼叫動畫操作方法後要呼叫 step 來...