۵ کتابخانه انیمیشن ری اکت برای سال ۲۰۲۰ | فهرست کاربردی

انیمیشن‌ها در مواردی مانند گذار بین صفحه‌ها، رویدادهای اسکرول، در زمان ورود و خروج از کامپوننت‌ها و رویدادهایی که باید توجه کاربر را برانگیزند، حائز اهمیت هستند. در این مقاله به معرفی 5 کتابخانه انیمیشن ری اکت می‌پردازیم که می‌توان در ری‌اکت ادغام کرده و صفحه‌های وب تعاملی جذابی خلق نمود.

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

ساخت انیمیشن‌های شخصی و یا حتی ترکیب انیمیشن‌های مختلف از کتابخانه‌های موجود، مهارتی است که حتماً باید آن را داشته باشید. به این منظور لازم نیست یک پروژه کتابخانه کامپوننت داشته باشید. هر زمان که یک کامپوننت ایجاد می‌کنید تصور کنید که شما یا تیم‌تان ممکن است بخواهید آن را در آینده استفاده کنید، بنابراین آن را روی Bit.dev (+) منتشر کنید.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

زمانی که یک کامپوننت روی Bit.dev منتشر می‌شود، به صورت خودکار مستندسازی می‌شود. به علاوه می‌توانید قطعه کدهای نمونه خود را که برای شما رندر شده است روی صفحه کامپوننت اضافه کنید. این یک روش آسان برای ساخت تدریجی مجموعه کامپوننت‌های با قابلیت استفاده مجدد ری‌اکت است که قابل اشتراک‌گذاری باشد.

React Transition Group

کتابخانه React Transition Group (+) یک کتابخانه جامع انیمیشن با 7300 ستاره روی گیت‌هاب است. این کتابخانه چهار کامپوننت دارد که گذارها از یک حالت کامپوننت به حالت دیگر را با استفاده از یک API اعلانی نمایش می‌دهد:

1. Transition
2. CSSTransition
3. SwitchTransition
4. TransitionGroup

در ادامه شیوه استفاده از این کامپوننت‌ها را با ایجاد انواع گذارهای زیر بررسی می‌کنیم:

• entering
• entered
• exiting
• exited

برای استفاده از react-transition-group، آن را با استفاده از دستورهای npm یا yarn زیر نصب کنید:

npm install react-transition-group - save

yarn add react-transition-group

در ادامه کامپوننت Transition را از react-transition-group در فایل App.js ایمپورت می‌کنیم:

1import React, { Component } from "react";
2import "./styles.css";
3import { Transition } from "react-transition-group";
4 
5class App extends Component {
6  render() {
7    return (
8      <Transition timeout={4000} in={true} appear>
9        {status => (
10          <ul className={`box box-${status}`}>
11            <li> Animation </li>
12            <li> Transition </li>
13            <li> CSSTransition </li>
14            <li> SwitchTransition </li>
15            <li> TransitionGroup </li>
16          </ul>
17        )}
18      </Transition>
19    );
20  }
21}
22export default App;

با استفاده از یک timeout کامپوننت transition را تنظیم می‌کنیم و با تعیین مقدار true به آن امکان می‌دهیم که وارد مرحله enter شود. زمانی که کامپوننت کنونی از مرحله entered به مرحله entering تغییر یافته و دوباره به entered بازمی‌گردد، کلاس‌های CSS به نام‌های ‎.box-entered و ‎.box-entering برای ایجاد تغییرهای مناسب تعیین می‌شوند:

1.App {
2font-family: sans-serif;
3text-align: center;
4}
5.box {
6position: relative;
7}
8.box-entered {
9color: red;
10}
11.box-entering {
12animation-name: example;
13animation-duration: 4s;
14}
15@keyframes example {
160% {
17color: red;
18left: 0px;
19top: 0px;
20}
2125% {
22color: yellow;
23left: 200px;
24top: 0px;
25}
2650% {
27color: blue;
28left: 200px;
29top: 200px;
30}
3175% {
32color: green;
33left: 0px;
34top: 200px;
35}
36100% {
37color: red;
38left: 0px;
39top: 0px;
40}
41}

