Uhuishaji katika programu za React ni mada maarufu na inayojadiliwa. Ukweli ni kwamba kuna njia nyingi za kuunda. Wasanidi wengine hutumia CSS kwa kuongeza lebo kwenye madarasa ya HTML. Njia bora, inafaa kutumia. Lakini ikiwa ungependa kufanya kazi na aina changamano za uhuishaji, inafaa kuchukua muda kujifunza GreenSock, ni jukwaa maarufu na lenye nguvu. Pia kuna maktaba nyingi na vipengele vya kuunda uhuishaji. Hebu tuzungumze juu yao.
Nakala hii inajadili njia tano za kuhuisha programu za React:
- CSS;
- ReactTransitionGroup;
- Uhuishaji wa kiitikio;
- React-fichua;
- Ubunifu wa TweenOne na Ant.
Skillbox inapendekeza: Kozi ya elimu mtandaoni .
Tunakukumbusha: kwa wasomaji wote wa "Habr" - punguzo la rubles 10 wakati wa kujiandikisha katika kozi yoyote ya Skillbox kwa kutumia msimbo wa uendelezaji wa "Habr".
Mifano zote zinapatikana ndani (kutoka hapa vyanzo vimeingizwa kwenye nakala badala ya picha, kama ilivyo kwenye nakala asili).
CSS
Njia hii ilijadiliwa hapo awali, na ni nzuri sana. Ikiwa, badala ya kuagiza maktaba ya JavaScript, unatumia, mkusanyiko ni mdogo, kivinjari hakihitaji rasilimali nyingi. Na hii, bila shaka, inathiri utendaji wa maombi. Ikiwa uhuishaji wako unahitaji kuwa rahisi kiasi, zingatia njia hii.
Kama mfano, hapa kuna menyu ya uhuishaji:
Ni rahisi kiasi, ikiwa na sifa ya CSS na kichochezi kama className="is-nav-open" kwenye lebo ya HTML.
Njia hii inaweza kutumika kwa njia tofauti. Kwa mfano, unda kanga juu ya urambazaji na kisha usababishe mabadiliko ya uga. Kwa kuwa urambazaji una upana usiobadilika wa 250px, upana wa kanga iliyo na ukingo wa kushoto au sifa ya translateX inapaswa kuwa na upana sawa. Iwapo unahitaji kuonyesha usogezaji unahitaji kuongeza className = "is-nav-open" kwenye kanga na usogeze kanga kwenye ukingo-kushoto / translateX: 0;.
Hatimaye, chanzo cha uhuishaji kitaonekana kama hii:
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>
);
}
}Na hapa kuna mitindo ya 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;
}Tena, ikiwa uhuishaji ni rahisi, basi njia hii ndiyo kuu. Watumiaji watafurahishwa na kasi ya kivinjari.
ReactTransitionGroup
Kipengele cha ReactTransitionGroup kiliundwa na timu ya jumuiya ya ReactJS. Kwa msaada wake, unaweza kutekeleza kwa urahisi uhuishaji na mabadiliko ya msingi ya CSS.
ReactTransitionGroup imeundwa kubadili madarasa wakati mzunguko wa maisha wa kijenzi unapobadilika. Ni ndogo kwa ukubwa na inahitaji kusakinishwa kwenye kifurushi cha programu ya React, ambacho kitaongeza kidogo saizi ya jumla ya ujenzi. Kwa kuongeza, unaweza kutumia CDN.
ReactTransitionGroup ina vipengele vitatu, Mpito, CSSTransition na TransitionGroup. Ili kuanza uhuishaji, unahitaji kuifunga sehemu ndani yao. Mtindo, kwa upande wake, unahitaji kuandikwa katika madarasa ya CSS.
Hapa kuna uhuishaji, na kisha - njia ya kutekeleza.
Hatua ya kwanza ni kuleta CSSTransitionGroup kutoka kwa kikundi cha react-transition. Baada ya hayo, unahitaji kufunga orodha na kuweka sifa ya TransitionName. Kila wakati kipengele cha mtoto katika CSSTransitionGroup kinapoongezwa au kuondolewa, hupokea mitindo ya uhuishaji.
<CSSTransitionGroup
transitionName="example">
{items}
</CSSTransitionGroup>Kwa kuweka kipengele cha transitionName = "example", madarasa katika laha za mtindo lazima yaanze na jina la mfano.
.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;Hapo juu ni mfano wa kutumia ReactTransitionGroup.
Pia tunahitaji mantiki, na mbinu mbili za kutekeleza mfano wa kuongeza orodha ya anwani.
Njia ya kwanza ni handleAdd - inaongeza waasiliani wapya, inapata jina la nasibu, ambalo huliweka katika safu ya state.items.
Ili kuondoa mwasiliani kwa faharasa katika safu ya vipengee vya state., handleOndoa hutumiwa.
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>
);
}
};Uhuishaji wa kiitikio
ni maktaba ambayo imejengwa kwenye animate.css. Yeye ni rahisi kufanya kazi naye na ana makusanyo mengi tofauti ya uhuishaji. Maktaba inaoana na maktaba yoyote ya mtindo wa ndani ambayo inasaidia matumizi ya vitu ili kufafanua viunzi vya msingi vya uhuishaji, ikiwa ni pamoja na Radium, Aphrodite au vipengele vilivyowekwa mtindo.
Najua unafikiria nini:
Sasa hebu tuangalie jinsi hii inavyofanya kazi kwa kutumia mfano wa uhuishaji unaobonyea.
Kwanza kabisa, tunaingiza uhuishaji kutoka kwa uhuishaji wa itikio.
const Bounce = styled.div`uhuishaji: 2s ${keyframes`${bounce}`} infinite`;
Kisha, baada ya kuunda kipengele, tunafunga msimbo wowote wa HTML au sehemu kwa uhuishaji.
<bounce><h1>Hello Animation Bounce</h1></bounce>Mfano:
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>
);
}
}Kila kitu hufanya kazi, uhuishaji ni rahisi sana. Kwa kuongeza, kuna suluhisho nzuri la kutumia uhuishaji wa kuteleza - .
React-fichua
Kuna uhuishaji msingi ikiwa ni pamoja na kufifia, kupinduka, kuongeza ukubwa, kuzungusha na zaidi. Inakuruhusu kufanya kazi na uhuishaji wote kwa kutumia props. Kwa hiyo, unaweza kuweka mipangilio ya ziada, ikiwa ni pamoja na nafasi, kuchelewa, umbali, cascade na wengine. Athari zingine za CSS zinaweza kutumika, ikijumuisha utoaji wa upande wa seva na vipengee vya mpangilio wa juu. Kwa ujumla, ikiwa unahitaji uhuishaji wa kusogeza, mfumo huu unafaa kutumia.
import Fade from 'react-reveal/Fade';
<Fade top>
<h1>Title</h1>
</Fade> 
Kuna vizuizi vitano kwa jumla, kila kimoja kina ukurasa wa skrini nzima na kichwa.
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,
},
};Sasa tunatanguliza animateList mara kwa mara. Safu ina vipengele vitano. Baada ya kutumia mbinu ya safu ya ramani, inawezekana kutoa kipengele chochote katika vipengele vya Fade kwa kuingiza vipengele kwenye kichwa. Mitindo ambayo imefafanuliwa katika mitindo mara kwa mara hupokea mitindo fupi ya CSS kwa kizuizi na kichwa. Hapo juu kuna vizuizi vitano vilivyo na uhuishaji wa Fifisha.
TweenOne na uhuishaji katika muundo wa Ant
- Maktaba ya React UI, ambayo ina idadi kubwa ya vipengele muhimu na rahisi kutumia. Inafaa ikiwa unahitaji kuunda miingiliano ya kifahari ya mtumiaji. Ilitengenezwa na Alibaba, ambayo hutumia maktaba katika miradi yake mingi.
Mfano una vipengele vingi vya uhuishaji. Wengi wao wana uhuishaji sawa, kwa hivyo utekelezaji wa mfano utakuwa rahisi kuliko ule ulio hapo juu. Hii itajumuisha tu mpira, mpira wa kijani na kipengele cha ziada, kwa mfano, mraba nyekundu.
Uhuishaji hutumia sehemu ya TweenOne, ambayo inahitaji PathPlugin ili kuweka njia ya mwendo kwa usahihi. Yote hii itafanya kazi tu ikiwa utaweka
PathPlugin katika TweenOne.plugins.
TweenOne.plugins.push(PathPlugin);Vigezo kuu vya uhuishaji ni vifuatavyo:
- muda - muda wa uhuishaji katika ms;
- urahisi - laini ya uhuishaji;
- yoyo - kubadilisha harakati mbele na nyuma kwa kila marudio;
- kurudia - kurudia uhuishaji. Haja ya kutumia -1 kwa uhuishaji usio na mwisho;
- p - kuratibu za njia ya uhuishaji;
- easePath - viwianishi vya njia laini ya uhuishaji.
Vigezo viwili vya mwisho ni maalum sana, lakini huna haja ya kuwa na wasiwasi juu yao, kila kitu hufanya kazi kama inavyopaswa.
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,
};Sasa unaweza kuanza kuunda kitu cha uhuishaji.
- redSquare ina vigezo vya kitanzi pamoja na Y kuratibu, muda na kuchelewa.
- greenBall ina njia yenye vigezo vya kitu x, y ni thamani ya p. Kwa kuongeza, muda, kurudia na ulaini ni kazi ya TweenOne.easing.path, ambayo ina vigezo viwili.
- njia - easePath.
- lengthPixel ni curve ambayo imegawanywa katika jumla ya sehemu 400.
- wimbo ni mviringo na shoka, ina mitindo ya mzunguko na parameta ya mzunguko.
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,
},
};Pia unahitaji kulipa kipaumbele kwa sehemu ya TweenOne. Vipengele vyote vitaletwa kutoka rc-tween-one. TweenOne ni kijenzi cha msingi chenye proprs za msingi na props za uhuishaji, ambazo zinawakilisha uhuishaji. Kila TweenOne ina vigezo vyake vya uhuishaji, kama vile 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>
);
} 
Ndiyo, inaonekana inatisha, lakini uhuishaji kwa kutumia njia hii ni rahisi.
<TweenOne component="g" animation={animate.redSquare} />
<TweenOne component="g" animation={animate.track} />
<TweenOne component="g" animation={animate.greenBall} />Unachohitaji kufanya ni kuelezea sheria za uhuishaji na kuzihamisha hadi sehemu ya TweenOne.
Kufikia malengo tofauti kunahitaji mbinu tofauti. Nakala hii ilijadili suluhisho kadhaa ambazo zinaweza kutumika katika idadi kubwa ya miradi. Ni juu yako kuchagua moja sahihi.
Skillbox inapendekeza:
- Kozi ya vitendo ya miaka miwili .
- Kozi ya mkondoni .
- Kozi ya mwaka wa vitendo .
Chanzo: mapenzi.com
