小程序动画和css

一、css动画

动画过程中,可以使用 bindtransitionend bindanimationstart bindanimationiteration bindanimationend 来监听动画事件。

事件名 含义
transitionend CSS 渐变结束或 wx.createAnimation 结束一个阶段
animationstart CSS 动画开始
animationiteration CSS 动画结束一个阶段
animationend CSS 动画结束

二、关键帧动画

从小程序基础库 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


    





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

你可能感兴趣的:(小程序动画和css)