5 Txoj hauv kev zoo rau Animate React Apps hauv 2019

Animation hauv React daim ntawv thov yog ib lub ntsiab lus nrov thiab sib tham. Qhov tseeb yog tias muaj ntau txoj hauv kev los tsim nws. Qee tus neeg tsim khoom siv CSS los ntawm kev ntxiv cov cim npe rau cov chav kawm HTML. Ib txoj kev zoo heev, tsim nyog siv. Tab sis yog tias koj xav ua haujlwm nrog ntau hom kev ua yeeb yam, nws tsim nyog siv sijhawm los kawm GreenSock, nws yog lub platform nrov thiab muaj zog. Kuj tseem muaj ntau lub tsev qiv ntawv thiab cov khoom siv los tsim cov animations. Wb tham txog lawv.

Kab lus no tham txog tsib txoj hauv kev los ua kom cov ntawv thov React:

• CSS;
• ReactTransitionGroup;
• React-animations;
• React-qhia tawm;
• TweenOne thiab Ant Design.

Skillbox pom zoo: Kev kawm online chav kawm "Profession Java developer".
Peb nco qab: rau txhua tus neeg nyeem Habr - 10 ruble luv nqi thaum tso npe rau hauv ib chav kawm Skillbox siv Habr promo code.

Tag nrho cov piv txwv muaj nyob rau hauv chaw khaws cia (los ntawm no cov peev txheej tau muab tso rau hauv tsab xov xwm es tsis yog cov duab, ib yam li hauv tsab xov xwm qub).

CSS

Txoj kev no tau tham thaum pib, thiab nws zoo heev. Yog tias, es tsis txhob xa cov tsev qiv ntawv JavaScript, koj siv nws, lub rooj sib txoos me me, qhov browser tsis xav tau ntau yam kev pab. Thiab qhov no, ntawm chav kawm, cuam tshuam rau kev ua haujlwm ntawm daim ntawv thov. Yog tias koj cov animation xav tau yooj yim, xav txog txoj kev no.

Piv txwv li, ntawm no yog ib daim ntawv qhia animated:

Nws yog qhov yooj yim heev, nrog rau CSS cov cuab yeej thiab qhov tshwm sim zoo li className = "is-nav-open" ntawm HTML tag.

Txoj kev no tuaj yeem siv ntau txoj hauv kev. Piv txwv li, tsim ib lub wrapper saum lub navigation thiab tom qab ntawd ua rau kev hloov pauv. Txij li thaum navigation muaj qhov dav tas mus li ntawm 250px, qhov dav ntawm lub wrapper nrog cov npoo-sab laug lossis txhais X cov cuab yeej yuav tsum muaj qhov dav tib yam. Yog tias koj xav tau kev qhia navigation koj yuav tsum ntxiv className = "is-nav-qhib" rau lub wrapper thiab txav lub wrapper mus rau margin-sab laug / txhaisX: 0;.

Thaum kawg, animation qhov chaw yuav zoo li no:

export default class ExampleCss extends Component {
    handleClick() {
        const wrapper = document.getElementById('wrapper');
        wrapper.classList.toggle('is-nav-open')
    }
    render() {
        return (
            <div id="wrapper" className="wrapper">
                <div className="nav">
                    <icon
                        className="nav__icon"
                        type="menu-fold"
                        onClick={() => this.handleClick()}/>
                    <div className="nav__body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Beatae ducimus est laudantium libero nam optio repellat
                        sit unde voluptatum?
                    </div>
                </div>
            </div>
        );
    }
}

Thiab ntawm no yog CSS styles:

.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: margin .5s;
    margin: 0 0 0 -250px;
}
 
.wrapper.is-nav-open {
    margin-left: 0;
}
 
.nav {
    position: relative;
    width: 250px;
    height: 20px;
    padding: 20px;
    border-right: 1px solid #ccc;
}
.nav__icon {
    position: absolute;
    top: 0;
    right: -60px;
    padding: 20px;
    font-size: 20px;
    cursor: pointer;
    transition: color .3s;
}
 
