@douyinfe/semi-animation

Provides basic JS animation engine：

• Simulate animation changes based on interpolation,the performance is more natural
• Support the definition of various easing functions
• Provides a complete life cycle hook and operation method, allowing developers to freely control the animation

Install

npm install @douyinfe/semi-animation

Usage

Animation

semi-animation provides a class called Animation . It has a complete life cycle hook and control method to support operating animation like audio and video.

• Use in JS

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

• Use in React

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

• Use in 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>

Show results：

API

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

props

config

Instance methods

Supported events

• start: Triggered when the animation starts
• pause: Triggered when the animation pauses(The event is triggered when the animation state is changed from playing to pause, and it will not be triggered in other cases)
• resume: Triggered when the animation continues to play(The event is triggered when the animation state is changed from paused to playing, and it will not be triggered in other cases)
• frame: Triggered when the animation frame is updated
• rest: Triggered when the animation ends(The event will be triggered when the animation ends normally)
• stop: Triggered when the animation stops(This event is triggered when the instance stop method is called)

Developers can use animation.on(eventName: string, cb: Function(currentStyle: object)) to bind the above events.

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 => { /* ... */ });

Licence

MIT