uni.createAnimation(OBJECT)
創(chuàng)建一個(gè)動(dòng)畫(huà)實(shí)例 animation罐氨。調(diào)用實(shí)例的方法來(lái)描述動(dòng)畫(huà)。最后通過(guò)動(dòng)畫(huà)實(shí)例的export方法導(dǎo)出動(dòng)畫(huà)數(shù)據(jù)傳遞給組件的animation屬性米间。
平臺(tái)差異說(shuō)明
| App | H5 | 微信小程序 | 支付寶小程序 | 百度小程序 | 字節(jié)跳動(dòng)小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | HBuilderX 2.0.4+ | √ | √ | √ | √ | √ |
注意:
- export 方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫(huà)操作
- nvue 暫不支持
OBJECT參數(shù)說(shuō)明：
| 參數(shù) | 類型 | 必填 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|---|
| duration | Integer | 否 | 400 | 動(dòng)畫(huà)持續(xù)時(shí)間强品，單位ms |
| timingFunction | String | 否 | "linear" | 定義動(dòng)畫(huà)的效果 |
| delay | Integer | 否 | 0 | 動(dòng)畫(huà)延遲時(shí)間，單位 ms |
| transformOrigin | String | 否 | "50% 50% 0" | 設(shè)置transform-origin |
timingFunction 有效值：
| 值 | 說(shuō)明 |
|---|---|
| linear | 動(dòng)畫(huà)從頭到尾的速度是相同的 |
| ease | 動(dòng)畫(huà)以低速開(kāi)始屈糊，然后加快的榛，在結(jié)束前變慢 |
| ease-in | 動(dòng)畫(huà)以低速開(kāi)始 |
| ease-in-out | 動(dòng)畫(huà)以低速開(kāi)始和結(jié)束 |
| ease-out | 動(dòng)畫(huà)以低速結(jié)束 |
| step-start | 動(dòng)畫(huà)第一幀就跳至結(jié)束狀態(tài)直到結(jié)束 |
| step-end | 動(dòng)畫(huà)一直保持開(kāi)始狀態(tài)，最后一幀跳到結(jié)束狀態(tài) |
var animation = uni.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
})
animation
動(dòng)畫(huà)實(shí)例可以調(diào)用以下方法來(lái)描述動(dòng)畫(huà)逻锐，調(diào)用結(jié)束后會(huì)返回自身夫晌，支持鏈?zhǔn)秸{(diào)用的寫法。
animation 對(duì)象的方法列表：
樣式：
| 方法 | 參數(shù) | 說(shuō)明 |
|---|---|---|
| opacity | value | 透明度谦去，參數(shù)范圍 0~1 |
| backgroundColor | color | 顏色值 |
| width | length | 長(zhǎng)度值慷丽，如果傳入 Number 則默認(rèn)使用 px，可傳入其他自定義單位的長(zhǎng)度值 |
| height | length | 長(zhǎng)度值鳄哭，如果傳入 Number 則默認(rèn)使用 px要糊，可傳入其他自定義單位的長(zhǎng)度值 |
| top | length | 長(zhǎng)度值，如果傳入 Number 則默認(rèn)使用 px妆丘，可傳入其他自定義單位的長(zhǎng)度值 |
| left | length | 長(zhǎng)度值锄俄，如果傳入 Number 則默認(rèn)使用 px，可傳入其他自定義單位的長(zhǎng)度值 |
| bottom | length | 長(zhǎng)度值勺拣，如果傳入 Number 則默認(rèn)使用 px奶赠，可傳入其他自定義單位的長(zhǎng)度值 |
| right | length | 長(zhǎng)度值，如果傳入 Number 則默認(rèn)使用 px药有，可傳入其他自定義單位的長(zhǎng)度值 |
旋轉(zhuǎn)：
| 方法 | 參數(shù) | 說(shuō)明 |
|---|---|---|
| rotate | deg | deg的范圍-180~180毅戈，從原點(diǎn)順時(shí)針旋轉(zhuǎn)一個(gè)deg角度 |
| rotateX | deg | deg的范圍-180~180苹丸，在X軸旋轉(zhuǎn)一個(gè)deg角度 |
| rotateY | deg | deg的范圍-180~180，在Y軸旋轉(zhuǎn)一個(gè)deg角度 |
| rotateZ | deg | deg的范圍-180~180苇经，在Z軸旋轉(zhuǎn)一個(gè)deg角度 |
| rotate3d | (x,y,z,deg) | 同transform-function rotate3d |
縮放：
| 方法 | 參數(shù) | 說(shuō)明 |
|---|---|---|
| scale | sx,[sy] | 一個(gè)參數(shù)時(shí)赘理，表示在X軸、Y軸同時(shí)縮放sx倍數(shù)扇单；兩個(gè)參數(shù)時(shí)表示在X軸縮放sx倍數(shù)商模，在Y軸縮放sy倍數(shù) |
| scaleX | sx | 在X軸縮放sx倍數(shù) |
| scaleY | sy | 在Y軸縮放sy倍數(shù) |
| scaleZ | sz | 在Z軸縮放sy倍數(shù) |
| scale3d | (sx,sy,sz) | 在X軸縮放sx倍數(shù)，在Y軸縮放sy倍數(shù)蜘澜，在Z軸縮放sz倍數(shù) |
偏移：
| 方法 | 參數(shù) | 說(shuō)明 |
|---|---|---|
| translate | tx,[ty] | 一個(gè)參數(shù)時(shí)施流，表示在X軸偏移tx，單位px鄙信；兩個(gè)參數(shù)時(shí)瞪醋，表示在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 |
傾斜：
| 方法 | 參數(shù) | 說(shuō)明 |
|---|---|---|
| skew | ax,[ay] | 參數(shù)范圍-180~180谅河；一個(gè)參數(shù)時(shí)咱旱，Y軸坐標(biāo)不變，X軸坐標(biāo)延順時(shí)針傾斜ax度绷耍；兩個(gè)參數(shù)時(shí)吐限，分別在X軸傾斜ax度，在Y軸傾斜ay度 |
| skewX | ax | 參數(shù)范圍-180~180褂始；Y軸坐標(biāo)不變诸典，X軸坐標(biāo)延順時(shí)針傾斜ax度 |
| skewY | ay | 參數(shù)范圍-180~180；X軸坐標(biāo)不變崎苗，Y軸坐標(biāo)延順時(shí)針傾斜ay度 |
矩陣變形：
| 方法 | 參數(shù) | 說(shuō)明 |
|---|---|---|
| matrix | (a,b,c,d,tx,ty) | 同 transform-function matrix |
| matrix3d | 同transform-function matrix3d |
動(dòng)畫(huà)隊(duì)列
調(diào)用動(dòng)畫(huà)操作方法后要調(diào)用 step() 來(lái)表示一組動(dòng)畫(huà)完成狐粱，可以在一組動(dòng)畫(huà)中調(diào)用任意多個(gè)動(dòng)畫(huà)方法，一組動(dòng)畫(huà)中的所有動(dòng)畫(huà)會(huì)同時(shí)開(kāi)始胆数，一組動(dòng)畫(huà)完成后才會(huì)進(jìn)行下一組動(dòng)畫(huà)肌蜻。step 可以傳入一個(gè)跟 uni.createAnimation() 一樣的配置參數(shù)用于指定當(dāng)前組動(dòng)畫(huà)的配置。
示例代碼
<view :animation="animationData" style="background:red;height:100rpx;width:100rpx"></view>
export default{
data: {
animationData: {}
},
onShow: function(){
var animation = uni.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation = animation
animation.scale(2,2).rotate(45).step()
this.animationData = animation.export()
setTimeout(function() {
animation.translate(30).step()
this.animationData = animation.export()
}.bind(this), 1000)
},
methods:{
rotateAndScale: function () {
// 旋轉(zhuǎn)同時(shí)放大
this.animation.rotate(45).scale(2, 2).step()
this.animationData = this.animation.export()
},
rotateThenScale: function () {
// 先旋轉(zhuǎn)后放大
this.animation.rotate(45).step()
this.animation.scale(2, 2).step()
this.animationData = this.animation.export()
},
rotateAndScaleThenTranslate: function () {
// 先旋轉(zhuǎn)同時(shí)放大必尼，然后平移
this.animation.rotate(45).scale(2, 2).step()
this.animation.translate(100, 100).step({ duration: 1000 })
this.animationData = this.animation.export()
}
}
}
參考鏈接：uni-app 官方文檔