.nav__icon:hover {
    color: #5eb2ff;
}

Ib zaug ntxiv, yog tias cov animation yog qhov yooj yim, ces txoj kev no yog qhov tseem ceeb. Cov neeg siv yuav txaus siab rau qhov ceev ntawm qhov browser.

ReactTransitionGroup

Lub koom haum ReactTransitionGroup tau tsim los ntawm pab pawg neeg zej zog ReactJS. Nrog nws cov kev pab, koj tuaj yeem siv yooj yim CSS animations thiab hloov pauv.

ReactTransitionGroup yog tsim los hloov cov chav kawm thaum lub sij hawm tiv thaiv lub neej hloov. Nws yog qhov me me thiab yuav tsum tau muab tso rau hauv React daim ntawv thov pob, uas yuav ua rau me ntsis nce qhov loj ntawm tag nrho. Tsis tas li ntawd, koj tuaj yeem siv CDN.

ReactTransitionGroup muaj peb yam, Hloov pauv, CSSTransition thiab TransitionGroup. Txhawm rau pib cov animation, koj yuav tsum qhwv cov khoom hauv lawv. Cov style, nyob rau hauv lem, yuav tsum tau sau nyob rau hauv cov chav kawm CSS.

Ntawm no yog cov animation, thiab tom qab ntawd - txoj hauv kev los siv nws.

Thawj kauj ruam yog import CSSTransitionGroup los ntawm react-transition-group. Tom qab ntawd, koj yuav tsum qhwv cov npe thiab teeb tsa cov cuab yeej hloov npe. Txhua lub sij hawm tus me nyuam lub ntsiab lus hauv CSSTransitionGroup raug ntxiv lossis tshem tawm, nws tau txais cov yeeb yam animation.

<CSSTransitionGroup
    transitionName="example">
    {items}
</CSSTransitionGroup>

Los ntawm kev teeb tsa lub transitionName = "example", cov chav kawm hauv cov ntawv txheeb yuav tsum pib nrog lub npe piv txwv.

.example-eneter {
    opacity: 0.01;
}
 
.example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 300ms ease-in;
}
 
.example-leave {
    opacity: 1;
}
 
.example-leave.example-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;

Saum toj no yog ib qho piv txwv ntawm kev siv ReactTransitionGroup.

Peb kuj xav tau kev xav, thiab ob txoj hauv kev los ua piv txwv ntawm kev ntxiv cov npe hu.

Thawj txoj kev yog handleAdd - nws ntxiv cov neeg tshiab, tau txais lub npe random, uas nws tom qab ntawd tso rau hauv state.items array.

Txhawm rau tshem tawm kev sib cuag los ntawm qhov ntsuas hauv state.items array, handleRemove yog siv.

import React, { Component, Fragment } from 'react';
import { CSSTransitionGroup } from 'react-transition-group'
import random from 'random-name'
import Button from './button'
import Item from './item'
import './style.css';
export default class ReactTransitionGroup extends Component {
    
    constructor(props) {
        super(props);
        this.state = { items: ['Natividad Steen']};
        this.handleAdd = this.handleAdd.bind(this);
    }
 
    handleAdd() {
        let newItems = this.state.items;
        newItems.push(random());
        this.setState({ items: newItems });
    }
 
    render () {
        const items = this.state.items.map((item, i) => (
            <Item
            item={item}
            key={i}
            keyDelete={i}
            handleRemove={(i) => this.handleRemove(i)}
            />
        ));
 
    return (
        <Fragment>
            <Button onClick={this.handleAdd}/>
                <div className="project">
                    <CSSTransitionGroup
                    transitionName="example"
                    transitionEnterTimeout={500}
                    transitionLeaveTimeout={300}
                    >
                        {items}
                    </CSSTransitionGroup>
                </div>
        </Fragment>
    );
}
};

React-animations

React-animations yog ib lub tsev qiv ntawv uas tsim los ntawm animate.css. Nws yooj yim ua hauj lwm nrog thiab muaj ntau yam animation collections. Lub tsev qiv ntawv yog sib xws nrog txhua lub tsev qiv ntawv inline-style uas txhawb nqa kev siv cov khoom los txhais cov duab yooj yim, suav nrog Radium, Aphrodite lossis styled-components.

