5 ວິທີທີ່ດີທີ່ຈະສ້າງແອັບ React ໃນປີ 2019

Animation ໃນຄໍາຮ້ອງສະຫມັກ React ເປັນຫົວຂໍ້ທີ່ນິຍົມແລະສົນທະນາ. ຄວາມຈິງແມ່ນວ່າມີຫຼາຍວິທີທີ່ຈະສ້າງມັນ. ນັກພັດທະນາບາງຄົນໃຊ້ CSS ໂດຍການເພີ່ມແທັກໃສ່ຫ້ອງຮຽນ HTML. ເປັນ​ວິ​ທີ​ການ​ທີ່​ດີ​ເລີດ​, ຄຸ້ມ​ຄ່າ​ການ​ນໍາ​ໃຊ້​. ແຕ່ຖ້າທ່ານຕ້ອງການເຮັດວຽກກັບປະເພດພາບເຄື່ອນໄຫວທີ່ສັບສົນ, ມັນຄວນຈະໃຊ້ເວລາເພື່ອຮຽນຮູ້ GreenSock, ມັນເປັນເວທີທີ່ນິຍົມແລະມີອໍານາດ. ນອກຈາກນີ້ຍັງມີຫ້ອງສະຫມຸດແລະອົງປະກອບຈໍານວນຫລາຍສໍາລັບການສ້າງພາບເຄື່ອນໄຫວ. ໃຫ້ເວົ້າກ່ຽວກັບພວກມັນ.

ບົດ​ຄວາມ​ນີ້​ໄດ້​ປຶກ​ສາ​ຫາ​ລື​ຫ້າ​ວິ​ທີ​ການ​ທີ່​ຈະ​ມີ​ຊີ​ວິດ​ການ​ນໍາ​ໃຊ້ React​:

• css;
• ReactTransitionGroup;
• ປະຕິກິລິຍາ-ພາບເຄື່ອນໄຫວ;
• ປະຕິກິລິຍາ-ເປີດເຜີຍ;
• TweenOne ແລະ Ant Design.

Skillbox ແນະນໍາ: ຫຼັກສູດການສຶກສາອອນໄລນ໌ "ນັກພັດທະນາ Java ມືອາຊີບ".
ພວກເຮົາເຕືອນ: ສໍາລັບຜູ້ອ່ານທັງຫມົດຂອງ "Habr" - ສ່ວນຫຼຸດ 10 rubles ເມື່ອລົງທະບຽນໃນຫຼັກສູດ Skillbox ໂດຍໃຊ້ລະຫັດສົ່ງເສີມ "Habr".

ຕົວຢ່າງທັງຫມົດແມ່ນມີຢູ່ໃນ ຄັງເກັບມ້ຽນ (ຈາກທີ່ນີ້, ແຫຼ່ງຂໍ້ມູນໄດ້ຖືກໃສ່ເຂົ້າໄປໃນບົດຄວາມແທນທີ່ຈະເປັນຮູບພາບ, ຄືກັບບົດຄວາມຕົ້ນສະບັບ).

CSS

ວິທີການນີ້ໄດ້ຖືກປຶກສາຫາລືໃນຕອນເລີ່ມຕົ້ນ, ແລະມັນກໍ່ດີ. ຖ້າ, ແທນທີ່ຈະນໍາເຂົ້າຫ້ອງສະຫມຸດ JavaScript, ທ່ານໃຊ້ມັນ, ການປະກອບມີຂະຫນາດນ້ອຍ, ຕົວທ່ອງເວັບບໍ່ຕ້ອງການຊັບພະຍາກອນຫຼາຍ. ແລະນີ້, ແນ່ນອນ, ຜົນກະທົບຕໍ່ການປະຕິບັດຄໍາຮ້ອງສະຫມັກ. ຖ້າພາບເຄື່ອນໄຫວຂອງທ່ານຕ້ອງການຂ້ອນຂ້າງງ່າຍດາຍ, ພິຈາລະນາວິທີການນີ້.

ຕົວຢ່າງ, ນີ້ແມ່ນເມນູເຄື່ອນໄຫວ:

ມັນຂ້ອນຂ້າງງ່າຍດາຍ, ມີຄຸນສົມບັດ CSS ແລະຕົວກະຕຸ້ນເຊັ່ນ className="is-nav-open" ໃນແທັກ HTML.

