原生小程序开发 API｜界面动画 API 汇总（一）

Animation

动画对象

方法

Object Animation.export()

• 导出动画队列。export 方法每次调用后会清掉之前的动画操作。
• 参数： string value； 颜色值
• 返回值：Object

animationData

属性	类型	说明
actions	Array<object>

Animation Animation.step(Object object)

• 表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。
• 参数： Object object

属性	类型	默认值	必填	说明
duration	number	400	否	动画持续时间，单位 ms
timingFunction	string	'linear'	否	动画的效果
delay	number	0	否	动画延迟时间，单位 ms
transformOrigin	string	'50% 50% 0'	否

timingFunction 的合法值

值	说明	最低版本
'linear'	动画从头到尾的速度是相同的
'ease'	动画以低速开始，然后加快，在结束前变慢
'ease-in'	动画以低速开始
'ease-in-out'	动画以低速开始和结束
'ease-out'	动画以低速结束
'step-start'	动画第一帧就跳至结束状态直到结束
'step-end'	动画一直保持开始状态，最后一帧跳到结束状态

• 返回值：Animation

Animation Animation.matrix()

同 transform-function matrix

• 设置背景色
• 参数： string value； 颜色值
• 返回值：Animation

Animation Animation.matrix3d()

• 同transform-function matrix3d
• 返回值：Animation

Animation Animation.rotate(number angle)

• 从原点顺时针旋转一个角度
• 参数： number angle； 旋转的角度。范围 [-180, 180]
• 返回值：Animation

Animation Animation.rotate3d(number x, number y, number z, number angle)

• 从 固定 轴顺时针旋转一个角度
• 参数：
  • number x; 旋转轴的 x 坐标
  • number y; 旋转轴的 y 坐标
  • number z; 旋转轴的 z 坐标
  • number angle; 旋转的角度。范围 [-180, 180]
• 返回值：Animation

Animation Animation.rotateX(number angle)

• 从 X 轴顺时针旋转一个角度
• 参数： number angle； 旋转的角度。范围 [-180, 180]
• 返回值：Animation

Animation Animation.rotateY(number angle)

• 从 Y 轴顺时针旋转一个角度
• 参数： number angle； 旋转的角度。范围 [-180, 180]
• 返回值：Animation

Animation Animation.rotateZ(number angle)

• 从 Z 轴顺时针旋转一个角度
• 参数： number angle； 旋转的角度。范围 [-180, 180]
• 返回值：Animation

Animation Animation.scale(number sx, number sy)

缩放

• 设置背景色
• 参数： string value； 颜色值
• 返回值：Animation

Animation Animation.scale3d(number sx, number sy, number sz)

• 缩放
• 参数：
  • number sx； x 轴的缩放倍数
  • number sy； y 轴的缩放倍数
  • number sz； z 轴的缩放倍数
• 返回值：Animation

Animation Animation.scaleX(number scale)

• 缩放 X 轴
• 参数： number scale； X 轴的缩放倍数
• 返回值：Animation

Animation Animation.scaleY(number scale)

• 缩放 Y 轴
• 参数： number scale； Y 轴的缩放倍数
• 返回值：Animation

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。 

Animation Animation.scaleZ(number scale)

• 缩放 Z 轴
• 参数： number scale； Z 轴的缩放倍数
• 返回值：Animation

Animation Animation.skew(number ax, number ay)

• 对 X、Y 轴坐标进行倾斜
• 参数：
  • number ax ；对 X 轴坐标倾斜的角度，范围 [-180, 180]
  • number ay ；对 Y 轴坐标倾斜的角度，范围 [-180, 180]
• 返回值：Animation

Animation Animation.skewX(number angle)

• 对 X 轴坐标进行倾斜
• 参数： number angle； 倾斜的角度，范围 [-180, 180]
• 返回值：Animation

Animation Animation.skewY(number angle)

• 对 Y 轴坐标进行倾斜
• 参数： number angle； 倾斜的角度，范围 [-180, 180]
• 返回值：Animation

Animation Animation.translate(number tx, number ty)

• 平移变换
• 参数：
  • number tx; 当仅有该参数时表示在 X 轴偏移 tx，单位 px
  • number ty; 在 Y 轴平移的距离，单位为 px
• 返回值：Animation

Animation Animation.translate3d(number tx, number ty, number tz)

• 对 xyz 坐标进行平移变换
• 参数：
  • number tx; 在 X 轴平移的距离，单位为 px
  • number ty; 在 Y 轴平移的距离，单位为 px
  • number tz; 在 Z 轴平移的距离，单位为 px
• 返回值：Animation

Animation Animation.translateX(number translation)

• 对 X 轴平移
• 参数： number translation； 在 X 轴平移的距离，单位为 px
• 返回值：Animation

Animation Animation.translateY(number translation)

• 对 Y 轴平移
• 参数： number translation； 在 Y 轴平移的距离，单位为 px
• 返回值：Animation

Animation Animation.translateZ(number translation)

• 对 Z 轴平移
• 参数： number translation； 在 Z 轴平移的距离，单位为 px
• 返回值：Animation

Animation Animation.opacity(number value)

• 设置透明度
• 参数： number value； 透明度，范围 0-1
• 返回值：Animation

Animation Animation.backgroundColor(string value)

• 设置背景色
• 参数： string value； 颜色值
• 返回值：Animation

Animation Animation.width(number value)

• 设置宽度
• 参数： number value； 长度值
• 返回值：Animation

Animation Animation.height(number value)

• 设置高度
• 参数： number value； 长度值
• 返回值：Animation

Animation Animation.left(number value)

• 设置 left 值
• 参数： number value； 长度值
• 返回值：Animation

Animation Animation.right(number value)

• 设置 right 值
• 参数： number value； 长度值
• 返回值：Animation

Animation Animation.top(number value)

• 设置 top 值
• 参数： number value； 长度值
• 返回值：Animation

Animation Animation.bottom(number value)

• 设置 bottom 值
• 参数： number value； 长度值
• 返回值：Animation

示例代码

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

Page({
  data: {
    animationData: {},
  },
  onShow: function () {
    var animation = ty.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 () {
    // 旋转同时放大
    this.animation.rotate(45).scale(2, 2).step();
    this.setData({
      animationData: this.animation.export(),
    });
  },
  rotateThenScale: function () {
    // 先旋转后放大
    this.animation.rotate(45).step();
    this.animation.scale(2, 2).step();
    this.setData({
      animationData: this.animation.export(),
    });
  },
  rotateAndScaleThenTranslate: function () {
    // 先旋转同时放大，然后平移
    this.animation.rotate(45).scale(2, 2).step();
    this.animation.translate(100, 100).step({ duration: 1000 });
    this.setData({
      animationData: this.animation.export(),
    });
  },
});

 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。