小程序中的Animation动画

最新推荐文章于 2025-07-07 19:48:32 发布

原创最新推荐文章于 2025-07-07 19:48:32 发布 · 4.5k 阅读

2 ·

CC 4.0 BY-SA版权

小程序同时被 2 个专栏收录

35 篇文章

订阅专栏

动画

1 篇文章

订阅专栏

本文介绍了小程序中实现动画的三步方法：绑定animation属性、创建动画对象并描述效果、使用setData更新动画对象。通过示例详细讲解了如何利用step()方法进行样式、旋转、缩放等动画描述，实现元素的平移与旋转效果。

小程序动画三步走

在需要动画效果的元素上给animation属性绑定一个变量，假设是textLeftAnimation
在需要的时机调用api创建动画对象并描述动画效果
利用this.setData() 将动画对象.export() 方法赋值到textLeftAnimation变量中。

例：

1.在元素中的属性animation中绑定对象变量，即用代码如下表示

<view style="width:100px;height:100px" animation="{{textLeftAnimation}}"></view>

2.新建animation
3.添加相关动画方法来描述动画，目前的动画方法分类有
- 样式
- 旋转
- 缩放
- 偏移
- 倾斜
- 矩阵变形

拿样式分类方法来做示例：

 // 初始化
    let animationLeft = wx.createAnimation({
      duration:2000,
      timingFunction:'ease-out',
      delay:0
    })
    // 链式操作添加相关动画方法
    // 样式分类方法中，默认的长度单位是 px，需要用rpx、em、%等其他度量单位时，需要传入单位符号
    animationLeft.backgroundColor('green').left(50).step()
    // animationLeft.backgroundColor('green').left('100rpx').step() //如这样
    this.setData({
      textLeftAnimation:animationLeft.export()
    })

小程序动画描述step()
1.小程序的动画是按 step() 来描述的，例如你想让某个元素平移之后旋转啥的，就可以利用多次step()

	/**
	* 例如这样
	*/
    animationLeft.left(100).step()
    animationLeft.rotate(90).step();

2.将left()和rotate()写在同一个step()里时，会在平移的时候同时旋转，如下代码

animationLeft.left(100).rotate(90).step()