کی‌فریم‌هایی که مشخصه‌هایی مانند postition و color را در طی گذار روان تعیین می‌کنند را تنظیم می‌کنیم:

React Awesome Reveal

این یک کامپوننت ری‌اکت (+) است که در تایپ ‌اسکریپت نوشته شده است و از React Awesome Reveal برای افزودن انیمیشن‌ها استفاده می‌کند. این API عنصر را در زمانی که در ویوپورت ظاهر می‌شود تشخیص می‌‌دهد. این API به صورت داخلی سرعت انیمیشن‌ها را با استفاده از Animation.css که از مزیت شتاب‌دهی سخت‌افزاری بهره‌مند است افزایش می‌دهد.

در ادامه مثالی از کامپوننت Slide را با استفاده از کتابخانه React Awesome Reveal می‌بینید. وابستگی React Awesome Reveal را به یکی از روش‌های زیر اضافه کنید:

npm install react-awesome-reveal –save

yarn add react-awesome-reveal

در ادامه کامپوننت Slide را از react-awesome-reveal ایمپورت می‌کنیم. این کامپوننت انیمیت‌شده محتوای شما را در زمان mount شدن کامپوننت‌ها به سمت داخل می‌لغزاند.

1import React, { Component } from "react";
2import "./styles.css";
3import { Slide } from "react-awesome-reveal";
4class ReactAwesomeReveal extends Component {
5  render() {
6    return (
7      <Slide triggerOnce>
8        <ul className={`box box-${status}`}>
9          <li> Slide </li>
10          <li> Cascade </li>
11          <li> Damping </li>
12          <li> Direction </li>
13          <li> Delay </li>
14        </ul>
15      </Slide>
16    );
17  }
18}
19 
20export default ReactAwesomeReveal;

با استفاده از کامپوننت Slide روی محتوا می‌توان آن‌ها را به صورت یک‌باره انیمیت کرد.

جلوه‌های مختلف دیگری مانند cascade ،damping ،direction و duration نیز وجود دارند. این کتابخانه امکان ترکیب چند جلوه با هم را نیز فراهم می‌سازد. در ادامه مثال کوچکی از جلوه‌های ترکیبی را می‌بینید:

1import React, { Component } from "react";
2import "./styles.css";
3import { Fade, Bounce } from "react-awesome-reveal";
4 
5class ChainEffect extends Component {
6  render() {
7    return (
8      <Fade>
9        <p>Hello I will just Fade</p>
10        <Bounce>
11          <p> I will Fade and Bounce</p>
12        </Bounce>
13      </Fade>
14    );
15  }
16}
17export default ChainEffect;

Motion API

کتابخانه Motion API (+) یک API ژست ِانیمیشن ساده به صورت یک کتابخانه FrameX ارائه می‌کند و عناصر معناشناختی SVG و HTML را حفظ می‌کند. به این ترتیب می‌توان پروتوتایپ‌های با حجم بالای انیمیشن را به محیط آماده پروداکشن عرضه کرد. امکانات این کتابخانه به شرح زیر هستند:

فیلم آموزش پروژه محور ری اکت جی اس – ساخت To-Do List حرفه ای با React.js در فرادرس

کلیک کنید

1. انیمیشن: انیمیشن‌ها به طور خودکار با استفاده از یک prop انیمیشن انجام می‌شوند.
2. Gestures: ژست‌هایی مانند hover ،tag ،pan و drag پشتیبانی می‌شوند، زیرا سیستم رویداد React بسط یافته است.
3. Variant-ها: درختان فرعی با استفاده از یک prop منفرد animate انیمیت می‌شوند. همچنین این انیمیشن‌ها با گزینه‌هایی مانند when و staggerChildren هماهنگ‌سازی می‌شوند.
4. رندرینگ سمت سرور: رندرینگ سمت سرور با تخلیه محتوای استایل‌بندی‌شده مجدد ممکن است.
5. مقادیر Motion: از این مقدار برای ایجاد زنجیره‌های واکنشی از مقادیر motion جهت به‌روزرسانی در طی انیمیشن استفاده می‌شود.
6. انیمیشن‌های مبتنی بر اسکرول: Motion موجب می‌شود اجرای انیمیشن‌های مبتنی بر اسکرول یا پارالاکس آسان باشد.

