React uses scripting to implement animation

This article will share with you how to use scripts to implement animation. To use scripts to implement animation, we can use the react-motion animation library. It is an excellent animation library and uses scripts to implement animations. (motion means movement), which has certain reference value. Friends in need can refer to

react-motion: https://github.com/chenglou/react-motion

1. Install react-motion animation library

yarn add react-motion//ro  npm install react-motion

2. Counter case

This case implements adding the number 0 to 1

1. Import spring and Motion from the react-motion library

spring: Specify how to animate the target value, for example, spring(10, {stiffness: 120, damping: 17}) means "Draw the dynamic value to 10, the spring stiffness is 120, and the damping is 17"

Motion: It is A component that specifically provides animation data. It receives a function as a subcomponent, for example:

< motion >
   { value  => (   ) } 
</ Motion >

2. Motion component attribute:

defaultStyle : Set the default value before the animation starts

style : Set the animation to the value

import React, {Component} from 'react';
import {spring ,Motion} from 'react-motion';

export default class Main extends Component {
    render() {        return (
            <p style={styles.content}>
                {/*由0 过渡到 1 ; stiffness是阻尼*/}
                <Motion defaultStyle={{x: 0}} style={{x: spring(1,{stiffness: 20})}}>
                    {
                        value =>
                            <p>
                                {value.x}
                            </p>
                    }
                </Motion>
            </p>
        )
    }
}/*样式*/const styles = {
    content: {
        width: &#39;400px&#39;,
        height: &#39;500px&#39;,
        backgroundColor: &#39;skyblue&#39;,
        margin: &#39;0 auto&#39;,
    },
}

The effect of execution:

2. Animation case for changing transparency and width

Through the above case, we can know that the Motion group is dedicated to providing animation data. In fact, it does not participate in the drawing of the interface, The drawing process of the interface is completed through subcomponents. Let's do an animation case of changing transparency and width

1. Import spring and Motion2 from the

react-motion

library. The value of value.x transitions from 0 to 1. You can modify the transparency and width of p through the animation data class provided by Motion

3.${value.x} Added backticks on both sides. This is the string template syntax in es6. ${} can be understood as the effect of interpolator

import React, {Component} from 'react';

import {spring ,Motion} from 'react-motion';

export default class Main extends Component {

    render() {        return (
            <p style={styles.content}>
                {/*由0 过渡到 1 ; stiffness是阻尼*/}
                ......

                {/*改变p的宽度和透明度*/}
                <Motion defaultStyle={{x: 0}} style={{x: spring(1,{stiffness: 20})}}>
                    {
                        value =>

                            <p style={ Object.assign({},styles.pStyle,{
                                opacity:`${value.x}`,
                                width:`${50+value.x*100}px`
                            })}>
                                默认
                            </p>
                    }
                </Motion>

            </p>
        )
    }


}/*样式*/const styles = {
    content: {
       ....
    },
    pStyle: {
        width: &#39;50px&#39;,
        height: &#39;50px&#39;,
        backgroundColor: &#39;green&#39;,
        margin: &#39;3px 0&#39;,
        color:&#39;white&#39;
    },
}

refreshing the interface to 0.2:

The result after execution:

3.TransitionMotion execution loading and unloading animation case

The previously learned TransitionGroup animation library provides loading and unloading animations of execution components. In fact, react-motion also provides this function. To use this function, you need to use a new API: TransitionMotion component, which can help you perform component loading and unloading animations. .

1. Import TransitionMotion, spring and presets from the react-motion library

##TransitionMotion is the loading and unloading animation of the execution component

spring : Specify how to animate the target value

presets : Preset the values ​​of stiffness and damping

2. When adding a component: The state is transitioned by the state defined in willEnter() To the state defined in styles

willEnter(){
        return {width: 0, height: 0};}
// 由willEnter()中width: 0, height: 0状态过渡到下面styles中width:200, height: 50状态
// spring() 函数为目标值设置动画
// presets.wobbly 等价于 {stiffness: 180, damping: 12}
 styles={this.state.items.map(item => ({
                        key: item.key,
                        style: {width: spring(item.w,presets.wobbly), height: spring(50,presets.wobbly)},
                    }))}

3. When deleting a component: The state transitions from the state defined in styles to the state defined in willLeave

 styles={this.state.items.map(item => ({
                        key: item.key,
                        style: {width: spring(item.w,presets.wobbly), height: spring(50,presets.wobbly)},
                    }))}
// 由styles中width:200, height: 50状态过渡到下面willEnter()中width: 0, height: 0 状态
// presets.wobbly 等价于 {stiffness: 180, damping: 12}
//下面的 spring(0,presets.wobbly) 设置目标值动画                
willLeave() {
        return {width: spring(0,presets.wobbly), height: spring(0,presets.wobbly)};}

Complete code of the case:

import React, {Component} from 'react';
import {TransitionMotion,spring , presets} from 'react-motion';

export default class Main extends Component {

    constructor(props) {        super(props);        /*定义一个数组：目标状态*/
        this.state={
            items: [{key: 'a', w: 200},{key: 'b', w: 200}],
        }
    }    /*装载组件的状态（ 进入/添加组件 ）*/
    willEnter(){        return {width: 0, height: 0};
    }    /*御载组件的状态( 离开/删除组件 )*/
    willLeave() {        return {width: spring(0,presets.wobbly), height: spring(0,presets.wobbly)};
    }

    render() {        return (
            <p style={styles.content}>

                <TransitionMotion
                    willEnter={this.willEnter}
                    willLeave={this.willLeave}
                    styles={this.state.items.map(item => ({
                        key: item.key,
                        style: {width: spring(item.w,presets.wobbly), height: spring(50,presets.wobbly)},
                    }))}>

                    {interpolatedStyles =>
                        <p>
                            {interpolatedStyles.map(config => {                                
                            return <p key={config.key} style={{...config.style, border: &#39;1px solid&#39;}} >
                                    {config.key} : {config.style.height}
                                </p>
                            })}
                        </p>
                    }
                </TransitionMotion>
                <button onClick={()=>this.startAnimation(0)}>Add C</button>
                <button onClick={()=>this.startAnimation(1)}>remove C</button>

            </p>
        )
    }

    startAnimation(index){        // add
        if(index==0){            this.setState({
                items: [{key: &#39;a&#39;, w: 200},{key: &#39;b&#39;, w: 200},{key: &#39;c&#39;, w: 200}],
            })        // remove
        }else{            this.setState({
                items: [{key: &#39;a&#39;, w: 200},{key: &#39;b&#39;, w: 200}],
            })
        }

    }

}/*样式*/const styles = {
    content: {
        width: &#39;400px&#39;,
        height: &#39;500px&#39;,
        backgroundColor: &#39;skyblue&#39;,
        margin: &#39;0 auto&#39;,
    },
}

Refresh the default browser state:

After clicking Add C, add a p, and the width and height will slowly become larger

##Related recommendations:

React Animation Effect

Use React to implement page transition animation

ReactJS learning series courses (React animation use)

The above is the detailed content of React uses scripting to implement animation. For more information, please follow other related articles on the PHP Chinese website!