bilibili小程序

使用小贴士

bl.createAnimation

基础库版本 3.34.0 开始支持，且只支持在cover-*组件中添加animation属性生效，cover-view、cover-image、cover-input、cover-textarea、cover-label、cover-button、cover-svga。

创建一个动画实例 animation 。

参数

Object object

object 参数说明

属性名类型必填默认值说明
durationnumber否400动画持续时间（单位：ms）
timingFunctionstring否'linear'定义动画的效果
delaynumber否0动画延迟时间（单位：ms）
transformOriginstring否'50% 50% 0'动画原点位置（比如旋转的中心点）

timingFunction 有效值

值说明
linear以相同速度开始至结束
ease慢速开始，然后变快，然后慢速结束
ease-in慢速开始的过渡效果
ease-in-out动画以低速开始和结束
ease-out动画以低速结束
step-start动画第一帧就跳至结束状态直到结束，仅 iOS 支持
step-end动画一直保持开始状态，最后一帧跳到结束状态，仅 iOS 支持

返回值

Animation

示例代码

<template>
    <div class="animation-element-wrapper">
        <cover-view :animation="animationData">
            <cover-label>测试</cover-label>
        </cover-view>
    </div>
</template>
<script>
export default {
    data() {
        return{
            animationData: '',
            animation: null
        }
    },
    onLoad() {
        this.animation = bl.createAnimation({
            transformOrigin: '50% 50%',
            duration: 1000,
            timingFunction: 'ease',
            delay: 0
        });
    },
    methods: {
        setAnimationExport: function() {
            // 动画队列
            const ani = bl.createAnimation();
            ani.rotate(90).translateY(10).step();
            ani.rotate(-90).translateY(-10).step();
            this.animationData = ani.export();
        },
        setAnimationStyle: function() {
            // 动画样式设置
            this.animation.rotate(0)
                .scale(1)
                .translate(0, 0)
                .skew(0, 0)
                .width("70px")
                .height("70px")
                .backgroundColor("#2B99FF")
                .opacity(1)
                .step({
                    duration: 0
                });
            this.animationData = this.animation.export();
        }
    }
}
</script>
← bl.getSelectedTextRangeAnimation →