@douyinfe/semi-animation

提供基本的JS动画引擎:

• 根据内插模拟动画变化,性能更自然
• 支持界定各种放松功能
• 提供完整的生命周期钩和操作方法,允许开发者自由控制动画

安装

npm install @douyinfe/semi-animation

使用量

动画

semi-animation 提供名为 Animation . 它拥有完整的生命周期钩和控制方法,以支持音频和视频等操作动画.

• 用于联署材料

import { Animation } from '@douyinfe/semi-animation';

const div = document.createElement('span');
div.style.display = 'inline-block';
document.body.appendChild(div);

const animation = new Animation({
    from: { value: 0 },
    to: { value: 1 },
});

animation.on('frame', props => {
    const num = props.value.toFixed(2);
    div.style.transform = `scale(${num})`;
    div.innerText = num;
});

• 在反应中使用

import { Animation } from '@douyinfe/semi-animation';
import { Component } from 'react';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { value: 0 };

        this.animation = new Animation({
            from: { value: 0 },
            to: { value: 1 },
        });

        this.animation.on('frame', props => {
            this.setState({ value: props.value.toFixed(2) });
        });
    }

    componentDidMount() {
        this.animation.start();
    }

    componentWillUnmount() {
        this.animation.destroy();
    }

    render() {
        const { value } = this.state;

        return <div style={{ display: 'inline-block', transform: `scale(${value})` }}>{value}</div>;
    }
}

• 在 Vue 中使用

<template>
    <div :style="{ transform: `scale(${value})`, display: 'inline-block' }">{{value}}</div>
</template>

<script>
    import { Animation } from '@douyinfe/semi-animation';

    export default {
        data() {
            return { value: 0 };
        },
        created() {
            this.animation = new Animation({
                from: { value: 0 },
                to: { value: 1 },
            });

            this.animation.on('frame', props => {
                this.value = props.value;
            });
        },
        mounted() {
            this.animation.start();
        },
        beforeDestroy() {
            this.animation.destroy();
        },
    };
</script>

显示结果 :

API 密码

new Animation({ ...props }, { ...config });

道具

配置

实例方法

支助活动

• start: 动画开始时触发
• pause:动画暂停时触发(当动画状态从播放变为暂停时触发事件,在其他情况下不会被触发)
• resume: 当动画继续播放时触发( 当动画状态从暂停状态变为播放状态时触发事件, 而在其他情况下不会被触发)
• frame: 动画框架更新时触发
• rest: 当动画结束时触发( 当动画正常结束时事件会被触发)
• stop: 动画停止时触发( 当实例停止方法调用时触发此事件)

开发者可以使用 animation.on(eventName: string, cb: Function(currentStyle: object)) 以约束上述事件.

import { Animation } from '@douyinfe/semi-animation';
// ...
const animation = new Animation(
    {
        from: { value1: 0, value2: 1 /* ... */ },
        to: { value1: 1, value2: 2 /* ... */ },
    },
    {
        duration: 1000, // After passing in duration, the default is linear interpolation
    }
);

animation.on('frame', currentState => {
    // currentState: is the state value object at the current moment
    // { value1: xxx, value2: xxx, ... }
});

// The callbacks such as start and pause are the same as the frame above, and the parameters are also the same.
animation.on('start', currentState => { /* ... */ });
animation.on('pause', currentState => { /* ... */ });
animation.on('resume', currentState => { /* ... */ });
animation.on('rest', currentState => { /* ... */ });
animation.on('stop', currentState => { /* ... */ });

许可证

麻省理工学院