برنامه React خود را با انیمیشن ها زنده کنید

با استفاده از انیمیشن های CSS، برنامه خود را با تغییراتی در سبک یا حرکات دیگر زنده کنید.

انیمیشن ها می توانند راهی عالی برای بهبود تجربه کاربری برنامه React شما باشند. آن‌ها می‌توانند به ایجاد احساس نرم‌تر تعامل کمک کنند، و همچنین می‌توانند بازخورد بصری ارائه دهند یا توجه را به یک عنصر خاص جلب کنند.

راه‌های زیادی وجود دارد که می‌توانید با استفاده از React با انیمیشن‌های CSS کار کنید، از راه‌حل‌های بومی گرفته تا کتابخانه‌های شخص ثالث.

چرا از انیمیشن ها در React استفاده کنیم؟

دلایل زیادی وجود دارد که ممکن است بخواهید از انیمیشن ها در برنامه React خود استفاده کنید. برخی از رایج ترین دلایل عبارتند از:

• ایجاد حس طبیعی تر تعاملات. انیمیشن ها می توانند به ایجاد حس طبیعی تر و روان تر تعامل کاربر کمک کنند. به عنوان مثال، اگر از یک مؤلفه جابه‌جایی استفاده می‌کنید، ممکن است بخواهید دکمه جابجایی را بین حالت‌های «روشن» و «خاموش» متحرک کنید. مثال دیگر نوارهای پیشرفت است، شما می توانید یک نوار پیشرفت متحرک برای صفحات برنامه react خود ایجاد کنید.
• ارائه بازخورد بصری انیمیشن ها می توانند بازخورد بصری را به کاربر ارائه دهند. برای مثال، اگر کاربری روی دکمه‌ای کلیک کند، ممکن است بخواهید آن دکمه را متحرک کنید تا نشان دهد که برنامه آن عملکرد را ثبت کرده است.
• هدایت توجه کاربر. انیمیشن ها می توانند توجه کاربر را به یک عنصر خاص هدایت کنند. به عنوان مثال، اگر یک گفتگوی مدال دارید که روی صفحه ظاهر می شود، ممکن است بخواهید از انیمیشن برای جلب توجه کاربر به آن استفاده کنید.
• ایجاد حس فوریت انیمیشن ها می توانند احساس فوریت یا اهمیت را ایجاد کنند. برای مثال، اگر یک جزء تایمر دارید که در حال شمارش معکوس است، ممکن است بخواهید از انیمیشن برای منعکس کردن فوریت با نزدیک شدن به مهلت استفاده کنید.

راه های مختلفی برای افزودن انیمیشن به اجزای React وجود دارد. سه موردی که در اینجا در مورد استفاده از آنها خواهید آموخت عبارتند از انیمیشن های سبک درون خطی، کتابخانه react-animations و کتابخانه react-simple-animate.

با ایجاد یک برنامه واکنش اولیه شروع کنید، سپس روش انتخابی خود را دنبال کنید.

روش 1: استفاده از انیمیشن های سبک درون خطی

برای مثال، فرض کنید می‌خواهید یک کامپوننت را متحرک کنید تا با کلیک روی یک دکمه، محو شود. با کد زیر می توانید این کار را انجام دهید:

import React, { Component } from'react';
 
classFadeInOutextendsComponent {
  constructor(props) {
    super(props);
 
    this.state = {
      isVisible: false
    };
  }
 
  render() {
    const styles = {
      opacity: this.state.isVisible ? 1 : 0,
      transition: 'opacity 2s'
    };
 
    return (
      <div>
        <divstyle={styles}>
          Hello, world!
        </div>
        <buttononClick={this.toggleVisibility}>
          Toggle
        </button>
      </div>
    );
  }
 
  toggleVisibility = () => {
    this.setState(prevState => ({
      isVisible: !prevState.isVisible
    }));
  }
}
 
exportdefault FadeInOut;

در این مثال، یک شیء سبک دارای ویژگی های کدورت و انتقال است. کدورت وقتی کامپوننت قابل مشاهده نیست 0 و وقتی کامپوننت قابل مشاهده است 1 است. خاصیت انتقال “Opacity 2s” است که باعث می شود تا زمانی که کدورت تغییر می کند، بیش از دو ثانیه تغییر کند.

دکمه دید جزء را تغییر می دهد. هنگامی که شخصی روی دکمه کلیک می کند، متغیر وضعیت isVisible به روز می شود و کامپوننت بسته به وضعیت فعلی خود محو می شود.

روش 2: استفاده از کتابخانه react-animations

راه دیگر برای افزودن انیمیشن به اجزای React استفاده از کتابخانه ای مانند react-animations است. این کتابخانه مجموعه ای از انیمیشن های از پیش تعریف شده را ارائه می دهد که می توانید در اجزای React خود از آنها استفاده کنید.

