Анимације могу бити одличан начин да побољшате корисничко искуство ваше Реацт апликације. Они могу помоћи да интеракција буде глаткија, а такође могу пружити визуелну повратну информацију или скренути пажњу на одређени елемент.

Постоји много начина на које можете да радите са ЦСС анимацијама користећи Реацт, од изворног решења до библиотека трећих страна.

Зашто користити анимације у Реацт-у?

Постоји много разлога зашто бисте можда желели да користите анимације у својој Реацт апликацији. Неки од најчешћих разлога укључују:

  • Учините да се интеракције осећају природније. Анимације могу помоћи да интеракција корисника буде природнија и глаткија. На пример, ако користите компоненту за пребацивање, можда бисте желели да анимирате дугме за пребацивање између стања „укључено“ и „искључено“. Други пример су траке напретка, можете креирајте анимирану траку напретка за странице ваше апликације за реаговање.
  • Пружање визуелне повратне информације. Анимације могу пружити визуелну повратну информацију кориснику. На пример, ако корисник кликне на дугме, можда бисте желели да анимирате дугме да бисте назначили да је апликација регистровала ту радњу.
  • Усмеравање пажње корисника. Анимације могу усмерити пажњу корисника на одређени елемент. На пример, ако имате модални дијалог који се појављује на екрану, можда бисте желели да користите анимацију да бисте скренули пажњу корисника на њега.
  • Стварање осећаја хитности.Анимације могу створити осећај хитности или важности. На пример, ако имате компоненту тајмера која одбројава, можда бисте желели да користите анимацију да бисте одразили хитност како се рок приближава.

Постоји неколико начина за додавање анимација Реацт компонентама. Три које ћете научити о коришћењу овде су анимације у инлине стилу, библиотека реаговања анимација и библиотека реаговања једноставног анимирања.

Започните до креирање основне апликације за реаговање, а затим следите метод по свом избору.

Метод 1: Коришћење уграђених стилских анимација

На пример, рецимо да желите да анимирате компоненту тако да нестане када кликнете на дугме. То можете учинити помоћу следећег кода:

увоз Реагујте, { Компонента } из 'реаговати';
класаФадеИнОутпротежеСаставни део{
конструктор(реквизити) {
супер(реквизити);


ово.стате = {
 је видљиво: лажно
 };
 }


дати, пружити() {
конст стилови = {
непрозирност: ово.држава.исВисибле? 1: 0,
 прелаз: 'опацити 2с'
 };


повратак (
<див>
<див стиле={стилес}>
 Здраво Свете!
</div>
<дугме онЦлицк={тхис.тогглеВисибилити}>
 Искључи
</button>
</div>
 );
 }


тогглеВисибилити = () => {
ово.сетСтате (превСтате => ({
исВисибле: !превСтате.исВисибле
 }));
 }
}
извозУобичајено ФадеИнОут;

У овом примеру, објекат стила има својства непрозирности и прелаза. Непрозирност је 0 када компонента није видљива, а 1 када јесте. Својство прелаза је „непрозирност 2с“, што ће проузроковати прелазак непрозирности током две секунде када се промени.

Дугме пребацује видљивост компоненте. Када неко кликне на дугме, променљива стања исВисибле се ажурира и компонента ће избледети или нестати у зависности од свог тренутног стања.

Метод 2: Коришћење библиотеке реацт-аниматионс

Други начин за додавање анимација Реацт компонентама је коришћење библиотеке као што су реацт-анимације. Ова библиотека обезбеђује скуп унапред дефинисаних анимација које можете да користите у вашим Реацт компонентама.

Да бисте користили реаговане анимације, прво морате да инсталирате библиотеку:

нпм инсталирај реаговати-анимације --сачувати

Такође морате да инсталирате Апхродите, што је зависност од реагних анимација:

нпм инсталирај афродита --сачувати

Када инсталирате библиотеке, можете да увезете анимације које желите да користите:

увоз { фадеИн, фадеОут} из 'реаг-анимације';

