一 概述
wx.createAnimation创建Animation动画实例wx.createAnimation时，参数的常用属性动画常见动作动画执行完成之后导出动画队列(export)
二 wx.createAnimation创建Animation动画实例
2.1 默认的
this.animation = wx.createAnimation()
2.2 自己指定参数
this.animation=wx.createAnimation({
duration: 1000,
timingFunction: 'ease'
})
2.3 说明(this.animation)
this.animation：布局文件中，需要执行动画操作的对象
三 wx.createAnimation时，参数的常用属性
属性类型说明durationnumber动画持续时间，单位 mstimingFunctionstring动画的效果delaynumber动画延迟时间，单位 mstransformOriginstring
timingFunction(动画效果)
属性说明‘linear’动画从头到尾的速度是相同的‘ease’动画以低速开始，然后加快，在结束前变慢‘ease-in’动画以低速开始‘ease-in-out’动画以低速开始和结束‘ease-out’动画以低速结束‘step-start’动画第一帧就跳至结束状态直到结束‘step-end’动画一直保持开始状态，最后一帧跳到结束状态
四 动画常见动作
Animation.opacity：透明动画Animation.rotate：选择动画Animation.scale：缩放动画Animation.skew：倾斜动画Animation.translate：平移动画
五 动画执行过程
this.animation = wx.createAnimation()：执行动画赋值动画动作(透明、旋转、缩放等)this.animation…step()：表示一组动画完成this.animation.export()：导出动画队列。export 方法每次调用后会清掉之前的动画操作
六 示例
6.1 布局文件(index.wxml)
6.2 样式文件(index.wxss)
.anim-pic {
width: 300rpx;
height: 300rpx;
margin: 40rpx auto;
}
.anim-pic image{
width: 300rpx;
height: 300rpx;
}
.anim-btns button{
border: 1px solid orange;
}
6.3 逻辑文件(index.js)
Page({
onReady: function () {
this.animated=wx.createAnimation({
duration: 1000,
timingFunction: 'ease'
})
},
rotate: function () {
this.animated.rotate(Math.random()*720-360).step()
this.setData({
animated:this.animated.export()
})
}
})
6.4 效果图
七 参考
小程序官方文档—Animation