wx.createAnimation(Object object)

创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性

参数

Object object

属性	类型	默认值	必填	说明
duration	number	400	否	动画持续时间，单位 ms
timingFunction	string	‘linear’	否	动画的效果
delay	number	0	否	动画延迟时间，单位 ms
transformOrigin	string	‘50% 50% 0’	否	动画转换的基准值，详见css样式transform-origin

timingFunction 的合法值

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

实例的方法

Object Animation.export()

导出动画队列。export 方法每次调用后会清掉之前的动画操作

export返回字段

值	类型	说明
actions	Array.<Object>	动画数据

Animation Animation.step(Object object)

表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。若传入object则本组动画参数以传入的参数为准

参数

同createAnimation参数

Animation Animation.matrix()

同 transform-function matrix，且所有入参均必传

Animation Animation.matrix3d()

同 transform-function matrix3d，且所有入参均必传

Animation Animation.rotate(number angle)

从原点顺时针旋转一个角度

参数

属性	类型	默认值	必填	说明
angle	number		是	旋转的角度。范围 [-180, 180]

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

从固定轴顺时针旋转一个角度

参数

属性	类型	必填	说明
x	number	是	旋转轴的 x 坐标
y	number	是	旋转轴的 y 坐标
z	number	是	旋转轴的 z 坐标
angle	number	是	旋转的角度。范围 [-180, 180]

Animation Animation.rotateX(number angle)

从 X 轴顺时针旋转一个角度

参数

属性	类型	默认值	必填	说明
angle	number		是	旋转的角度。范围 [-180, 180]

Animation Animation.rotateY(number angle)

从 Y 轴顺时针旋转一个角度

参数

属性	类型	默认值	必填	说明
angle	number		是	旋转的角度。范围 [-180, 180]

Animation Animation.rotateZ(number angle)

从 Z 轴顺时针旋转一个角度

参数

属性	类型	默认值	必填	说明
angle	number		是	旋转的角度。范围 [-180, 180]

Animation Animation.scale(number sx, number sy)

缩放

参数

属性	类型	默认值	必填	说明
sx	number		是	当仅有 sx 参数时，表示在 X 轴、Y 轴同时缩放sx倍数
sy	number		否	在 Y 轴缩放 sy 倍数

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

缩放

参数

属性	类型	必填	说明
sx	number	是	x 轴的缩放倍数
sy	number	是	y 轴的缩放倍数
sz	number	是	z 轴的缩放倍数

Animation Animation.scaleX(number scale)

缩放 X 轴

参数

属性	类型	默认值	必填	说明
scale	number		是	X 轴的缩放倍数

Animation Animation.scaleY(number scale)

缩放 Y 轴

参数

属性	类型	默认值	必填	说明
scale	number		是	Y 轴的缩放倍数

Animation Animation.scaleZ(number scale)

缩放 Z 轴

参数

属性	类型	默认值	必填	说明
scale	number		是	Z 轴的缩放倍数

Animation Animation.skew(number ax, number ay)

对 X、Y 轴坐标进行倾斜

参数

属性	类型	默认值	必填	说明
ax	number		是	对 X 轴坐标倾斜的角度，范围 [-180, 180]
ay	number		是	对 Y 轴坐标倾斜的角度，范围 [-180, 180]

Animation Animation.skewX(number angle)

对 X 轴坐标进行倾斜

参数

属性	类型	默认值	必填	说明
angle	number		是	对 X 轴坐标倾斜的角度，范围 [-180, 180]

Animation Animation.skewY(number angle)

对 Y 轴坐标进行倾斜

参数

属性	类型	默认值	必填	说明
angle	number		是	对 Y 轴坐标倾斜的角度，范围 [-180, 180]

Animation Animation.translate(number tx, number ty)

平移变换

参数

属性	类型	默认值	必填	说明
tx	number		是	当仅有该参数时表示在 X 轴偏移 tx，单位 px
ty	number		否	在 Y 轴平移的距离，单位 px

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

对 xyz 坐标进行平移变换

参数

属性	类型	必填	说明
tx	number	是	在 X 轴平移的距离，单位 px
ty	number	是	在 Y 轴平移的距离，单位 px
tz	number	是	在 Z 轴平移的距离，单位 px

Animation Animation.translateX(number translation)

对 X 轴平移

参数

属性	类型	默认值	必填	说明
translation	number		是	在 X 轴平移的距离，单位为 px

Animation Animation.translateY(number translation)

对 Y 轴平移

参数

属性	类型	默认值	必填	说明
translation	number		是	在 Y 轴平移的距离，单位为 px

Animation Animation.translateZ(number translation)

对 Z 轴平移

参数

属性	类型	默认值	必填	说明
translation	number		是	在 Z 轴平移的距离，单位为 px

Animation Animation.opacity(number value)

设置透明度

参数

属性	类型	默认值	必填	说明
value	number		是	透明度，范围 0-1

Animation Animation.backgroundColor(string value)

设置背景色

参数

属性	类型	默认值	必填	说明
value	string		是	颜色值

Animation Animation.width(number|string value)

设置宽度

参数

属性	类型	默认值	必填	说明
value	number/string		是	长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

Animation Animation.height(number|string value)

设置高度

参数

属性	类型	默认值	必填	说明
value	number/string		是	高度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

Animation Animation.left(number|string value)

设置 left 值

参数

属性	类型	默认值	必填	说明
value	number/string		是	长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