Kuv paub koj tab tom xav li cas:

Tam sim no cia saib seb qhov no ua haujlwm li cas siv tus piv txwv ntawm bouncing animation.

Ua ntej tshaj plaws, peb import cov animation los ntawm react-animations.

const Bounce = styled.div`animation: 2s ${keyframes`${bounce}`} infinite`;

Tom qab ntawd, tom qab tsim cov khoom tivthaiv, peb qhwv ib qho HTML code lossis cov khoom siv rau cov animation.

<bounce><h1>Hello Animation Bounce</h1></bounce>

Piv Txwv:

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';
import './style.css';
 
const Bounce = styled.div`animation: 2s ${keyframes`${bounce}`} infinite`;
 
export default class ReactAnimations extends Component {
    render() {
        return (
            <Bounce><h1>Hello Animation Bounce</h1></bounce>
        );
    }
}

Txhua yam ua haujlwm, cov animation yooj yim heev. Tsis tas li ntawd, muaj cov kev daws teeb meem zoo rau kev siv scrolling bouncing animation - react-animate-on-scroll.

React-qhia tawm

Hauv React Reveal lub moj khaum Muaj cov animations yooj yim xws li fading, flipping, scaling, rotating thiab ntau dua. Nws tso cai rau koj los ua haujlwm nrog txhua cov animation siv cov khoom siv. Yog li, koj tuaj yeem teeb tsa ntxiv, suav nrog txoj haujlwm, ncua sijhawm, nrug, cascade thiab lwm yam. Lwm cov teebmeem CSS tuaj yeem siv tau, suav nrog server-sab rendering thiab cov khoom lag luam siab. Zuag qhia tag nrho, yog tias koj xav tau scrolling animation, lub moj khaum no tsim nyog siv.

import Fade from 'react-reveal/Fade';
 
<Fade top>
    <h1>Title</h1>
</Fade>

Muaj tsib blocks nyob rau hauv tag nrho, txhua tus ntawm lawv muaj ib tug puv npo nplooj ntawv thiab header.

import React, { Component, Fragment } from 'react';
import Fade from 'react-reveal/Fade';
 
const animateList = [1, 2, 3, 4, 5];
 
export default class ReactReveal extends Component {
    render() {
        return (
            <Fragment>
                {animateList.map((item, key) => (
                    <div style={styles.block} key={key}>
                        <Fade top>
                            <h1 style={styles.title}>{`block ${item}`}</h1>                       
                        </Fade>
                    </div>
                ))}
            </Fragment>
        );
    }
}
 
const styles = {
    block: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        height: '100%',
        background: '#000',
        borderBottom: '1px solid rgba(255,255,255,.2)',
    },
    title: {
        textAlign: 'center',
        fontSize: 100,
        color: '#fff',
        fontFamily: 'Lato, sans-serif',
        fontWeight: 100,
    },
};

Tam sim no peb qhia cov animateList tas li. Cov array muaj tsib yam. Tom qab siv daim ntawv qhia array txoj kev, nws muaj peev xwm ua tau txhua yam hauv Fade Cheebtsam los ntawm kev ntxig cov ntsiab lus rau hauv header. Cov qauv uas tau teev tseg hauv cov qauv tsis tu ncua tau txais cov qauv CSS luv rau ob qho tib si thaiv thiab lub taub hau. Saum toj no yog tsib blocks nrog Fade animation.

TweenOne thiab animation hauv Ant Design

Ant Design - React UI lub tsev qiv ntawv, uas muaj ntau yam tseem ceeb thiab siv tau yooj yim. Nws yog tsim nyog yog tias koj xav tau los tsim elegant user interfaces. Nws tau tsim los ntawm Alibaba, uas siv lub tsev qiv ntawv hauv ntau qhov haujlwm.

