微信小程序不仅仅是为了快速开发一个能用的小应用，有时为了更好的用户体验，还需要添加一些动画效果，动画效果除了使用 web 端那套 css 动画之外，微信还专门给我们提供了专门的动画 api，这样能让我们的动画过渡更流畅，因此比较推荐(css动画过渡也能用，但流畅度肯定是不如小程序提供的 api 的)
前面编写的 css动画、过渡、变换、常用函数等介绍
小程序编写动画也很简单，只需要 设置一个 animation 参数，就可以直接通过更新 animation 来实现动画了，如下所示
// WXML中定义元素
<view class="box" animation="{{animationData}}"></view>
// JS中定义动画效果
Page({
data: {
animationData: {}
},
onReady: function() {
// 创建动画实例
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease', //过渡曲线
delay: 0, //表示延迟时间ms
})
// 执行平移动画，step()表示一组动画完成
animation.translate(100, 100).step()
//animation.translateX(100).step() //只平移x
//执行缩放动画
//animation.scale(2, 2).step()
animation.translateX(100).scaleX(2).step() //
// 更新元素的动画效果
this.setData({
animationData: animation.export()
})
}
})
| timingFunction合法值 | 说明 |
|---|---|
| 'linear' | 动画从头到尾的速度是相同的 |
| 'ease' | 动画以低速开始，然后加快，在结束前变慢 |
| 'ease-in' | 动画以低速开始 |
| 'ease-in-out' | 动画以低速开始和结束 |
| 'ease-out' | 动画以低速结束 |
| 'step-start' | 动画第一帧就跳至结束状态直到结束 |
| 'step-end' | 动画一直保持开始状态，最后一帧跳到结束状态 |
step 结束表示一组动画完成，也同时意味着可以一次性设置多种变换，形成动画组
export 表示每次调用后会清掉之前的动画操作
其方法主要是 平移(translate)、缩放(rotate)、旋转(scale)、倾斜(skew)、透明度(opacity)，也支持单个轴反向的，例如：平移 translateX
同时还额外支持设置 background-color、width、height、top、left、bottom、right 参数 ，注意仍然不支持 background-image