Затим можете користити анимације у својим компонентама:

увоз Реагујте, { Компонента } из 'реаговати';
увоз { СтилеСхеет, цсс } из 'афродита';
увоз { фадеИн, фадеОут} из 'реаг-анимације';
конст стилес = СтилеСхеет.цреате({
 фадеИн: {
 аниматионНаме: фадеИн,
 аниматионДуратион: '2с'
 },
 избледети: {
 аниматионНаме: фадеОут,
 аниматионДуратион: '2с'
 }
});


класаФадеИнОутпротежеСаставни део{
конструктор(реквизити) {
супер(реквизити);


ово.стате = {
 је видљиво: лажно
 };
 }


дати, пружити() {
конст цлассНаме = ово.стате.исВисибле? цсс (стилес.фадеИн): цсс (стилес.фадеОут);


повратак (
<див>
<див цлассНаме={цлассНаме}>
 Здраво Свете!
</div>
<дугме онЦлицк={тхис.тогглеВисибилити}>
 Искључи
</button>
</div>
 );
 }


тогглеВисибилити = () => {
ово.сетСтате (превСтате => ({
исВисибле: !превСтате.исВисибле
 }));
 }
}
извозУобичајено ФадеИнОут;

Овај пример почиње увозом фадеИн и фадеОут анимација из библиотеке реацт-аниматионс. Затим дефинише објекат стилова са фадеИн и фадеОут анимацијама и аниматионДуратион постављеним на две секунде.

Дугме ће променити видљивост компоненте. Када неко кликне на њу, променљива стања исВисибле ће се ажурирати, а компонента ће избледети или нестати у зависности од свог тренутног стања.

Метод 3: Коришћење библиотеке реацт-симпле-анимате

Реацт-симпле-анимате библиотека пружа једноставан начин за додавање анимација Реацт компонентама. Нуди декларативни АПИ који олакшава дефинисање сложених анимација.

Да бисте користили библиотеку, прво морате да је инсталирате:

нпм инсталирај реаговати-једноставно-анимирати --сачувати

Затим га можете користити у својим компонентама:

увоз Реагујте, { Компонента } из 'реаговати';
увоз { Анимате, АниматеКеифрамес} из "реаговати-једноставно-анимирати";
класаАпликацијапротежеСаставни део{
 дати, пружити() {
повратак (
<див>
<Анимирај
 игра
почетак={{
 непрозирност: 0
 }}
крај={{
 непрозирност: 1
 }}
>
<див>
 Здраво Свете!
</div>
</Animate>
<АниматеКеифрамес
 игра
 трајање={2}
 кључни кадрови={[
 { непрозирност: 0, трансформација: 'транслатеКс(-100пк)' },
 { непрозирност: 1, трансформација: 'транслатеКс(0пк)' }
 ]}
>
<див>
 Здраво Свете!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
извозУобичајено Апликација;

Тхе Анимирај компонента бледи у елементу див. Почиње непрозирношћу од 0 и завршава се непрозирношћу од 1. Репродукција је постављена на труе, што ће узроковати да се анимација аутоматски репродукује када се компонента монтира.

Тхе АниматеКеифрамес компонента анимира див елемент током две секунде. Низ кључних кадрова специфицира почетно и крајње стање анимације. Први кључни кадар има непрозирност од 0 и транслатеКс вредност од -100пк. Други кључни кадар има непрозирност 1 и транслатеКс вредност од 0пк.

Повећајте ангажовање корисника помоћу анимација

Сада знате неке од начина на које можете користити анимације у вашој Реацт апликацији. Можете да користите анимације да повећате ангажовање корисника са вашом апликацијом.

На пример, можда ћете желети да користите анимацију да наградите корисника за извршење задатка. Ово може бити нешто тако једноставно као што је кратка анимација „спинер“ или сложенија анимација која се репродукује када корисник заврши ниво у игрици.

Такође можете бесплатно да примените своју Реацт апликацију на вебу помоћу услуга као што су Гитхуб странице или Хероку.