Qhov piv txwv muaj ntau yam animated Cheebtsam. Feem ntau ntawm lawv muaj cov animations zoo sib xws, yog li kev ua piv txwv yuav yooj yim dua li qhov saum toj no. Qhov no tsuas yog suav nrog lub pob, lub pob ntsuab thiab ib qho ntxiv, piv txwv li, lub square liab.

Cov animation siv TweenOne tivthaiv, uas xav tau PathPlugin kom raug teeb tsa txoj hauv kev. Tag nrho cov no yuav ua haujlwm tsuas yog tias koj tso
PathPlugin hauv TweenOne.plugins.

TweenOne.plugins.push(PathPlugin);

Lub ntsiab animation parameter yog cov hauv qab no:

• duration — animation time in ms;
• yooj yim - animation smoothness;
• yoyo - hloov qhov txav mus rau pem hauv ntej thiab rov qab nrog txhua qhov rov ua dua;
• rov ua dua - rov ua cov animation. Yuav tsum siv -1 rau infinite animation;
• p - kev sib koom ua ke ntawm txoj kev rau cov animation;
• easePath - kev sib koom tes ntawm txoj kev du rau cov animation.

Ob qhov kev txwv kawg yog qhov tshwj xeeb, tab sis koj tsis tas yuav txhawj xeeb txog lawv, txhua yam ua haujlwm raws li nws yuav tsum tau ua.

const duration = 7000;
const ease = 'easeInOutSine';
const p =
  'M123.5,89.5 C148,82.5 239.5,48.5 230,17.5 C220.5,-13.5 127,6 99.5,13.5 C72,21 -9.5,56.5 1.5,84.5 C12.5,112.5 99,96.5 123.5,89.5 Z';
const easePath =
  'M0,100 C7.33333333,89 14.3333333,81.6666667 21,78 C25.3601456,75.6019199 29.8706084,72.9026327 33,70 C37.0478723,66.2454406 39.3980801,62.0758689 42.5,57 C48,46.5 61.5,32.5 70,28 C77.5,23.5 81.5,20 86.5,16 C89.8333333,13.3333333 94.3333333,8 100,0';
const loop = {
  yoyo: true,
  repeat: -1,
  duration,
  ease,
};

Tam sim no koj tuaj yeem pib tsim cov khoom animation.

• redSquare muaj lub voj tsis ntxiv nrog rau Y kev tswj hwm, ncua sijhawm thiab ncua sijhawm.
• GreenBall muaj txoj hauv kev nrog cov khoom tsis muaj x, y yog tus nqi ntawm p. Tsis tas li ntawd, ncua sij hawm, rov ua dua thiab smoothness yog qhov ua haujlwm ntawm TweenOne.easing.path, uas muaj ob qhov tsis muaj.
• txoj kev - easePath.
• lengthPixel yog qhov nkhaus uas muab faib ua tag nrho ntawm 400 ntu.
• Txoj kev taug qab yog ib qho oval nrog axes, nws muaj lub voj voog cov qauv thiab qhov ntsuas kev sib hloov.

const animate = {
  redSquare: {
    ...loop,
    y: 15,
    duration: 3000,
    delay: 200,
  },
  greenBall: {
    path: { x: p, y: p },
    duration: 5000,
    repeat: -1,
    ease: TweenOne.easing.path(easePath, { lengthPixel: 400 }),
  },
  track: {
    ...loop,
    rotate: 15,
  },
};

Koj kuj yuav tsum tau them sai sai rau TweenOne tivthaiv. Tag nrho cov khoom yuav raug xa los ntawm rc-tween-one. TweenOne yog ib qho tseem ceeb tivthaiv nrog cov proprs yooj yim thiab cov khoom siv animation, uas sawv cev rau cov animation. Txhua TweenOne muaj nws tus kheej animation tsis, xws li redSquare, khiav, greenBall.

import React from 'react';
import TweenOne from 'rc-tween-one';
 
