React verwendet Skripte, um Animationen zu implementieren-js-Tutorial-php.cn

React verwendet Skripte, um Animationen zu implementieren

零到壹度

Freigeben： 2018-04-14 16:25:46

Original

1898 Leute haben es durchsucht

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

Nach dem Login kopieren

2. Zählerfall

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

React verwendet Skripte, um Animationen zu implementieren

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 >

Nach dem Login kopieren

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 &#39;react&#39;;
import {spring ,Motion} from &#39;react-motion&#39;;

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

Nach dem Login kopieren

, um den Effekt auszuführen:

React verwendet Skripte, um Animationen zu implementieren

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 &#39;react&#39;;

import {spring ,Motion} from &#39;react-motion&#39;;

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

Nach dem Login kopieren

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

React verwendet Skripte, um Animationen zu implementieren

Das Ergebnis nach der Ausführung:

React verwendet Skripte, um Animationen zu implementieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Vollständiger Code des Falls:

import React, {Component} from &#39;react&#39;;
import {TransitionMotion,spring , presets} from &#39;react-motion&#39;;

export default class Main extends Component {

    constructor(props) {        super(props);        /*定义一个数组：目标状态*/
        this.state={
            items: [{key: &#39;a&#39;, w: 200},{key: &#39;b&#39;, 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;,
    },
}

Nach dem Login kopieren

Aktualisieren Sie den Standardstatus des Browsers:

React verwendet Skripte, um Animationen zu implementieren

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

React verwendet Skripte, um Animationen zu implementieren

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!