动画

my.createAnimation

说明

mPaaS 10.1.32 及以上版本支持该接口。

该接口用于创建动画实例 animation。调用实例的方法来描述动画,最后通过动画实例的 export 方法将动画数据导出并传递给组件的 animation 属性。

注意

export 方法调用后会清掉之前的动画操作。

入参

参数

类型

必填

说明

duration

Integer

动画的持续时间,单位 ms,默认值为 400

timeFunction

String

定义动画的效果,默认值为 linear,有效值为 lineareaseease-inease-in-outease-outstep-startstep-end

delay

Integer

动画延迟时间,单位 ms,默认值为 0

transformOrigin

String

设置 transform-origin,默认值为 50% 50% 0

const animation = my.createAnimation({
  transformOrigin: "top right",
  duration: 3000,
  timeFunction: "ease-in-out",
  delay: 100,
})

animation

动画实例可以调用以下方法来描述动画,调用结束后会返回实例本身,支持链式调用的写法。

view 的 animation 属性初始化为 {} 时,在基础库 1.11.0 以下版本(不包含 1.11.0)会报错,建议初始化为 null

样式

方法

参数

说明

opacity

value

透明度,参数范围为 0~1

backgroundColor

color

颜色值。

width

length

设置宽度:长度值,单位为 px,例如:300 px。

height

length

设置高度:长度值,单位为 px,例如:300 px。

top

length

设置 top 值:长度值,单位为 px,例如:300 px。

left

length

设置 left 值:长度值,单位为 px,例如:300 px。

bottom

length

设置 bottom 值:长度值,单位为 px,例如:300 px。

right

length

设置 right 值:长度值,单位为 px,例如:300 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;两个参数时,表示在 X 轴偏移 tx,在 Y 轴偏移 ty,单位均为 px。

translateX

tx

在 X 轴偏移 tx,单位为 px。

translateY

ty

在 Y 轴偏移 ty,单位为 px。

translateZ

tz

在 Z 轴偏移 tz,单位为 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(英文)

matrix3d

(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

transform-function matrix3d(英文)

动画队列

调用动画操作方法后需要要调用 step() 来表示一组动画完成。在一组动画中可以调用任意多个动画方法,一组动画中的所有动画会同时开始,当一组动画完成后才会进行下一组动画。step() 可以传入一个跟 my.createAnimation() 一样的配置参数用于指定当前组动画的配置。

代码示例

axml 文件中添加如下代码:

<view animation="{{animationInfo}}" style="background:yellow;height:100rpx;width:100rpx"></view>

js 文件中添加如下代码:

Page({
  data: {
    animationInfo: {}
  },
  onShow(){
    var animation = my.createAnimation({
      duration: 1000,
        timeFunction: 'ease-in-out',
    });

    this.animation = animation;

    animation.scale(3,3).rotate(60).step();

    this.setData({
      animationInfo:animation.export()
    });

    setTimeout(function() {
      animation.translate(35).step();
      this.setData({
        animationInfo:animation.export(),
      });
    }.bind(this), 1500);
  },
  rotateAndScale () {
    // 旋转同时放大
    this.animation.rotate(60).scale(3, 3).step();
    this.setData({
      animationInfo: this.animation.export(),
    });
  },
  rotateThenScale () {
    // 先旋转后放大
    this.animation.rotate(60).step();
    this.animation.scale(3, 3).step();
    this.setData({
      animationInfo: this.animation.export(),
    });
  },
  rotateAndScaleThenTranslate () {
    // 先旋转同时放大,然后平移
    this.animation.rotate(60).scale(3, 3).step();
    this.animation.translate(100, 100).step({ duration: 2000 });
    this.setData({
      animationInfo: this.animation.export()
    });
  }
})
阿里云首页 移动开发平台 mPaaS 相关技术圈