Motion با React 16.8 و نسخه‌های بالاتر کار می‌کند. به این منظور باید framer-motion را با استفاده از npm نصب کنیم.

وب‌سایت رسمی آن (+) حاوی مثال‌های زیادی است. برای نمونه AnimateSharedLayout را بررسی می‌کنیم که امکان انیمیت کردن کامپوننت‌های مختلف با ID لی‌آوت مشترک را فراهم می‌سازد. با این که این کتابخانه در مرحله بتا است، می‌توانید آن را با دستور زیر نصب کنید:

npm install framer-motion@beta.

ابتدا داده‌هایی که باید نمایش یابند را ایجاد می‌کنیم:

1export const screens = [
2  {
3    title: "This",
4    color: "#ff0055"
5  },
6  {
7    title: "Motion",
8    color: "#0099ff"
9  },
10  {
11    title: "Is",
12    color: "#22cc88"
13  },
14  {
15    title: "Awesome",
16    color: "#ffaa00"
17  }
18];

داده‌های فوق را با استفاده از motion و AnimatedSharedLayout از کتابخانه framer-motion انیمیت می‌کنیم:

1import React from "react";
2import { useState } from "react";
3import { motion, AnimateSharedLayout } from "framer-motion";
4import { screens } from "./data";
5 
6export default function App() {
7  const [selected, setSelected] = useState(0);
8 
9  return (
10    <AnimateSharedLayout>
11      <ol style={{ transform: "translateZ(0)" }}>
12        {screens.map(({ title, color }, i) => (
13          <motion.li
14            animate
15            key={i}
16            className={`title ${i === selected && "selected"}`}
17            style={{ color: i === selected ? color : "#333" }}
18            onClick={() => setSelected(i)}
19          >
20            {i === selected && (
21              <motion.div
22                layoutId="underline"
23                className="underline"
24                style={{ backgroundColor: color }}
25              />
26            )}
27            {title}
28          </motion.li>
29        ))}
30      </ol>
31    </AnimateSharedLayout>
32  );
33}

‌CSS همراه با کامپوننت‌های motion، نقشی مهم در انیمیشن دارد. در این مقاله از این فایل CSS استفاده می‌کنیم:

1body {
2  padding: 0;
3  margin: 0;
4  background: #fdfdfd;
5  min-height: 100vh;
6  display: flex;
7  justify-content: center;
8  align-items: center;
9  overflow: hidden;
10}
11 
12* {
13  box-sizing: border-box;
14  font-family: Montserrat, sans-serif;
15  font-weight: 800;
16}
17 
18ol,
19li {
20  list-style: none;
21  padding: 0;
22  margin: 0;
23  user-select: none;
24}
25 
26ol {
27  display: flex;
28  justify-content: center;
29  align-items: center;
30}
31 
32.title {
33  font-size: 32px;
34  margin-left: 20px;
35  position: relative;
36  cursor: pointer;
37}
38 
39.title.selected {
40  font-size: 64px;
41}
42 
43.underline {
44  width: 100%;
45  height: 8px;
46  border-radius: 4px;
47  background: black;
48  position: absolute;
49  bottom: -4px;
50}

React Tweenful

کتابخانه React Tweenful انیمیشن‌های عملیاتی برای صفحه‌های وب می‌سازد. این کتابخانه از SVG برای اجرای انیمیشن برای شکل‌های مختلف، رنگ‌ها و اندازه‌های متنوع استفاده می‌کند. قابلیت‌های این کتابخانه به شرح زیر هستند:

