动画界面动画的常见方式在小程序中，通常可以使用 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 |
| 