ວິທີການນີ້ສາມາດຖືກນໍາໃຊ້ໃນວິທີທີ່ແຕກຕ່າງກັນ. ຕົວຢ່າງ, ສ້າງ wrapper ຂ້າງເທິງການນໍາທາງແລະຫຼັງຈາກນັ້ນເຮັດໃຫ້ເກີດການປ່ຽນແປງພາກສະຫນາມ. ເນື່ອງຈາກການນໍາທາງມີຄວາມກວ້າງຄົງທີ່ຂອງ 250px, ຄວາມກວ້າງຂອງ wrapper ທີ່ມີຂອບຊ້າຍຫຼືຄຸນສົມບັດ translateX ຄວນມີຄວາມກວ້າງດຽວກັນ. ຖ້າທ່ານຕ້ອງການສະແດງການນໍາທາງ, ທ່ານຈໍາເປັນຕ້ອງເພີ່ມ className = "is-nav-open" ໃສ່ wrapper ແລະຍ້າຍ wrapper ໄປ margin-left / translateX: 0;.

ໃນທີ່ສຸດ, ແຫຼ່ງພາບເຄື່ອນໄຫວຈະມີລັກສະນະນີ້:

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

ແລະນີ້ແມ່ນຮູບແບບ CSS:

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

ອີກເທື່ອຫນຶ່ງ, ຖ້າພາບເຄື່ອນໄຫວແມ່ນຂ້ອນຂ້າງງ່າຍດາຍ, ຫຼັງຈາກນັ້ນວິທີການນີ້ແມ່ນຕົ້ນຕໍ. ຜູ້ໃຊ້ຈະພໍໃຈກັບຄວາມໄວຂອງຕົວທ່ອງເວັບ.

ReactTransitionGroup

ອົງປະກອບ ReactTransitionGroup ໄດ້ຖືກພັດທະນາໂດຍທີມງານຊຸມຊົນ ReactJS. ດ້ວຍການຊ່ວຍເຫຼືອຂອງມັນ, ທ່ານສາມາດປະຕິບັດການເຄື່ອນໄຫວ CSS ພື້ນຖານແລະການຫັນປ່ຽນໄດ້ຢ່າງງ່າຍດາຍ.

ReactTransitionGroup ຖືກອອກແບບມາເພື່ອປ່ຽນຊັ້ນຮຽນເມື່ອວົງຈອນຊີວິດຂອງອົງປະກອບປ່ຽນແປງ. ມັນມີຂະຫນາດຂະຫນາດນ້ອຍແລະຈໍາເປັນຕ້ອງໄດ້ຕິດຕັ້ງຢູ່ໃນຊຸດຄໍາຮ້ອງສະຫມັກ React, ເຊິ່ງຈະເພີ່ມຂະຫນາດການກໍ່ສ້າງໂດຍລວມເລັກນ້ອຍ. ນອກຈາກນັ້ນ, ທ່ານສາມາດນໍາໃຊ້ CDN.

ReactTransitionGroup ມີສາມອົງປະກອບ, Transition, CSSTransition ແລະ TransitionGroup. ເພື່ອເລີ່ມຕົ້ນການເຄື່ອນໄຫວ, ທ່ານຈໍາເປັນຕ້ອງຫໍ່ອົງປະກອບໃນພວກມັນ. ຮູບແບບ, ໃນທາງກັບກັນ, ຕ້ອງໄດ້ຮັບການຂຽນໃນຫ້ອງຮຽນ CSS.

ນີ້ແມ່ນພາບເຄື່ອນໄຫວ, ແລະຫຼັງຈາກນັ້ນ - ວິທີການປະຕິບັດມັນ.

ຂັ້ນຕອນທໍາອິດແມ່ນການນໍາເຂົ້າ CSSTransitionGroup ຈາກ react-transition-group. ຫຼັງຈາກນີ້, ທ່ານຈໍາເປັນຕ້ອງຫໍ່ບັນຊີລາຍຊື່ແລະກໍານົດຄຸນສົມບັດ transitionName. ທຸກໆຄັ້ງທີ່ອົງປະກອບເດັກນ້ອຍຢູ່ໃນ CSSTransitionGroup ຖືກເພີ່ມ ຫຼືລຶບອອກ, ມັນຈະໄດ້ຮັບຮູບແບບການເຄື່ອນໄຫວ.

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

ໂດຍການຕັ້ງຄ່າຄຸນສົມບັດ transitionName = "ຕົວຢ່າງ", classes ໃນ style sheets ຕ້ອງເລີ່ມຕົ້ນດ້ວຍຊື່ຕົວຢ່າງ.