export default function BannerImage() {
    return (
      <div className="wrapper-ant-design">
        <svg width="482px" height="500px" viewBox="0 0 482 500">
          <defs>
            <path
              d="M151,55 C129.666667,62.6666667 116,74.3333333 110,90 C104,105.666667 103,118.5 107,128.5 L225.5,96 C219.833333,79 209.666667,67 195,60 C180.333333,53 165.666667,51.3333333 151,55 L137,0 L306.5,6.5 L306.5,156 L227,187.5 L61.5,191 C4.5,175 -12.6666667,147.833333 10,109.5 C32.6666667,71.1666667 75,34.6666667 137,0 L151,55 Z"
              id="mask"
            />
          </defs>
          <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(0, 30)">
            <g id="Group-13" transform="translate(0.000000, 41.000000)">
              <TweenOne component="g" animation={animate.redSquare}>
                <rect
                  stroke="#F5222D"
                  strokeWidth="1.6"
                  transform="translate(184.000000, 18.000000) rotate(8.000000) translate(-184.000000, -18.000000) "
                  x="176.8"
                  y="150.8"
                  width="14.4"
                  height="14.4"
                  rx="3.6"
                />
              </TweenOne>
            </g>
            <g id="Group-14" transform="translate(150.000000, 230.000000)">
              <g id="Group-22" transform="translate(62.000000, 7.000000)">
                <image
                  id="cc4"
                  alt="globe"
                  xlinkHref="https://gw.alipayobjects.com/zos/rmsportal/FpKOqFadwoFFIZFExjaf.png"
                  width="151px"
                  height="234px"
                />
              </g>
              <mask id="mask-2">
                <use xlinkHref="#mask" fill="white" transform="translate(-42, -33)" />
              </mask>
              <g mask="url(#mask-2)">
                <TweenOne component="g" animation={animate.track} style={{ transformOrigin: '122.7px 58px' }}>
                  <g transform="translate(-16, -52)">
                    <g transform="translate(16, 52)">
                      <path
                        d="M83.1700911,35.9320015 C63.5256194,37.9279025 44.419492,43.1766434 25.8517088,51.6782243 C14.3939956,57.7126276 7.77167019,64.8449292 7.77167019,72.4866248 C7.77167019,94.1920145 61.1993389,111.787709 127.105708,111.787709 C193.012078,111.787709 246.439746,94.1920145 246.439746,72.4866248 C246.439746,55.2822262 212.872939,40.6598106 166.13127,35.3351955"
                        id="line-s"
                        stroke="#0D1A26"
                        strokeWidth="1.35"
                        strokeLinecap="round"
                        transform="translate(127.105708, 73.561453) rotate(-16.000000) translate(-127.105708, -73.561453) "
                      />
                    </g>
                    <TweenOne component="g" animation={animate.greenBall}>
                      <image
                        alt="globe"
                        id="id2"
                        xlinkHref="https://gw.alipayobjects.com/zos/rmsportal/IauKICnGjGnotJBEyCRK.png"
                        x="16"
                        y="62"
                        width="26px"
                        height="26px"
                      />
                    </TweenOne>
                  </g>
                </TweenOne>
              </g>
            </g>
          </g>
        </svg>
      </div>
    );
  }

Yog, nws zoo li txaus ntshai, tab sis animation siv txoj kev no yooj yim.

 <TweenOne component="g" animation={animate.redSquare} />
  <TweenOne component="g" animation={animate.track} />
  <TweenOne component="g" animation={animate.greenBall} />

Txhua yam koj yuav tsum tau ua yog piav qhia txog cov kev cai ntawm cov animation thiab hloov lawv mus rau TweenOne tivthaiv.

Ua kom tiav cov hom phiaj sib txawv yuav tsum muaj kev sib txawv. Kab lus no tau tham txog ntau yam kev daws teeb meem uas tuaj yeem siv tau hauv ntau qhov haujlwm. Nws yog nyob ntawm koj xaiv qhov yog.

Skillbox pom zoo:

• Ob xyoos xyaum xyaum "Kuv yog PRO web developer".
• Hoob kawm online "C# developer los ntawm kos".
• Cov chav kawm xyaum ua ib xyoos "PHP tus tsim tawm los ntawm 0 rau PRO".

Tau qhov twg los: www.hab.com