小程序的动画和css的动画区别:
还原时需要手动清除动画过程添加的参数
1、过渡动画
wx.createAnimation 新版小程序基础库中推荐使用this.animate接口代替,使用方式和this.animate相似
通过该接口,只能使用这些提供好的属性,不能使用额外的css属性!
this.animate('选择器',[{
offset:0, 当前动画的占比,0-1
offset
ease linear
transformOrigin
backgroundColor
bottom:Number|String
height
left
width
opacity
right
top
matrix
matrix3d
rotate
rotate3d
rotateX
rotateY
rotateZ
scale:[x方向缩放,y方向缩放]
scale3d
scaleX
scaleY
scaleZ
skew
skewX
skewY
translate
translate3d
translateX
translateY
translateZ
},{
offset:0.5 当前动画的占比时间
...可设置多个动画帧
}],过渡时间,function(){
动画结束回调,回调中注意绑定this
}.bind(this))
2、滚动过程动画
滚动过程和this.animate不同,滚动过程设置的属性可以是this.animate提供的属性以外的css属性,使用驼峰命名
this.animate('选择器,只支持选择scroll-view中的元素',[{
除了支持this.animate中的配置外,还支持驼峰命名的其他css属性
borderRadius: '25%',
borderColor: 'blue',
transform: 'scale(.65) translateY(-20px)',
},{...}], 动画时间, {
scrollSource 指定滚动元素的选择器(只支持scroll-view),该元素滚动时会驱动动画的进度
orientation 指定滚动的方向,效值为"horizontal"|"vertical"
startScrollOffset n,指定开始驱动动画进度的滚动偏移量,单位px
endScrollOffset n,指定停止驱动动画进度的滚动偏移量,单位px
timeRange 起始和结束的滚动范围映射的时间长度,该时间可用于与关键帧动画里的时间(duration)相匹配,单位ms
当设置了滚动动画后,duration等已经失效,动画只和滚动距离有关
当timeRange=动画时间,则抵达endScrollOffset时结束动画
当timeRange>动画时间,则抵达endScrollOffset之前结束动画
当timeRange<动画时间,则抵达endScrollOffset之后也不会到动画的最后一帧
})
3、css方式
通过css来设置动画,如果setData过多,会造成小程序僵死
优化:通过wxs来绑定事件等产生动画,在视图层处理,避免与逻辑层交互
4、监听动画
transitionend CSS 渐变结束或wx.createAnimation结束一个阶段
animationstart CSS 动画开始
animationiteration CSS 动画结束一个阶段
animationend CSS 动画结束
这几个事件都不是冒泡事件,需要绑定在真正发生了动画的节点上才会生效。
使用时:bindtransitionend
5、清除动画
调用animate API后会在节点上新增一些样式属性覆盖掉原有的对应样式。
如果需要清除这些样式,可在该节点上的动画全部执行完毕后使用this.clearAnimation清除这些属性。
this.clearAnimation('选择器',{
要清除的属性,不写全部清除
opacity: true,
rotate: true,
...
}, function(){
清除完成后的回调函数
})
代码实例:
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('.avatar', [{
borderRadius: '0',
borderColor: 'red',
transform: 'scale(1) translateY(-20px)',
offset: 0,
}, {
borderRadius: '25%',
borderColor: 'blue',
transform: 'scale(.65) translateY(-20px)',
offset: .5,
}, {
borderRadius: '50%',
borderColor: 'blue',
transform: `scale(.3) translateY(-20px)`,
offset: 1
}], 2000, {
scrollSource: '#scroller',
timeRange: 2000,
startScrollOffset: 0,
endScrollOffset: 85,
})