小程序动画和css

一、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()
        });
    }
});