.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;

ຂ້າງເທິງນີ້ແມ່ນຕົວຢ່າງຂອງການນໍາໃຊ້ ReactTransitionGroup.

ພວກເຮົາຍັງຕ້ອງການເຫດຜົນ, ແລະສອງວິທີການປະຕິບັດຕົວຢ່າງຂອງການເພີ່ມລາຍຊື່ຕິດຕໍ່.

ວິທີທໍາອິດແມ່ນ handleAdd - ມັນເພີ່ມການຕິດຕໍ່ໃຫມ່, ໄດ້ຮັບຊື່ແບບສຸ່ມ, ເຊິ່ງຫຼັງຈາກນັ້ນມັນວາງໄວ້ໃນ state.items array.

ເພື່ອເອົາລາຍຊື່ຕິດຕໍ່ອອກໂດຍດັດສະນີໃນອາເຣ state.items, handleRemove ຖືກໃຊ້.

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

ປະຕິກິລິຍາ-ພາບເຄື່ອນໄຫວ

ປະຕິກິລິຍາ-ພາບເຄື່ອນໄຫວ ແມ່ນຫ້ອງສະໝຸດທີ່ສ້າງຂຶ້ນໃນ animate.css. ນາງແມ່ນງ່າຍທີ່ຈະເຮັດວຽກກັບແລະມີການເກັບກໍາພາບເຄື່ອນໄຫວທີ່ແຕກຕ່າງກັນຫຼາຍ. ຫ້ອງສະໝຸດແມ່ນເຂົ້າກັນໄດ້ກັບຫ້ອງສະໝຸດທີ່ມີຮູບແບບໃນແຖວໃດນຶ່ງທີ່ຮອງຮັບການໃຊ້ວັດຖຸເພື່ອກຳນົດກອບອະນິເມຊັນພື້ນຖານ, ລວມທັງ Radium, Aphrodite ຫຼືອົງປະກອບສະໄຕລ໌.

ຂ້ອຍຮູ້ວ່າເຈົ້າກຳລັງຄິດຫຍັງ:

ຕອນນີ້ໃຫ້ກວດເບິ່ງວິທີການເຮັດວຽກນີ້ໂດຍໃຊ້ຕົວຢ່າງຂອງພາບເຄື່ອນໄຫວ bouncing.

ກ່ອນອື່ນໝົດ, ພວກເຮົານຳເຂົ້າພາບເຄື່ອນໄຫວຈາກ react-animation.

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

ຫຼັງຈາກນັ້ນ, ຫຼັງຈາກການສ້າງອົງປະກອບ, ພວກເຮົາຫໍ່ລະຫັດ HTML ຫຼືອົງປະກອບສໍາລັບການເຄື່ອນໄຫວ.

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

ຕົວຢ່າງ:

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

ທຸກສິ່ງທຸກຢ່າງເຮັດວຽກ, ພາບເຄື່ອນໄຫວແມ່ນງ່າຍດາຍຫຼາຍ. ນອກຈາກນັ້ນ, ມີການແກ້ໄຂທີ່ດີສໍາລັບການນໍາໃຊ້ການເລື່ອນພາບເຄື່ອນໄຫວ - react-animate-on-scroll.

ປະຕິກິລິຍາເປີດເຜີຍ

ໃນກອບການເປີດເຜີຍ React ມີອະນິເມຊັນພື້ນຖານລວມທັງການຈາງ, ພິກ, ປັບຂະໜາດ, ການຫມຸນ ແລະອື່ນໆອີກ. ມັນອະນຸຍາດໃຫ້ທ່ານເຮັດວຽກກັບພາບເຄື່ອນໄຫວທັງຫມົດໂດຍໃຊ້ props. ດັ່ງນັ້ນ, ທ່ານສາມາດກໍານົດການຕັ້ງຄ່າເພີ່ມເຕີມ, ລວມທັງຕໍາແຫນ່ງ, ການຊັກຊ້າ, ໄລຍະຫ່າງ, cascade ແລະອື່ນໆ. ຜົນກະທົບ CSS ອື່ນໆສາມາດຖືກນໍາໃຊ້, ລວມທັງການສະແດງຜົນຂ້າງເຊີບເວີແລະອົງປະກອບທີ່ມີຄໍາສັ່ງສູງ. ໂດຍລວມແລ້ວ, ຖ້າທ່ານຕ້ອງການການເລື່ອນພາບເຄື່ອນໄຫວ, ກອບນີ້ແມ່ນຄຸ້ມຄ່າທີ່ຈະໃຊ້.

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

