一、css动画
动画过程中，可以使用 bindtransitionend bindanimationstart bindanimationiteration bindanimationend 来监听动画事件。
| 事件名 | 含义 |
|---|---|
| transitionend | CSS 渐变结束或 wx.createAnimation 结束一个阶段 |
| animationstart | CSS 动画开始 |
| animationiteration | CSS 动画结束一个阶段 |
| animationend | CSS 动画结束 |
<view class="box {{extraClasses}}"
bindtransitionend="transitionEnd" // CSS 渐变结束或 [wx.createAnimation]调用
bindanimationstart="animationStart"
bindanimationiteration="animationIteration"/>
二、关键帧动画
从小程序基础库 2.9.0 支持this.animate更友好的动画创建代替旧的 wx.createAnimation ,它具有更好的性能和更可控的接口
官方api
1、小程序动画api - this.animate
2、小程序动画api - wx.createAnimation
参考:
1、css3与api实现方式
2、【小程序动画合集】10种小程序动画效果实现方法
小程序的动画和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(){
清除完成后的回调函数
})
————————————————
版权声明：本文为CSDN博主「神奇大叔」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43294560/article/details/120971317
demo
一、使用wx.createAnimation
<view class="animation_ll">
<view class="animation_view" animation="{{animationData}}"></view>
</view>
<button class="btn" bindtap="rotateAndScaleThenTranslate">先旋转同时放大，然后平移</button>
<button class="btn" bindtap="rotateAndScale">旋转同时放大</button>
<button class="btn" bindtap="rotateThenScale">先旋转后放大</button>
<button class="btn" bindtap="reset">还原</button>
Page({
onShow() {
this.animation = wx.createAnimation({
duration: 1000, // 动画持续时间，单位 ms
timingFunction: 'linear', // 动画的效果, linear动画从头到尾的速度是相同的
delay: 0, // 动画延迟时间，单位 ms
});
},
/**
* 先旋转同时放大，然后平移
*/
rotateAndScaleThenTranslate() {
// 先旋转同时放大，然后平移
this.animation.rotate(45).scale(2, 2).step();
this.animation.translate(100, 100).step({ duration: 1000 });
this.setData({
animationData: this.animation.export()
});
},
/**
* 旋转同时放大
*/
rotateAndScale() {
this.animation.rotate(45).scale(2, 2).step();
this.setData({
animationData: this.animation.export()
});
},
/**
* 先旋转后放大
*/
rotateThenScale() {
this.animation.rotate(45).step();
this.animation.scale(2, 2).step();
this.setData({
animationData: this.animation.export()
});
},
/**
* 重置
*/
reset() {
this.animation.rotate(0, 0)
.scale(1)
.translate(0, 0)
.skew(0, 0)
.step({ duration: 0 });
this.setData({
animationData: this.animation.export()
});
}
});
.animation_ll {
display: flex;
justify-content: center;
align-items: center;
margin: 250rpx 0;
}
.animation_view {
width: 200rpx;
height: 200rpx;
background-color: #1AAD19;
}
.btn {
background: deepskyblue;
color: #ffffff;
height: 80rpx;
width: 500rpx;
padding: 0 20rpx;
font-size: 30rpx;
line-height: 80rpx;
margin-top: 30rpx;
}
二、使用this.animate
Page({
clickAnimate() {
this.animate('#container', [
{ opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
{ opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },
{ opacity: 0.1, rotate: 80, backgroundColor: '#007dff' },
], 2000, function () {
this.clearAnimation('#container', { opacity: true, rotate: true }, function () {
console.log('清除了#container上的 opacity 和rotate属性');
});
}.bind(this));
},
/**
* 重置
*/
reset() {
this.animation.rotate(0, 0)
.scale(1)
.translate(0, 0)
.skew(0, 0)
.step({ duration: 0 });
this.setData({
animationData: this.animation.export()
});
}
});
