建站
咨詢
售后
建站咨詢
新聞中心
wx.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屬性。
10年積累的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有婁星免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
注意:export方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫操作
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 = wx.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 | 長度值，如果傳入 Number 則默認(rèn)使用 px，可傳入其他自定義單位的長度值 |
| height | length | 長度值，如果傳入 Number 則默認(rèn)使用 px，可傳入其他自定義單位的長度值 |
| top | length | 長度值，如果傳入 Number 則默認(rèn)使用 px，可傳入其他自定義單位的長度值 |
| left | length | 長度值，如果傳入 Number 則默認(rèn)使用 px，可傳入其他自定義單位的長度值 |
| bottom | length | 長度值，如果傳入 Number 則默認(rèn)使用 px，可傳入其他自定義單位的長度值 |
| right | length | 長度值，如果傳入 Number 則默認(rèn)使用 px，可傳入其他自定義單位的長度值 |
旋轉(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è)跟wx.createAnimation()一樣的配置參數(shù)用于指定當(dāng)前組動(dòng)畫的配置。
示例：
Page({
data:{
animationData:{}
},
onShow:function(){
var animation = wx.createAnimation({
duration:1000,
timingFunction:"ease",
})
this.animation = animation
animation.scale(2,2).rotate(45).step();
this.setData({
animationData:animation.export()
})
setTimeout(function(){
animation.translate(30).step();
this.setData({
animationData:animation.export()
})
}.bind(this),1000)
},
rotateAndScale: function () {
// 旋轉(zhuǎn)同時(shí)放大
this.animation.rotate(45).scale(2, 2).step()
this.setData({
animationData:animation.export()
})
},
rotateThenScale: function () {
// 先旋轉(zhuǎn)后放大
this.animation.rotate(45).step()
this.animation.scale(2, 2).step()
this.setData({
animationData:animation.export()
})
},
rotateAndScaleThenTranslate: function () {
// 先旋轉(zhuǎn)同時(shí)放大，然后平移
this.animation.rotate(45).scale(2, 2).step()
this.animation.translate(100, 100).step({ duration: 1000 })
this.setData({
animationData:animation.export()
})
}
})bug & tip
bug:iOS/Android6.3.30通過 step() 分隔動(dòng)畫，只有第一步動(dòng)畫能生效
文章題目：創(chuàng)新互聯(lián)小程序教程：微信小程序API動(dòng)畫
文章地址：http://m.fisionsoft.com.cn/article/djpiiss.html