ມີຫ້າທ່ອນໄມ້ຢູ່ໃນຈໍານວນທັງຫມົດ, ແຕ່ລະຄົນມີຫນ້າເຕັມຫນ້າຈໍແລະສ່ວນຫົວ.

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

ໃນປັດຈຸບັນພວກເຮົາແນະນໍາ animateList ຄົງທີ່. array ມີຫ້າອົງປະກອບ. ຫຼັງຈາກການນໍາໃຊ້ວິທີການ array ແຜນທີ່, ມັນເປັນໄປໄດ້ທີ່ຈະສະແດງອົງປະກອບໃດໆໃນອົງປະກອບ Fade ໂດຍການໃສ່ອົງປະກອບເຂົ້າໄປໃນສ່ວນຫົວ. ຮູບແບບທີ່ຖືກກໍານົດໄວ້ໃນຄໍເຕົ້າໄຂ່ທີ່ຄົງທີ່ໄດ້ຮັບຮູບແບບ CSS ສັ້ນສໍາລັບທັງບລັອກແລະສ່ວນຫົວ. ຂ້າງເທິງແມ່ນຫ້າທ່ອນໄມ້ທີ່ມີອະນິເມຊັນ Fade.

TweenOne ແລະພາບເຄື່ອນໄຫວໃນ Ant Design

ການອອກແບບ Ant — React UI ຫ້ອງສະຫມຸດ, ເຊິ່ງປະກອບດ້ວຍຈໍານວນຂະຫນາດໃຫຍ່ຂອງອົງປະກອບທີ່ເປັນປະໂຫຍດແລະງ່າຍທີ່ຈະນໍາໃຊ້. ມັນເຫມາະສົມຖ້າທ່ານຕ້ອງການສ້າງການໂຕ້ຕອບຜູ້ໃຊ້ທີ່ສະຫງ່າງາມ. ມັນໄດ້ຖືກພັດທະນາໂດຍ Alibaba, ເຊິ່ງໃຊ້ຫ້ອງສະຫມຸດໃນຫຼາຍໂຄງການຂອງຕົນ.

ຕົວຢ່າງມີອົງປະກອບເຄື່ອນໄຫວຫຼາຍ. ພວກມັນສ່ວນໃຫຍ່ມີພາບເຄື່ອນໄຫວທີ່ຄ້າຍຄືກັນ, ດັ່ງນັ້ນການປະຕິບັດຕົວຢ່າງຈະງ່າຍດາຍກວ່າອັນຂ້າງເທິງ. ນີ້ຈະປະກອບມີພຽງແຕ່ບານ, ບານສີຂຽວແລະອົງປະກອບເພີ່ມເຕີມ, ຕົວຢ່າງ, ສີ່ຫລ່ຽມສີແດງ.

ພາບເຄື່ອນໄຫວໃຊ້ອົງປະກອບ TweenOne, ເຊິ່ງຕ້ອງການ PathPlugin ເພື່ອກໍານົດເສັ້ນທາງການເຄື່ອນໄຫວຢ່າງຖືກຕ້ອງ. ທັງຫມົດນີ້ຈະເຮັດວຽກພຽງແຕ່ຖ້າທ່ານວາງ
PathPlugin ໃນ TweenOne.plugins.

TweenOne.plugins.push(PathPlugin);

ຕົວກໍານົດການການເຄື່ອນໄຫວຕົ້ນຕໍແມ່ນດັ່ງຕໍ່ໄປນີ້:

• ໄລ​ຍະ​ເວ​ລາ — ເວ​ລາ​ການ​ເຄື່ອນ​ໄຫວ​ໃນ ms​;
• ງ່າຍ - ກ້ຽງ ສັດ;
• yoyo - ການປ່ຽນແປງການເຄື່ອນໄຫວໄປຂ້າງຫນ້າແລະຖອຍຫຼັງດ້ວຍການຄ້າງຫ້ອງ;
• repeat - ເຮັດ​ເລ​ື້ມ​ຄືນ​ການ​ເຄື່ອນ​ໄຫວ​. ຈໍາເປັນຕ້ອງໃຊ້ -1 ສໍາລັບການເຄື່ອນໄຫວທີ່ບໍ່ມີຂອບເຂດ;
• p — ພິກັດຂອງເສັ້ນທາງສໍາລັບການເຄື່ອນໄຫວ;
• easePath — ປະ​ສານ​ງານ​ຂອງ​ເສັ້ນ​ທາງ​ກ້ຽງ​ສໍາ​ລັບ​ການ​ເຄື່ອນ​ໄຫວ​ໄດ້​.

