這篇文章主要介紹“小程序開發中animation怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“小程序開發中animation怎么使用”文章能幫助大家解決問題。
動畫實例可以調用以下方法來描述動畫，調用結束后會返回自身，支持鏈式調用的寫法。
animation 對象的方法列表：
樣式：
| 方法 | 參數 | 說明 |
|---|---|---|
| opacity | value | 透明度，參數范圍 0~1 |
| backgroundColor | color | 顏色值 |
| width | length | 長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值 |
| height | length | 長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值 |
| top | length | 長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值 |
| left | length | 長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值 |
| bottom | length | 長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值 |
| right | length | 長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值 |
旋轉：
| 方法 | 參數 | 說明 |
|---|---|---|
| rotate | deg | deg的范圍-180~180，從原點順時針旋轉一個deg角度 |
| rotateX | deg | deg的范圍-180~180，在X軸旋轉一個deg角度 |
| rotateY | deg | deg的范圍-180~180，在Y軸旋轉一個deg角度 |
| rotateZ | deg | deg的范圍-180~180，在Z軸旋轉一個deg角度 |
| rotate3d | (x,y,z,deg) | 同transform-function rotate3d |
縮放：
| 方法 | 參數 | 說明 |
|---|---|---|
| scale | sx,[sy] | 一個參數時，表示在X軸、Y軸同時縮放sx倍數；兩個參數時表示在X軸縮放sx倍數，在Y軸縮放sy倍數 |
| scaleX | sx | 在X軸縮放sx倍數 |
| scaleY | sy | 在Y軸縮放sy倍數 |
| scaleZ | sz | 在Z軸縮放sy倍數 |
| scale3d | (sx,sy,sz) | 在X軸縮放sx倍數，在Y軸縮放sy倍數，在Z軸縮放sz倍數 |
偏移：
| 方法 | 參數 | 說明 |
|---|---|---|
| translate | tx,[ty] | 一個參數時，表示在X軸偏移tx，單位px；兩個參數時，表示在X軸偏移tx，在Y軸偏移ty，單位px。 |
| translateX | tx | 在X軸偏移tx，單位px |
| translateY | ty | 在Y軸偏移tx，單位px |
| translateZ | tz | 在Z軸偏移tx，單位px |
| translate3d | (tx,ty,tz) | 在X軸偏移tx，在Y軸偏移ty，在Z軸偏移tz，單位px |
傾斜：
| 方法 | 參數 | 說明 |
|---|---|---|
| skew | ax,[ay] | 參數范圍-180~180；一個參數時，Y軸坐標不變，X軸坐標延順時針傾斜ax度；兩個參數時，分別在X軸傾斜ax度，在Y軸傾斜ay度 |
| skewX | ax | 參數范圍-180~180；Y軸坐標不變，X軸坐標延順時針傾斜ax度 |
| skewY | ay | 參數范圍-180~180；X軸坐標不變，Y軸坐標延順時針傾斜ay度 |
矩陣變形：
| 方法 | 參數 | 說明 |
|---|---|---|
| matrix | (a,b,c,d,tx,ty) | 同transform-function matrix |
| matrix3d | 同transform-function matrix3d |
調用動畫操作方法后要調用 step() 來表示一組動畫完成，可以在一組動畫中調用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫。step 可以傳入一個跟 wx.createAnimation() 一樣的配置參數用于指定當前組動畫的配置。
示例：
<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>關于“小程序開發中animation怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
