React verwendet Skripte, um Animationen zu implementieren

In diesem Artikel erfahren Sie, wie Sie Skripte zum Implementieren von Animationen verwenden. Um Skripte zum Implementieren von Animationen zu verwenden, können wir die React-Motion-Animationsbibliothek verwenden, eine hervorragende Animationsbibliothek, die Skripte zum Implementieren von Animationen verwendet. (Bewegung bedeutet Bewegung), was einen bestimmten Referenzwert hat. Freunde in Not können sich auf

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

beziehen

1. Installieren Sie die React-Motion-Animationsbibliothek

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

2. Zählerfall

In diesem Fall wird die Zahl 0 zu 1 hinzugefügt

1. Importieren Sie Feder und Bewegung aus der React-Motion-Bibliothek

Spring: Geben Sie an, wie der Zielwert animiert werden soll, zum Beispiel spring(10, {stiffness: 120, damping: 17}) bedeutet „Bewegung wird auf den Wert 10 gezeichnet, die Federsteifigkeit beträgt 120 und die Dämpfung beträgt 17“

Bewegung: Es handelt sich um eine Komponente, die speziell Animationsdaten bereitstellt, und sie empfängt eine Funktion als Unterkomponente, Beispiel:

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

2. Eigenschaften der Bewegungskomponente:

defaultStyle: Legen Sie den Standardwert vor der Animation fest startet

Stil: Setzen Sie die Animation auf den Wert

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

, um den Effekt auszuführen:

2. Animationsfall zum Ändern von Transparenz und Breite

Aus dem obigen Fall können wir erkennen, dass Motion 组是专门提供动画数据的 tatsächlich nicht an der Zeichnung der Schnittstelle beteiligt ist, 界面的绘制过程是通过子组件来完成的. Lassen Sie uns einen Animationsfall zum Ändern von Transparenz und Breite erstellen

1. Importieren Sie react-motionspring 和 Motion

aus der

-Bibliothek 2. Der Wert von value.x stammt aus 0过渡到1. Sie können Verwenden Sie die von Motion bereitgestellte Animationsdatenklasse 修改p的 透明度和宽度

3, die auf beiden Seiten ${value.x} hinzugefügt wurde. Dies ist die String-Vorlagensyntax in es6. ${} kann als Effekt des Interpolators 反引号

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

verstanden werden, der die Schnittstelle auf 0,2 aktualisiert:

Das Ergebnis nach der Ausführung:

3.TransitionMotion-Ausführungsfall zum Laden und Entladen von Animationen

Die zuvor erlernte

Animationsbibliothek bietet Lade- und Entladeanimationen von Ausführungskomponenten. Tatsächlich bietet TransitionGroup auch diese Funktion. Um diese Funktion nutzen zu können, müssen Sie eine neue API verwenden: die react-motion-Komponente, die Ihnen beim Laden und Entladen von Komponenten helfen kann. TransitionMotion

1. Import aus der

-Bibliothek react-motionTransitionMotion, spring 和 presets

TransitionMotion dient zum Ausführen der Lade- und Entladeanimation der Komponente

Spring: Geben Sie an, wie das Ziel animiert werden soll Wert

Voreinstellungen: Voreingestellte Steifigkeits- und Dämpfungswerte

2. Beim Hinzufügen einer Komponente: Der Zustand geht von dem in willEnter() definierten Zustand in den in Stilen definierten Zustand über

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. Beim Löschen einer Komponente: Der Zustand geht von dem in Stilen definierten Zustand in den in willLeave definierten Zustand über

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

Vollständiger Code des Falls:

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

Aktualisieren Sie den Standardstatus des Browsers:

Nachdem Sie auf „C hinzufügen“ geklickt haben, fügen Sie ein p hinzu, und die Breite und Höhe werden langsam größer

Verwandte Empfehlungen:

Animationseffekt reagieren

Verwenden Sie React, um Seitenübergangsanimationen zu implementieren

ReactJS-Lernreihenkurse (Verwendung von React-Animationen)

Das obige ist der detaillierte Inhalt vonReact verwendet Skripte, um Animationen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!