公司小程序項目比較多，最近正好有時間看一下小程序的動畫，同時記錄一下我的學(xué)習(xí)過程；看到這個文章的，我建議你直接去小程序后臺：https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html

1、使用

// wxml 代碼
<view animation="{{move}}">小程序動畫</view>

//js
onLoad() {
    this.load()
},
load(){
//初始化
  let move = wx.createAnimation({
    duration:1000, 
    timingFunction:"ease-in-out"
  })
  move.backgroundColor("#ccc").translateY(100).rotate(360).step()
  this.setData({move:move.export()})
},

duration：持續(xù)時間
timingFunction：動畫效果
delay：延遲時間
transformOrigin：動畫原點(diǎn)

2、相關(guān)方法

1、backgroundColor() :設(shè)置背景色（“red”）；
2、bottom()：設(shè)置 bottom 的值，傳入 number 則默認(rèn)使用 px；
3、left()：設(shè)置 left 的值；
4、right()：設(shè)置 right 的值；
5、top()：設(shè)置 top 的值；
6、width()：設(shè)置 width 的值；
7、height()：設(shè)置 height 的值；
8、opacity()：設(shè)置透明度（0-1）；

1、rotate()：旋轉(zhuǎn)，選擇角度范圍 [-180, 180]；
2、rotateX()：從 X 軸順時針旋轉(zhuǎn)一個角度；
3、rotateY()：從 Y 軸順時針旋轉(zhuǎn)一個角度；
4、rotateZ()：從 Z 軸順時針旋轉(zhuǎn)一個角度；
5、rotate3d()：上面三個的縮寫（x，y，z，angle）；
6、scale()：縮放（x，y）；
7、scaleX()：X 軸的縮放倍數(shù)；
8、scaleY()：Y 軸的縮放倍數(shù)；
9、scaleZ()：Z 軸的縮放倍數(shù)；
10、scale3d()：上面三個的縮寫（x，y，z）；
11、transkate()：平移；
12、transkateX()：在 X 軸平移的距離，單位為 px；
13、transkateY()：在 Y軸平移的距離，單位為 px；
14、transkateZ()：在 Z 軸平移的距離，單位為 px；
15、transkate3d()：上面三個的縮寫（x，y，z） [-180, 180]；
16、skew()：對 X、Y 軸坐標(biāo)進(jìn)行傾斜（x，y）；
17、skewX()：對 X 軸坐標(biāo)進(jìn)行傾斜；
18、skewY()：對 Y 軸坐標(biāo)進(jìn)行傾斜；

1、export()：導(dǎo)出動畫隊列；export 方法每次調(diào)用后會清掉之前的動畫操作；
2、step()：表示一組動畫完成?？梢栽谝唤M動畫中調(diào)用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進(jìn)行下一組動畫；類似 wx.createAnimation；

matrix 和 matrix3d 可以參考：https://blog.csdn.net/weixin_43867717/article/details/122036846文章來源地址http://www.zghlxwxcb.cn/news/detail-641271.html

load(){
    let move = wx.createAnimation({
      duration:1000,
      timingFunction:"ease-in-out"
    })
    move.left(200).scale(1).skew(30,0).step({
      duration:500,
      timingFunction:"ease"
    })
    move.scale(0.7).skew(0,0).step({
      duration:500,
      timingFunction:"ease"
    })
    this.setData({move:move.export()})
  },

到了這里，關(guān)于小程序動畫 animation 的常規(guī)使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！