小程序动画 animation 的常规使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序动画 animation 的常规使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

公司小程序项目比较多，最近正好有时间看一下小程序的动画，同时记录一下我的学习过程；看到这个文章的，我建议你直接去小程序后台：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：持续时间
timingFunction：动画效果
delay：延迟时间
transformOrigin：动画原点

2、相关方法

1、backgroundColor() :设置背景色（“red”）；
2、bottom()：设置 bottom 的值，传入 number 则默认使用 px；
3、left()：设置 left 的值；
4、right()：设置 right 的值；
5、top()：设置 top 的值；
6、width()：设置 width 的值；
7、height()：设置 height 的值；
8、opacity()：设置透明度（0-1）；

1、rotate()：旋转，选择角度范围 [-180, 180]；
2、rotateX()：从 X 轴顺时针旋转一个角度；
3、rotateY()：从 Y 轴顺时针旋转一个角度；
4、rotateZ()：从 Z 轴顺时针旋转一个角度；
5、rotate3d()：上面三个的缩写（x，y，z，angle）；
6、scale()：缩放（x，y）；
7、scaleX()：X 轴的缩放倍数；
8、scaleY()：Y 轴的缩放倍数；
9、scaleZ()：Z 轴的缩放倍数；
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 轴坐标进行倾斜（x，y）；
17、skewX()：对 X 轴坐标进行倾斜；
18、skewY()：对 Y 轴坐标进行倾斜；

1、export()：导出动画队列；export 方法每次调用后会清掉之前的动画操作；
2、step()：表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画；类似 wx.createAnimation；

matrix 和 matrix3d 可以参考：https://blog.csdn.net/weixin_43867717/article/details/122036846文章来源地址https://www.toymoban.com/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()})
  },

到了这里，关于小程序动画 animation 的常规使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！