Направете вашето приложение React да оживее с анимации

Анимациите могат да бъдат чудесен начин за подобряване на потребителското изживяване на вашето React приложение. Те могат да помогнат за по-гладкото взаимодействие и могат също да осигурят визуална обратна връзка или да привлекат вниманието към определен елемент.

Има много начини, по които можете да работите с CSS анимации с помощта на React, от собствено решение до библиотеки на трети страни.

Защо да използвате анимации в React?

Има много причини, поради които може да искате да използвате анимации във вашето приложение React. Някои от най-честите причини включват:

• Направете взаимодействията по-естествени. Анимациите могат да помогнат за по-естественото и гладко взаимодействие на потребителя. Например, ако използвате компонент за превключване, може да искате да анимирате бутона за превключване между състоянията „включено“ и „изключено“. Друг пример са лентите за напредък, можете създайте анимирана лента за прогрес за страниците на вашето приложение React.
• Осигуряване на визуална обратна връзка
  instagram viewer
  . Анимациите могат да предоставят визуална обратна връзка на потребителя. Например, ако потребител щракне върху бутон, може да искате да анимирате бутона, за да посочите, че приложението е регистрирало това действие.
• Насочване на вниманието на потребителя. Анимациите могат да насочват вниманието на потребителя към определен елемент. Например, ако имате модален диалогов прозорец, който се появява на екрана, може да искате да използвате анимация, за да привлечете вниманието на потребителя към него.
• Създаване на чувство за неотложност.Анимациите могат да създадат усещане за неотложност или важност. Например, ако имате компонент на таймера, който отброява, може да искате да използвате анимация, за да отразите спешността, когато крайният срок наближава.

Има няколко начина за добавяне на анимации към компонентите на React. Трите, които ще научите как да използвате тук, са вградени анимации в стил, библиотеката react-animations и библиотеката react-simple-animate.

Започнете от създаване на основно приложение за реакция, след това следвайте метода по ваш избор.

Метод 1: Използване на анимации с вграден стил

Например, да приемем, че искате да анимирате компонент, така че да избледнява, когато щракнете върху бутон. Можете да направите това със следния код:

импортиране Реагирайте, {Component} от 'реагира';
класFadeInOutсе простираКомпонент{
конструктор(реквизити) {
супер(реквизит);
това.state = {
 isVisible: невярно
 };
 }
рендер() {
конст стилове = {
непрозрачност: това.състояние.isVisible? 1: 0,
 преход: 'непрозрачност 2s'
 };
връщане (
<див>
<div style={styles}>
 Здравей свят!
</div>
<бутон onClick={this.toggleVisibility}>
 Превключване
</button>
</div>
 );
 }
toggleVisibility = () => {
това.setState (prevState => ({
isVisible: !предишно състояние.isVisible
 }));
 }
}
износпо подразбиране FadeInOut;

В този пример стиловият обект има свойства на непрозрачност и преход. Непрозрачността е 0, когато компонентът не е видим, и 1, когато е видим. Свойството на прехода е „opacity 2s“, което ще доведе до преход на непрозрачността за две секунди, когато се промени.

Бутонът превключва видимостта на компонента. Когато някой щракне върху бутона, променливата на състоянието isVisible се актуализира и компонентът ще се появява или изчезва в зависимост от текущото му състояние.

Метод 2: Използване на библиотеката за реагиращи анимации

Друг начин за добавяне на анимации към компонентите на React е използването на библиотека като react-animations. Тази библиотека предоставя набор от предварително дефинирани анимации, които можете да използвате във вашите React компоненти.

За да използвате анимации за реакция, първо трябва да инсталирате библиотеката:

npm Инсталирай реагиращи анимации --спести

Трябва също така да инсталирате aphrodite, което е зависимост от анимациите за реакция:

npm Инсталирай афродита --спести

След като инсталирате библиотеките, можете да импортирате анимациите, които искате да използвате:

импортиране { fadeIn, fadeOut } от 'реагиране на анимации';

След това можете да използвате анимациите във вашите компоненти:

импортиране Реагирайте, {Component} от 'реагира';
импортиране { StyleSheet, css } от "афродита";
импортиране { fadeIn, fadeOut } от 'реагиране на анимации';
конст стилове = StyleSheet.create({
 избледнява: {
 animationName: fadeIn,
 анимацияПродължителност: '2s'
 },
 отминава: {
 animationName: fadeOut,
 анимацияПродължителност: '2s'
 }
});
класFadeInOutсе простираКомпонент{
конструктор(реквизити) {
супер(реквизит);
това.state = {
 isVisible: невярно
 };
 }
рендер() {
конст className = това.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);
връщане (
<див>
<div className={className}>
 Здравей свят!
</div>
<бутон onClick={this.toggleVisibility}>
 Превключване
</button>
</div>
 );
 }
toggleVisibility = () => {
това.setState (prevState => ({
isVisible: !предишно състояние.isVisible
 }));
 }
}
износпо подразбиране FadeInOut;

Този пример започва с импортиране на анимациите fadeIn и fadeOut от библиотеката react-animations. След това дефинира стилов обект с анимациите fadeIn и fadeOut и animationDuration, зададен на две секунди.

Бутонът ще превключва видимостта на компонента. Когато някой щракне върху него, променливата на състоянието isVisible ще се актуализира и компонентът ще се появява или изчезва в зависимост от текущото му състояние.

Метод 3: Използване на библиотеката react-simple-animate

Библиотеката react-simple-animate предоставя лесен начин за добавяне на анимации към компонентите на React. Той предлага декларативен API, който улеснява дефинирането на сложни анимации.

За да използвате библиотеката, първо трябва да я инсталирате:

npm Инсталирай реагират-прости-одушевени --спести

След това можете да го използвате във вашите компоненти:

импортиране Реагирайте, {Component} от 'реагира';
импортиране { Animate, AnimateKeyframes} от "реагиране-просто-анимиране";
класПриложениесе простираКомпонент{
 рендер() {
връщане (
<див>
<Анимирайте
 играя
започнете={{
 непрозрачност: 0
 }}
край={{
 непрозрачност: 1
 }}
>
<див>
 Здравей свят!
</div>
</Animate>
<AnimateKeyframes
 играя
 продължителност={2}
 ключови кадри={[
 { непрозрачност: 0, трансформация: 'translateX(-100px)' },
 { непрозрачност: 1, трансформация: 'translateX(0px)' }
 ]}
>
<див>
 Здравей свят!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
износпо подразбиране Приложение;

The Анимирайте компонент избледнява в елемент div. Започва с непрозрачност 0 и завършва с непрозрачност 1. Възпроизвеждането е зададено на true, което ще накара анимацията да се възпроизвежда автоматично, когато компонентът се монтира.

The AnimateKeyframes компонент анимира елемент div за две секунди. Масивът ключови кадри определя началното и крайното състояние на анимацията. Първият ключов кадър има непрозрачност 0 и стойност на translateX от -100px. Вторият ключов кадър има непрозрачност 1 и стойност на translateX 0px.

Увеличете ангажираността на потребителите с анимации

Сега знаете някои от начините, по които можете да използвате анимации във вашето приложение React. Можете да използвате анимации, за да увеличите ангажираността на потребителите с вашето приложение.

Например, може да искате да използвате анимация, за да възнаградите потребителя за изпълнение на задача. Това може да е нещо толкова просто като кратка „въртяща се“ анимация или по-сложна анимация, която се възпроизвежда, когато потребителят завърши ниво в игра.

Можете също така да разположите приложението си React в мрежата безплатно с услуги като Github страници или Heroku.