برای استفاده از react-animations، ابتدا باید کتابخانه را نصب کنید:

npm install react-animations --save

شما همچنین باید آفرودیت را نصب کنید، که وابسته به انیمیشن های واکنش است:

npm install aphrodite --save

هنگامی که کتابخانه ها را نصب کردید، می توانید انیمیشن هایی را که می خواهید استفاده کنید وارد کنید:

import { fadeIn, fadeOut } from'react-animations';

سپس، می توانید از انیمیشن های موجود در اجزای خود استفاده کنید:

import React, { Component } from'react';
import { StyleSheet, css } from'aphrodite';
import { fadeIn, fadeOut } from'react-animations';
 
const styles = StyleSheet.create({
  fadeIn: {
    animationName: fadeIn,
    animationDuration: '2s'
  },
  fadeOut: {
    animationName: fadeOut,
    animationDuration: '2s'
  }
});
 
classFadeInOutextendsComponent {
  constructor(props) {
    super(props);
 
    this.state = {
      isVisible: false
    };
  }
 
  render() {
    const className = this.state.isVisible ? css(styles.fadeIn) : css(styles.fadeOut);
 
    return (
      <div>
        <divclassName={className}>
          Hello, world!
        </div>
        <buttononClick={this.toggleVisibility}>
          Toggle
        </button>
      </div>
    );
  }
 
  toggleVisibility = () => {
    this.setState(prevState => ({
      isVisible: !prevState.isVisible
    }));
  }
}
 
exportdefault FadeInOut;

این مثال با وارد کردن انیمیشن‌های fadeIn و fadeOut از کتابخانه react-animations شروع می‌شود. سپس یک شی سبک را با انیمیشن های fadeIn و fadeOut تعریف می کند و animationDuration روی دو ثانیه تنظیم شده است.

دکمه نمایان بودن مؤلفه را تغییر می دهد. وقتی کسی روی آن کلیک می‌کند، متغیر isVisible state به‌روزرسانی می‌شود و کامپوننت بسته به وضعیت فعلی‌اش محو می‌شود.

روش 3: استفاده از کتابخانه react-simple-animate

کتابخانه react-simple-animate یک راه ساده برای افزودن انیمیشن به اجزای React ارائه می دهد. این یک API اعلامی ارائه می دهد که تعریف انیمیشن های پیچیده را آسان می کند.

برای استفاده از کتابخانه، ابتدا باید آن را نصب کنید:

npm install react-simple-animate --save

سپس، می توانید از آن در اجزای خود استفاده کنید:

import React, { Component } from'react';
import { Animate, AnimateKeyframes} from"react-simple-animate";
 
classAppextendsComponent {
  render() {
    return (
      <div>
        <Animate
          play
          start={{
            opacity: 0
          }}
          end={{
            opacity: 1
          }}
        >
          <div>
            Hello, world!
          </div>
        </Animate>
        <AnimateKeyframes
          play
          duration={2}
          keyframes={[
            { opacity: 0, transform: 'translateX(-100px)' },
            { opacity: 1, transform: 'translateX(0px)' }
          ]}
        >
          <div>
            Hello, world!
          </div>
        </AnimateKeyframes>
      </div>
    );
  }
}
 
exportdefault App;

مولفه Animate در یک عنصر div محو می شود. با کدورت 0 شروع می شود و با کدورت 1 به پایان می رسد. پایه پخش روی true تنظیم شده است، که باعث می شود انیمیشن به طور خودکار با مانت شدن کامپوننت پخش شود.

جزء AnimateKeyframes یک عنصر div را در مدت دو ثانیه متحرک می کند. آرایه فریم های کلیدی حالت شروع و پایان انیمیشن را مشخص می کند. اولین فریم کلیدی دارای کدورت 0 و مقدار translateX 100- پیکسل است. دومین فریم کلیدی دارای کدورت 1 و مقدار translateX 0 پیکسل است.

افزایش تعامل کاربر با انیمیشن ها

اکنون برخی از راه‌هایی را می‌شناسید که می‌توانید از انیمیشن‌ها در برنامه React خود استفاده کنید. می توانید از انیمیشن ها برای افزایش تعامل کاربران با برنامه خود استفاده کنید.

برای مثال، ممکن است بخواهید از انیمیشن برای پاداش دادن به کاربر برای تکمیل یک کار استفاده کنید. این می تواند چیزی به سادگی یک انیمیشن کوتاه “اسپینر” یا یک انیمیشن پیچیده تر باشد که وقتی کاربر یک سطح را در یک بازی کامل می کند پخش می شود.

همچنین می توانید برنامه React خود را به صورت رایگان با خدماتی مانند صفحات Github یا Heroku در وب مستقر کنید.

منبع مقاله