React는 스크립팅을 사용하여 애니메이션을 구현합니다.-JS 튜토리얼-php.cn

React는 스크립팅을 사용하여 애니메이션을 구현합니다.

零到壹度

풀어 주다： 2018-04-14 16:25:46

원래의

1898명이 탐색했습니다.

이 글에서는 스크립트를 사용하여 애니메이션을 구현하는 방법을 공유합니다. 스크립트를 사용하여 애니메이션을 구현하려면 우수한 애니메이션 라이브러리인 반응 모션 애니메이션 라이브러리를 사용할 수 있으며 스크립트를 사용하여 애니메이션을 구현합니다. (모션은 움직임을 의미합니다.) 필요한 친구들이 참고할 수 있습니다

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

1. library

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

로그인 후 복사

2. 카운터 케이스

이 케이스는 1

React는 스크립팅을 사용하여 애니메이션을 구현합니다.

1에 숫자 0을 추가하는 것을 구현합니다. 반응 모션 라이브러리

spring에서 스프링과 모션을 가져옵니다. value 애니메이션 설정(예: spring(10, {stiffness: 120,damping: 17})은 "애니메이션은 값 10으로 그려지고 스프링 강성은 120, 감쇠는 17"을 의미합니다.) spring(10, {stiffness: 120, damping: 17})表示“动画到数值10，弹簧刚度为120，阻尼为17”

Motion : 它是一个专门提供动画数据的组件，它接收一个函数作为子组件, 例如：

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

로그인 후 복사

2.Motion组件属性：

defaultStyle ：设置动画开始前默认数值

style ：设置动画要到数值

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

로그인 후 복사

执行的效果：

React는 스크립팅을 사용하여 애니메이션을 구현합니다.

2.改变透明度和宽的动画案例

通过上面的案例可以知道 Motion 组是专门提供动画数据的 ,其实它并没有参与界面的绘制，界面的绘制过程是通过子组件来完成的。下面我们来做一个改变透明度和宽的动画案例

1.从react-motion库中导入 spring 和 Motion

2.value.x的值是由0过渡到1的, 可以通过Motion提供的这个动画数据类修改p的透明度和宽度

3.${value.x} 两边添加了反引号，这个是es6中的字符串模板语法。${} 可以理解为插值器

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

로그인 후 복사

刷新界面执行到0.2的效果：

React는 스크립팅을 사용하여 애니메이션을 구현합니다.

执行结束后的结果：

React는 스크립팅을 사용하여 애니메이션을 구현합니다.

3.TransitionMotion执行装载和卸载动画案例

之前学的TransitionGroup动画库提供了执行组件的装载和御载的动画。其实react-motion也提供了这个功能，要使用这个功能就要用到一个新的API : TransitionMotion 组件，该组件可以帮助您执行组件的装载和卸载动画。

1.从react-motion库中导入 TransitionMotion, spring 和 presets

Motion

: 애니메이션 데이터를 구체적으로 제공하는 컴포넌트입니다. 예를 들어

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

로그인 후 복사

2. 모션 컴포넌트 속성:

defaultStyle

: 기본값을 설정합니다. 애니메이션 시작 전 값

style

: 애니메이션 설정 숫자 값을 얻으려면

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

로그인 후 복사

실행 효과:

React는 스크립팅을 사용하여 애니메이션을 구현합니다.

2 투명도와 너비를 변경하는 애니메이션 사례

React는 스크립팅을 사용하여 애니메이션을 구현합니다. 위의 사례에서 다음을 수행할 수 있습니다. 모션 그룹은 애니메이션 데이터를 위해 특별히 제공되는 것으로 알고 있습니다. 실제로는 인터페이스 그리기에 참여하지 않습니다.하위 구성 요소를 통해 인터페이스 그리기 프로세스가 완료됩니다< /코드>. 투명도와 너비를 변경하는 애니메이션 사례를 만들어 보겠습니다. </p><p>1. <code>react-motion 라이브러리에서 spring 및 Motion을 가져옵니다.

2.value.x 값 가 0에서 1로 전환됩니다. Motion

3에서 제공하는 애니메이션 데이터 클래스 를 통해 p의 투명도와 너비를 수정할 수 있습니다.<code> $ {value.x}에는 양쪽에 백틱이 추가되어 있습니다. 이는 es6의 문자열 템플릿 구문입니다. ${}는 인터페이스를 0.2로 새로 고치는 보간기

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

로그인 후 복사

의 효과로 이해할 수 있습니다.

여기에 그림 설명 쓰기 실행 후 결과:

1. react-motion 라이브러리에서 TransitionMotion, spring 및 Presets 가져오기 TransitionMotion은 실행 구성 요소의 로드 및 언로드 애니메이션입니다. spring: 방법을 지정합니다. 목표 값 설정 애니메이션 설정

presets: 미리 설정된 강성 및 감쇠 값 2. 구성요소 추가 시: willEnter()에 정의된 상태에서 스타일에 정의된 상태로 전환 rrreee

3. 구성 요소: 상태는 스타일에 의해 결정됩니다. willLeave에 정의된 상태에서 willLeave에 정의된 상태로 전환 🎜rrreee🎜🎜케이스의 전체 코드: 🎜🎜rrreee🎜브라우저의 기본 상태 새로 고침: 🎜🎜🎜🎜🎜클릭 후 C를 추가하고 느리게 P, 너비 및 높이를 추가하여 천천히 더 큰 관련 권장 사항을 얻습니다. 🎜🎜 🎜ReactJS 학습 시리즈 과정(React 애니메이션 사용)🎜🎜🎜

위 내용은 React는 스크립팅을 사용하여 애니메이션을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!