my.createAnimation
mPaaS 10.1.32 及以上版本支援該介面。
該介面用於建立動畫執行個體 animation。調用執行個體的方法來描述動畫，最後通過動畫執行個體的 export 方法將動畫資料匯出並傳遞給組件的 animation 屬性。
export 方法調用後會清掉之前的動畫操作。
入參
參數 | 類型 | 必填 | 說明 |
duration | Integer | 否 | 動畫的期間，單位 ms，預設值為 |
timeFunction | String | 否 | 定義動畫的效果，預設值為 |
delay | Integer | 否 | 動畫延遲時間，單位 ms，預設值為 |
transformOrigin | String | 否 | 設定 |
const animation = my.createAnimation({
transformOrigin: "top right",
duration: 3000,
timeFunction: "ease-in-out",
delay: 100,
})animation
動畫執行個體可以調用以下方法來描述動畫，調用結束後會返回執行個體本身，支援鏈式調用的寫法。
view 的 animation 屬性初始化為 {} 時，在基礎庫 1.11.0 以下版本（不包含 1.11.0）會報錯，建議初始化為 null。
樣式
方法 | 參數 | 說明 |
opacity | value | 透明度，參數範圍為 |
backgroundColor | color | 顏色值。 |
width | length | 設定寬度：長度值，單位為 px，例如：300 px。 |
height | length | 設定高度：長度值，單位為 px，例如：300 px。 |
top | length | 設定 top 值：長度值，單位為 px，例如：300 px。 |
left | length | 設定 left 值：長度值，單位為 px，例如：300 px。 |
bottom | length | 設定 bottom 值：長度值，單位為 px，例如：300 px。 |
right | length | 設定 right 值：長度值，單位為 px，例如：300 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；兩個參數時，表示在 X 軸位移 tx，在 Y 軸位移 ty，單位均為 px。 |
translateX | tx | 在 X 軸位移 tx，單位為 px。 |
translateY | ty | 在 Y 軸位移 ty，單位為 px。 |
translateZ | tz | 在 Z 軸位移 tz，單位為 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（英文） |
matrix3d | (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) |
動畫隊列
調用動畫操作方法後需要調用 step() 來表示一組動畫完成。在一組動畫中可以調用任意多個動畫方法，一組動畫中的所有動畫會同時開始，當一組動畫完成後才會進行下一組動畫。step() 可以傳入一個跟 my.createAnimation() 一樣的配置參數用於指定當前組動畫的配置。
程式碼範例
在 axml 檔案中添加如下代碼：
<view animation="{{animationInfo}}" style="background:yellow;height:100rpx;width:100rpx"></view>在 js 檔案中添加如下代碼：
Page({
data: {
animationInfo: {}
},
onShow(){
var animation = my.createAnimation({
duration: 1000,
timeFunction: 'ease-in-out',
});
this.animation = animation;
animation.scale(3,3).rotate(60).step();
this.setData({
animationInfo:animation.export()
});
setTimeout(function() {
animation.translate(35).step();
this.setData({
animationInfo:animation.export(),
});
}.bind(this), 1500);
},
rotateAndScale () {
// 旋轉同時放大
this.animation.rotate(60).scale(3, 3).step();
this.setData({
animationInfo: this.animation.export(),
});
},
rotateThenScale () {
// 先旋轉後放大
this.animation.rotate(60).step();
this.animation.scale(3, 3).step();
this.setData({
animationInfo: this.animation.export(),
});
},
rotateAndScaleThenTranslate () {
// 先旋轉同時放大，然後平移
this.animation.rotate(60).scale(3, 3).step();
this.animation.translate(100, 100).step({ duration: 2000 });
this.setData({
animationInfo: this.animation.export()
});
}
})