小程序開發中animation怎么使用

發布時間：2022-03-14 10:06:44 來源：億速云閱讀：201 作者：iii 欄目：開發技術

這篇文章主要介紹“小程序開發中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怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站