本文整理自网络，侵删。

动画

界面动画的常见方式

在小程序中，通常可以使用 CSS 渐变和 CSS 动画来创建简易的界面动画。

动画过程中，可以使用 bindtransitionend bindanimationstart bindanimationiteration bindanimationend 来监听动画事件。

事件名	含义
transitionend	CSS 渐变结束或 wx.createAnimation 结束一个阶段
animationstart	CSS 动画开始
animationiteration	CSS 动画结束一个阶段
animationend	CSS 动画结束

注意：这几个事件都不是冒泡事件，需要绑定在真正发生了动画的节点上才会生效。

同时，还可以使用 wx.createAnimation 接口来动态创建简易的动画效果。（新版小程序基础库中推荐使用下述的关键帧动画接口代替。）

关键帧动画

基础库 2.9.0 开始支持，低版本需做兼容处理。

从小程序基础库 2.9.0 开始支持一种更友好的动画创建方式，用于代替旧的 wx.createAnimation 。它具有更好的性能和更可控的接口。

在页面或自定义组件中，当需要进行关键帧动画时，可以使用 this.animate 接口：

this.animate(selector, keyframes, duration, callback)

参数说明

属性	类型	必填	说明
selector	String	是	选择器（同 SelectorQuery.select 的选择器格式）
keyframes	Array	是	关键帧信息
duration	Number	是	动画持续时长（毫秒为单位）
callback	function	否	动画完成后的回调函数

keyframes 中对象的结构

属性	类型	默认值	必填	说明
offset	Number		否	关键帧的偏移，范围[0-1]
ease	String	linear	否	动画缓动函数
transformOrigin	String	否	基点位置，即 CSS transform-origin
backgroundColor	String		否	背景颜色，即 CSS background-color
bottom	Number/String		否	底边位置，即 CSS bottom
height	Number/String		否	高度，即 CSS height
left	Number/String		否	左边位置，即 CSS left
width	Number/String		否	宽度，即 CSS width
opacity	Number		否	不透明度，即 CSS opacity
right	Number		否	右边位置，即 CSS right
top	Number/String		否	顶边位置，即 CSS top
matrix	Array		否	变换矩阵，即 CSS transform matrix
matrix3d	Array		否	三维变换矩阵，即 CSS transform matrix3d
rotate	Number		否	旋转，即 CSS transform rotate
rotate3d	Array		否	三维旋转，即 CSS transform rotate3d
rotateX	Number		否	X 方向旋转，即 CSS transform rotateX
rotateY	Number		否	Y 方向旋转，即 CSS transform rotateY
rotateZ	Number		否	Z 方向旋转，即 CSS transform rotateZ
scale	Array		否	缩放，即 CSS transform scale
scale3d	Array		否	三维缩放，即 CSS transform scale3d
scaleX	Number		否	X 方向缩放，即 CSS transform scaleX
scaleY	Number		否	Y 方向缩放，即 CSS transform scaleY
scaleZ	Number		否	Z 方向缩放，即 CSS transform scaleZ
skew	Array		否	倾斜，即 CSS transform skew
skewX	Number		否	X 方向倾斜，即 CSS transform skewX
skewY	Number		否	Y 方向倾斜，即 CSS transform skewY
translate	Array		否	位移，即 CSS transform translate
translate3d	Array		否	三维位移，即 CSS transform translate3d
translateX	Number		否	X 方向位移，即 CSS transform translateX
translateY	Number		否	Y 方向位移，即 CSS transform translateY
translateZ	Number		否	Z 方向位移，即 CSS transform translateZ

示例代码

在开发者工具中预览效果


  this.animate('#container', [
    { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
    { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'},
    { opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' },
    ], 5000, function () {
      this.clearAnimation('#container', { opacity: true, rotate: true }, function () {
        console.log("清除了#container上的opacity和rotate属性")
      })
  }.bind(this))

  this.animate('.block', [
    { scale: [1, 1], rotate: 0, ease: 'ease-out'  },
    { scale: [1.5, 1.5], rotate: 45, ease: 'ease-in', offset: 0.9},
    { scale: [2, 2], rotate: 90 },
  ], 5000, function () {
    this.clearAnimation('.block', function () {
      console.log("清除了.block上的所有动画属性")
    })
  }.bind(this))

调用 animate API 后会在节点上新增一些样式属性覆盖掉原有的对应样式。如果需要清除这些样式，可在该节点上的动画全部执行完毕后使用 this.clearAnimation 清除这些属性。

this.clearAnimation(selector, options, callback)

参数说明

属性	类型	必填	说明
selector	String	是	选择器（同 SelectorQuery.select 的选择器格式）
options	Object	否	需要清除的属性，不填写则全部清除
callback	Function	否	清除完成后的回调函数