1. تعریف حلقه: با این امکان می‌توان انیمیشن را برای تعداد مشخص یا بی‌نهایت بار اجرا کرد.
2. تکنیک‌های Easing: این تکنیک‌های انیمیشن کلاسیک از یک نقطه آغاز می‌شوند و روی یک سیر انحنای طبیعی اجرا می‌شوند. با این گزینه Easing از پیش‌تعریف‌شده‌ای دریافت می‌کنید. همچنین با استفاده از Bezier می‌توان easing-های سفارشی اجرا کرد.
3. انیمیشن‌های با تأخیر: امکان تعیین تأخیر برای آغاز و پایان انیمیشن وجود دارد. همچنین می‌توانید یک تأخیر برای انیمیشن‌ها و رویدادهای جاری تعیین کنید. به علاوه امکان ارائه یک تأخیر منفی برای تقلید از انیمیشن‌های CSS وجود دارد.
4. پشتیبانی از رویداد: این امکان پشتیبانی از رویداد برای مدیریت انیمیشن‌ها را فراهم می‌سازد.
5. انیمیت بر اساس درصد: امکان تعیین درصد برای انیمیشن‌های CSS را فراهم می‌‌سازد.
6. یک کامپوننت به نام Tweenful برای انیمیت DOM ارائه شده است. گره‌های DOM با استفاده از این کامپوننت به سادگی دست‌کاری می‌شوند.
7. انیمیت SVG: برای انیمیت کردن گره‌های ‌SVG یک کامپوننت خاص SVG ارائه شده است.
8. کامپوننت Observer: این کامپوننت از انیمیشن‌های Mount و Unmount شدن در زمان بارگذاری و حذف کامپوننت از حافظه پشتیبانی می‌کند.
9. مدیریت گذارهای فرزند در طی انیمیشن‌هایی مانند حذف لیست یا تغییر صفحه که نیازمند Observer است. کامپوننت ObserverGroup گذارهای فرزند را در طی انیمیشن مدیریت می‌کند.

در این بخش به بررسی مثالی از React Tweenful می‌پردازیم. ابتدا آن را با npm نصب می‌کنیم:

npm install react-tweenful

سپس پوشه zip را برای این ریپو (+) دانلود و نصب کرده و به پوشه src می‌رویم تا فایل کتابخانه مورد نیاز را به دست آوریم که در این مورد فایل Observer.js است. در ادامه آن را به صورت زیر ایمپورت می‌کنیم:

1import React, { useEffect, useState } from 'react';
2import Tweenful, { elastic } from '../node_modules/react-tweenful';
3import Observer from './Observer';

شیء prop-های زیر را برای پیکربندی انیمیشن اضافه می‌کنیم:

1const props = {
2  delay: 1000,
3  render: true,
4  duration: 1600,
5  easing: elastic(2, 0.1),
6  loop: false,
7  animate: { translateX: '400px' }
8};

اکنون کلاس خود را می‌نویسیم:

1const ObserverDemo = () => {
2  const [shouldRender, setShouldRender] = useState(true);
3  useEffect(() => {
4    setTimeout(() => setShouldRender(false), 3000);
5  }, []);
6  return (
7 
8  );
9};

این همان جایی است که شیئی که باید انیمیت شود را اضافه می‌کنیم. کامپوننت‌های Observer و Tweentiful.div درون گزاره return کلاس App ما قرار می‌گیرند:

1<Observer>
2      <div>
3        <Tweenful.div {...props}>
4	           ----Our animated ball is here-----
5<img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Basketball_Ball_Icon.png"></img>
6        </Tweenful.div>
7      </div>
8</Observer>

نتیجه کار به صورت زیر است:

React Motion

این (+) یک کتابخانه محبوب React است. انیمیشن‌های ایجاد شده با این کتابخانه طبیعی به نظر می‌رسد و از مفاهیم فیزیکی برای ایجاد حس واقع‌گرایانه استفاده می‌کند. دموی این کتابخانه مثال‌های مختلفی با سطوح متفاوت پیچیدگی ارائه می‌کند. این جامعه مجموعه بزرگی از مثال‌های زنده و دموهای بازی، انیمیشن‌ها، گذارها و رسم‌ها همراه با کانال‌ها و راهنماهای مختلف ارائه می‌کند.

