uni.createAnimation(OBJECT)
創(chuàng)建一個(gè)動(dòng)畫實(shí)例 animation。調(diào)用實(shí)例的方法來描述動(dòng)畫。最后通過動(dòng)畫實(shí)例的export方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的animation屬性。
平臺(tái)差異說明
| App | H5 | 微信小程序 | 支付寶小程序 | 百度小程序 | 字節(jié)跳動(dòng)小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | HBuilderX 2.0.4+ | √ | √ | √ | √ | √ |
注意:
- export 方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫操作
- nvue 暫不支持
OBJECT參數(shù)說明：
| 參數(shù) | 類型 | 必填 | 默認(rèn)值 | 說明 |
|---|---|---|---|---|
| duration | Integer | 否 | 400 | 動(dòng)畫持續(xù)時(shí)間，單位ms |
| timingFunction | String | 否 | "linear" | 定義動(dòng)畫的效果 |
| delay | Integer | 否 | 0 | 動(dòng)畫延遲時(shí)間，單位 ms |
| transformOrigin | String | 否 | "50% 50% 0" | 設(shè)置transform-origin |
timingFunction 有效值：
| 值 | 說明 |
|---|---|
| linear | 動(dòng)畫從頭到尾的速度是相同的 |
| ease | 動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢 |
| ease-in | 動(dòng)畫以低速開始 |
| ease-in-out | 動(dòng)畫以低速開始和結(jié)束 |
| ease-out | 動(dòng)畫以低速結(jié)束 |
| step-start | 動(dòng)畫第一幀就跳至結(jié)束狀態(tài)直到結(jié)束 |
| step-end | 動(dòng)畫一直保持開始狀態(tài)，最后一幀跳到結(jié)束狀態(tài) |
var animation = uni.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
})
animation
動(dòng)畫實(shí)例可以調(diào)用以下方法來描述動(dòng)畫，調(diào)用結(jié)束后會(huì)返回自身，支持鏈?zhǔn)秸{(diào)用的寫法。
animation 對(duì)象的方法列表：
樣式：
| 方法 | 參數(shù) | 說明 |
|---|---|---|
| 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ù) | 說明 |
|---|---|---|
| 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ù) | 說明 |
|---|---|---|
| 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ù) | 說明 |
|---|---|---|
| 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ù) | 說明 |
|---|---|---|
| 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ù) | 說明 |
|---|---|---|
| matrix | (a,b,c,d,tx,ty) | 同 transform-function matrix |
| matrix3d | 同transform-function matrix3d |
動(dòng)畫隊(duì)列
調(diào)用動(dòng)畫操作方法后要調(diào)用 step() 來表示一組動(dòng)畫完成，可以在一組動(dòng)畫中調(diào)用任意多個(gè)動(dòng)畫方法，一組動(dòng)畫中的所有動(dòng)畫會(huì)同時(shí)開始，一組動(dòng)畫完成后才會(huì)進(jìn)行下一組動(dòng)畫。step 可以傳入一個(gè)跟 uni.createAnimation() 一樣的配置參數(shù)用于指定當(dāng)前組動(dòng)畫的配置。
示例代碼
<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 官方文檔