ສອງຕົວກໍານົດການສຸດທ້າຍແມ່ນສະເພາະຫຼາຍ, ແຕ່ທ່ານບໍ່ຈໍາເປັນຕ້ອງກັງວົນກ່ຽວກັບພວກມັນ, ທຸກສິ່ງທຸກຢ່າງເຮັດວຽກຕາມທີ່ມັນຄວນ.

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

ຕອນນີ້ທ່ານສາມາດເລີ່ມຕົ້ນສ້າງວັດຖຸເຄື່ອນໄຫວໄດ້.

• redSquare ປະກອບມີຕົວກໍານົດການ loop ບວກກັບ Y coordinate, ໄລຍະເວລາແລະການຊັກຊ້າ.
• greenBall ມີເສັ້ນທາງທີ່ມີຕົວກໍານົດວັດຖຸ x, y ແມ່ນຄ່າຂອງ p. ນອກຈາກນັ້ນ, ໄລຍະເວລາ, ການຊໍ້າຄືນແລະກ້ຽງແມ່ນຫນ້າທີ່ຂອງ TweenOne.easing.path, ເຊິ່ງມີສອງຕົວກໍານົດການ.
• ເສັ້ນທາງ - easePath.
• lengthPixel ເປັນເສັ້ນໂຄ້ງທີ່ແບ່ງອອກເປັນ 400 ພາກສ່ວນ.
• ຕິດຕາມແມ່ນຮູບໄຂ່ທີ່ມີແກນ, ມັນມີຮູບແບບຮອບວຽນແລະຕົວກໍານົດການຫມຸນ.

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

ນອກນັ້ນທ່ານຍັງຈໍາເປັນຕ້ອງໄດ້ເອົາໃຈໃສ່ກັບອົງປະກອບ TweenOne. ອົງປະກອບທັງໝົດຈະຖືກນຳເຂົ້າຈາກ rc-tween-one. TweenOne ເປັນອົງປະກອບພື້ນຖານທີ່ມີ proprs ພື້ນຖານແລະ props ພາບເຄື່ອນໄຫວ, ເຊິ່ງເປັນຕົວແທນຂອງພາບເຄື່ອນໄຫວ. ແຕ່ລະ TweenOne ມີຕົວກໍານົດການເຄື່ອນໄຫວຂອງຕົນເອງ, ເຊັ່ນ: redSquare, track, 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>
    );
  }

ແມ່ນແລ້ວ, ມັນເບິ່ງຄືວ່າເປັນຕາຢ້ານ, ແຕ່ພາບເຄື່ອນໄຫວໂດຍໃຊ້ວິທີນີ້ແມ່ນງ່າຍດາຍ.

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

ສິ່ງທີ່ທ່ານຕ້ອງເຮັດຄືການອະທິບາຍກົດລະບຽບພາບເຄື່ອນໄຫວ ແລະໂອນພວກມັນໄປທີ່ອົງປະກອບ TweenOne.

ການບັນລຸເປົ້າຫມາຍທີ່ແຕກຕ່າງກັນຮຽກຮ້ອງໃຫ້ມີວິທີການທີ່ແຕກຕ່າງກັນ. ບົດ​ຄວາມ​ນີ້​ໄດ້​ກວມ​ເອົາ​ວິ​ທີ​ແກ້​ໄຂ​ຈໍາ​ນວນ​ຫນຶ່ງ​ທີ່​ສາ​ມາດ​ນໍາ​ໃຊ້​ໃນ​ຈໍາ​ນວນ​ຫຼາຍ​ຂອງ​ໂຄງ​ການ​. ມັນຂຶ້ນກັບທ່ານທີ່ຈະເລືອກເອົາທີ່ເຫມາະສົມ.

Skillbox ແນະນໍາ:

• ຫຼັກສູດພາກປະຕິບັດສອງປີ "ຂ້ອຍເປັນນັກພັດທະນາເວັບ PRO".
• ຫຼັກສູດອອນໄລນ "ນັກພັດທະນາ C# ຕັ້ງແຕ່ເລີ່ມຕົ້ນ".
• ຫຼັກສູດພາກປະຕິບັດ "ນັກພັດທະນາ PHP ຈາກ 0 ເຖິງ PRO".

ແຫຼ່ງຂໍ້ມູນ: www.habr.com