کتابخانه React Motion جایگزینی برای کتابخانه react transition group است. API آن استفاده از مقادیر و مدت‌‌های هاردکدشده را برای انیمیشن‌ها ممنوع کرده است. هاردکد کردن مقادیر منجر به گذار هموار نمی‌شود. React Motion برای ایجاد انیمیشن‌های واقع‌گرایانه از مقادیر stiffness ،damping و precision در طی انیمیشن استفاده می‌کند. جلوه‌ها با استفاده از API زیر ساخته می‌شوند.

• Spring – Spring یک تابع است و انیمیشن مقدار مقصد را با تعیین stiffness و damping مقدار مفروض تعریف می‌کند. با بررسی دمو می‌توانید تأثیر stiffness و damping را بر حرکت Spring ببینید.
• Motion – برای این که هر کامپوننت را درون یک چیزی قرار دهید، باید آن را درون Motion بگذارید و prop-هایی مانند تابع‌های Spring و استایل‌بندی درون‌خطی برای انیمیت کردنش تعیین کنید.
• Staggered Motion – این کامپوننت مقدار میان‌یابی‌شده یک آیتم را بسته به مقدار آیتم‌های قبلی تعیین می‌کند. این حرکت برای انیمیشن منو استفاده می‌شود که در آن لینک‌ها نوسان پیدا می‌کنند، اما موقعیت به لینک‌های منوی قبلی وابسته است.
• Transition Motion – از این کامپوننت برای mount و unmount کردن آیتم‌ها استفاده می‌کنیم. برای نمونه اگر سه آیتم داشته باشید که بخواهید آیتم سوم را در زمان رندر شدن کامپوننت انیمیت کنید، می‌توانید از کامپوننت TransitonMotion با تعریف کردن کلید، داده‌ها و استایل مورد نیاز برای انیمیشن استفاده کنید.

در ادامه مثالی از کتابخانه React Motion را بررسی می‌کنیم. کار خود را با نصب کردن آن از طریق npm آغاز می‌کنیم:

npm install --save react-motion

ابتدا یک توپ ایجاد می‌کنیم که در زمان کلیک شدن شروع به لغزش می‌کند و دور می‌شود. به این منظور باید React Motion را از فایل App.js ایمپورت کنیم:

import {Motion, spring} from '../../src/react-motion';

اکنون CSS مربوط به انیمیشن خود را می‌نویسیم:

1.bowling-alley {
2border-radius: 0px;
3background-color: rgb(222, 184, 135);
4position: relative;
5width: 800px;
6height: 100px;
7}
8.ball {
9position: top;
10width: 100px;
11height: 100px;
12border-radius: 1000px;
13background-color: rgb(160, 15, 15);
14}

تابع‌های زیر را برای مدیریت آنچه که در زمان کلیک روی توپ رخ می‌دهد اضافه کنید:

1handleMouseDown = () => {
2  this.setState({click: !this.state.click});
3};
4handleTouchStart = (e) => {
5  e.preventDefault();
6  this.handleMouseDown();
7};

این کامپوننت Motion است و شیئی را که باید انیمیت شود، تعریف می‌کند. در این مورد این شیء تصویر یک توپ است.

1<Motion style={{d: spring(this.state.click ? 700 : 0)}}>
2  {({d}) =>
3    <div className="bowling-alley">
4      <div className="ball" style={{
5        webkitTransform: 'translate3d(${d}px, 0, 0)'
6      }}
7      onMouseDown={this.handleMouseDown}
8      onTouchStart={this.handleTouchStart}>
9      </div>
10
11    </div>
12  }
13</Motion>

نتیجه به صورت زیر است:

سخن پایانی

در این مقاله به بررسی پنج کتابخانه برای ایجاد انیمیشن و گذار برای وب‌سایت‌ها پرداختیم. هر کدام از این کتابخانه‌‌ها روش یکتایی برای ایجاد انیمیشن ارائه می‌کنند. اکنون همه کتابخانه‌ها با همه سناریو‌ها و الزامات به خوبی کار می‌کنند. بنابراین قبل از انتخاب هر کدام، باید دست‌کم برخی از آن‌ها را امتحان کنید.