Animation Animation.right(number|string value)

设置 right 值

参数

属性	类型	默认值	必填	说明
value	number/string		是	长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

Animation Animation.top(number|string value)

设置 top 值

参数

属性	类型	默认值	必填	说明
value	number/string		是	长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

Animation Animation.bottom(number|string value)

设置 bottom 值

参数

属性	类型	默认值	必填	说明
value	number/string		是	长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值

示例代码

WXML

<view class="page-body">
  <view class="page-section">
    <view class="animation-element-wrapper">
      <view class="animation-element" animation="{{animationData}}"></view>
    </view>
    <view class="animation-buttons">
      <button class="animation-button" bindtap="background">背景色</button>
      <button class="animation-button" bindtap="opacity">透明度</button>
      <button class="animation-button" bindtap="width">宽度</button>
      <button class="animation-button" bindtap="height">高度</button>
      <button class="animation-button" bindtap="left">左</button>
      <button class="animation-button" bindtap="right">右</button>
      <button class="animation-button" bindtap="top">上</button>
      <button class="animation-button" bindtap="bottom">下</button>
      <button class="animation-button" bindtap="rotate">旋转</button>
      <button class="animation-button" bindtap="scale">缩放</button>
      <button class="animation-button" bindtap="translate">移动</button>
      <button class="animation-button" bindtap="skew">倾斜</button>
      <button class="animation-button" bindtap="rotateAndScale">旋转并缩放</button>
      <button class="animation-button" bindtap="rotateThenScale">旋转后缩放</button>
      <button class="animation-button" bindtap="all">同时展示全部</button>
      <button class="animation-button" bindtap="allInQueue">顺序展示全部</button>
    </view>
  </view>
</view>

JS

Page({
  data: {
    animationData: {}
  },
  onReady: function () {
    this.animation = wx.createAnimation();
  },
  rotate: function () {
    this.animation.rotate(Math.random() * 720 - 360).step();
    this.setData({animationData: this.animation.export()});
  },
  scale: function () {
    this.animation.scale(Math.random() * 2).step();
    this.setData({animationData: this.animation.export()});
  },
  translate: function () {
    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step();
    this.setData({animationData: this.animation.export()});
  },
  skew: function () {
    this.animation.skew(Math.random() * 90, Math.random() * 90).step();
    this.setData({animationData: this.animation.export()});
  },
  rotateAndScale: function () {
    this.animation.rotate(Math.random() * 720 - 360)
        .scale(Math.random() * 2)
        .step();
    this.setData({animationData: this.animation.export()});
  },
  rotateThenScale: function () {
    this.animation.rotate(Math.random() * 720 - 360).step();
    this.animation.scale(Math.random() * 2).step();
    this.setData({animationData: this.animation.export()});
  },
  all: function () {
    this.animation.rotate(Math.random() * 720 - 360)
        .scale(Math.random() * 2)
        .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
        .skew(Math.random() * 90, Math.random() * 90)
        .step();
    this.setData({animationData: this.animation.export()});
  },
  allInQueue: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
        .scale(Math.random() * 2).step()
        .translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
        .skew(Math.random() * 90, Math.random() * 90).step();
    this.setData({animationData: this.animation.export()});
  },
  background: function () {
    this.animation.backgroundColor(`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`).step();
    this.setData({animationData: this.animation.export()});
  },
  opacity: function () {
    this.animation.opacity(Math.random()).step();
    this.setData({animationData: this.animation.export()});
  },
  width: function () {
    this.animation.width(Math.random()*200).step();
    this.setData({animationData: this.animation.export()});
  },
  height: function () {
    this.animation.height(Math.random()*200).step();
    this.setData({animationData: this.animation.export()});
  },
  left: function () {
    this.animation.left(Math.random()*150).step();
    this.setData({animationData: this.animation.export()});
  },
  right: function () {
    this.animation.right(Math.random()*150).step();
    this.setData({animationData: this.animation.export()});
  },
  top: function () {
    this.animation.top(Math.random()*150).step();
    this.setData({animationData: this.animation.export()});
  },
  bottom: function () {
    this.animation.bottom(Math.random()*150).step();
    this.setData({animationData: this.animation.export()});
  },
})

WXSS

.animation-element-wrapper {
  display: flex;
  width: 100%;
  padding-top: 150rpx;
  padding-bottom: 150rpx;
  justify-content: center;
  overflow: hidden;
  background-color: #ffffff;
}
.animation-element {
  width: 200rpx;
  height: 200rpx;
  background-color: #1AAD19;
}
.animation-buttons {
  padding: 30rpx 50rpx 10rpx;
  width: 100%;
  height: 700rpx;
  box-sizing: border-box;
}
.animation-button {
  float: left;
  line-height: 2;
  width: 300rpx;
  margin: 15rpx 12rpx;
}

注意事项

需搭配组件的animation属性使用
left、right、top、bottom对应css的相应属性，一般在position: absolute情况下生效。详情参考https://developer.mozilla.org/en-US/docs/Web/CSS/inset
rotate等变换类的效果只能作用于由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。详情参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
skew、skewX、skewY、skewZ、matrix、matrix3d方法在ios上存在兼容问题，请减少在ios使用上述倾斜动画相关的方法
调用多次step方法，若rotate出现在第二步或后续步骤的情况在ios上存在兼容问题，旋转180度会变为逆时针旋转