همه چیز درباره انیمیشن های طرح بندی Framer Motion

admin1 روز پیش

0 1 خواندن این مطلب 15 دقیقه زمان میبرد

همه چیز درباره انیمیشن های طرح بندی Framer Motion

Framer Motion از آخرین باری که نوشتم تغییر زیادی کرده است. به قدری که اخیراً در تلاش برای ساختن بتنی کمی گم شدم انیمیشن چیدمان و پست وبلاگ خود من که در واقع به این نوع خاص از انیمیشن نگاه می کرد چندان مفید نبود. با وجود بخش به روز شده ای که در ماه نوامبر اضافه کردم، هنوز احساس می کردم که چند نکته را در این موضوع از دست داده ام و برخی از آنها ناقص هستند.

علاوه بر تغییرات API و بسیاری از ویژگی‌های جدید که تیم Framer به مجموعه پیرامون انیمیشن‌های چیدمان اضافه کرده است، متوجه شده‌ام که ترفندهای کوچک زیادی وجود دارد که می‌تواند باعث شود انیمیشن‌های چیدمان شما از احساس ناهنجاری به ✨کاملاً✨ تبدیل شوند. با این حال، آنها کمی پنهان هستند یا فاقد نمونه های عملی برای درک کامل آنها هستند.

بنابراین احساس کردم زمان نوشتن فرا رسیده است یک شیرجه عمیق ویژه به انواع مختلف انیمیشن های طرح بندی. هدف من این است که در مواقعی که به تجدید نظر در مورد انیمیشن های چیدمان نیاز دارید یا با مشکل مواجه هستید، این مقاله محل مراجعه شما باشد. من هم تعدادی از آنها را به شما می دهم نکات و ترفندهای خودم که من برای حل برخی از مشکلاتی که انیمیشن های چیدمان می توانند ایجاد کنند و مثال هایی از نحوه ترکیب آنها با ابزارهای دیگر در کتابخانه مانند AnimatePresence برای دستیابی به جلوه های کاملاً لذت بخش در پروژه های خود!

مبانی انیمیشن های چیدمان

قبل از اینکه به ویژگی‌های جدید و نمونه‌های پیچیده انیمیشن‌های چیدمان بپردازیم، بیایید نگاهی به اصول اولیه بیندازیم تا دوباره با نحوه کار آنها آشنا شویم.

تازه سازی مختصر انیمیشن های طرح بندی

در Framer Motion می توانید یک را متحرک کنید motion جزء بین تفاوت طرح بندی ها با تنظیم layout پشتیبانی از true. این منجر به چیزی می شود که ما الف می نامیم انیمیشن چیدمان.

ما نمی توانیم a را متحرک کنیم motion جزء بین طرح بندی با استفاده از ترکیبی از initial و animate مانند سایر انواع انیمیشن های Framer Motion. به همین دلیل ما نیاز دارند برای استفاده layout پشتیبانی کنید

در مثال زیر، اولین نمایش از یک انیمیشن چیدمان را خواهید دید:

می توانید موقعیت را تغییر دهید motion جزء، مربع، در امتداد محور x.
می توانید فعال یا غیرفعال کنید layout حمایت از این motion جزء

ما می توانیم ببینیم که هر بار که طرح را تغییر می دهیم یعنی. رندر مجدد رخ می دهد، layout prop کامپوننت را فعال می کند برای انتقال صاف از چیدمان قبلی به طرح جدید انتخاب شده. با این حال، بدون آن، هیچ انتقالی وجود ندارد: مربع به شدت حرکت خواهد کرد.

انیمیشن های چیدمان “چیزها را صاف می کنند” و سطح خاصی از فیزیکی را به برخی از تعاملات کاربر اضافه می کنند که در آن چیزها معمولاً به طور ناگهانی تغییر می کنند. یکی از مثال‌هایی که می‌توانند در آن بدرخشند، زمانی است که آیتم‌ها را از فهرست اضافه یا حذف می‌کنید. من تمایل دارم از انیمیشن های طرح بندی زیادی برای موارد استفاده مانند این استفاده کنم، به خصوص در ترکیب با سایر ویژگی های Framer Motion مانند AnimatePresence.

زمین بازی زیر یکی از زمین های بازی من را نشان می دهد NotificationList مؤلفه ای که از انیمیشن های طرح بندی استفاده می کند:

هر اعلان در یک بسته بندی شده است motion جزء با layout پایه تنظیم شده به true.
لیست کلی پیچیده شده است AnimatePresence بنابراین به هر عنصر در لیست اجازه می دهد که داشته باشد exit انیمیشن
با کلیک بر روی هر یک از اعلان‌های موجود در لیست، آنها حذف می‌شوند و به لطف انیمیشن‌های طرح‌بندی، پشته به زیبایی خود را تغییر می‌دهد.

import { motion, AnimatePresence } from 'framer-motion';
import React from 'react';
import { Wrapper, Toast } from './Components';
import './scene.css';

const ITEMS = ['Welcome 👋', 'An error occurred 💥', 'You did it 🎉!', 'Success ✅', 'Warning ⚠️'];

const Notifications = () => {
  const [notifications, setNotifications] = React.useState(ITEMS)

  return (
    Wrapper> 
      AnimatePresence>
        {notifications.map((item) => 
            motion.div
              key={item}
              onClick={() => setNotifications((prev) => prev.filter(notification => notification !== item))}
              layout
              initial={{
                y: 150,
                x: 0,
                opacity: 0,
              }} 
              animate={{
                y: 0,
                x: 0,
                opacity: 1,
              }}
              exit={{
                opacity: 0,
              }}
            >
              Toast>{item}Toast>
            motion.div> 
        )}   
      AnimatePresence>
    Wrapper>
  );
}

export default Notifications

اصلاح تحریفات

هنگام اجرای یک انیمیشن طرح‌بندی که بر اندازه یک مؤلفه تأثیر می‌گذارد، ممکن است در طول انتقال برای برخی ویژگی‌ها مانند borderRadius یا boxShadow. این اعوجاج ها حتی اگر این ویژگی ها بخشی از انیمیشن نباشند رخ خواهند داد.

خوشبختانه، یک راه حل آسان برای رفع این موارد وجود دارد: این ویژگی ها را به عنوان سبک های درون خطی تنظیم کنید، همانطور که در زیر نشان داده شده است:

10
.box[data-expanded="true"] {
19
  data-expanded={expanded}

اطلاعات بیشتر در مورد صفحه چیدمان

ما به تازگی این تنظیمات را دیدیم layout پشتیبانی از true ما را قادر می‌سازد تا با انتقال ویژگی‌های مربوط به اندازه یا موقعیت، یک مؤلفه را بین طرح‌بندی‌ها متحرک کنیم. من اخیراً متوجه شدم که ارزش‌های بیشتری از آن وجود دارد layout پشتیبانی ممکن است:

layout="position": ما فقط خواص مربوط به موقعیت را به آرامی پاس می کنیم. ویژگی های مربوط به اندازه به طور ناگهانی از بین می روند.
layout="size": ما فقط ویژگی های مربوط به اندازه را به آرامی انتخاب می کنیم. خواص مرتبط با موقعیت به طور ناگهانی عبور می کند.

برای نشان دادن این موضوع، ویجت زیر را ایجاد کردم که نحوه انتقال a را نشان می دهد motion مولفه بر اساس مقدار تغییر می کند layout پشتیبانی:

چرا باید از این دیگران استفاده کنیم layout خواص؟ فایده عملی چیست؟ ممکن است بپرسید گاهی اوقات، در نتیجه یک انیمیشن چیدمان، محتوای یک جزء تغییر اندازه ممکن است در نهایت “فشرده” یا “کشیده” شود. اگر هنگام کار بر روی یک انیمیشن چیدمان مشاهده کردید که این اتفاق می افتد، به احتمال زیاد می توان آن را به سادگی با تنظیم layout پشتیبانی از position.

در زیر نمونه ای از چنین موارد استفاده را خواهید دید:

حذف موارد در این لیست افقی بر اندازه هر جزء تأثیر می گذارد. به‌طور پیش‌فرض، متوجه خواهید شد که وقتی یک آیتم حذف می‌شود، اجزاء کمی خرد می‌شوند.
محتوا را در یک بپیچید motion جزء و تنظیم layout به position با چرخاندن سوئیچ هر گونه اعوجاجی که ممکن است در محتوای آن مشاهده کنید اصلاح می شود motion مسدود کردن هر جزء به زیبایی با موارد بیشتری تغییر اندازه می دهد به طور طبیعی انتقال

نمونه ای از استفاده عملی از layout=”position”

2
  Label variant="success">
7
        justifyContent: 'start',

طرح بندی مشترک و انیمیشن های LayoutGroup

این دو مفهوم احتمالاً همان چیزی است که من اخیراً با آنها مبارزه کرده ام:

آنها بر اساس نامشان به نظر نزدیک به هم هستند، اما اهداف و موارد استفاده بسیار متفاوتی دارند
تغییرات API زیادی در این زمینه وجود دارد. پس همه من یک فکر من تسلط پیدا کرده بودم که در واقع کاملاً جدید بود و کمی متفاوت بود

و می دانم که من تنها نیستم، من افراد زیادی را دیده ام که انیمیشن های چیدمان مشترک را به هم می ریزند و LayoutGroup

انیمیشن های چیدمان مشترک

ممکن است تصور شود که این یک نوع دیگر از انیمیشن های چیدمان است، همانطور که در قسمت قبل دیدیم، اما با پیچ و تاب. اشتباه نیست، اما کاملاً درست هم نیست.

انیمیشن های طرح بندی مشترک دارای API خاص خود هستند، که ارتباط مستقیمی با آن ندارند layout پشتیبانی به جای متحرک سازی موقعیت و اندازه یک کامپوننت، یک کامپوننت را بین تمام نمونه های آن متحرک می کنیم. layoutId پشتیبانی برای نشان دادن این مفهوم، بیایید به زمین بازی زیر نگاه کنیم:

import { motion } from 'framer-motion';
import React from 'react';
import { List, Item, ArrowIcon } from './Components';
import './scene.css';

const ITEMS = [1, 2, 3];

const SelectableList = () => {
  const [selected, setSelected] = React.useState(1);

  return (
    List>
      {ITEMS.map(item => (
        Item 
          onClick={() => setSelected(item)}  
          onKeyDown={(event: { key: string }) => event.key === 'Enter' ? setSelected(item) : null} 
          tabIndex={0}
        >
          
          div>Item {item}div>
          {item === selected ? 
            motion.div layoutId="arrow">
               ArrowIcon
                style={{
                  height: '24px',
                  color: '#5686F5',
                  transform: 'rotate(-90deg)',
                }}
               />
            motion.div> : null
          }
        Item>
      ))}
    List>
  )
}

export default SelectableList

در این مثال می بینیم که:

ما بین چندین نمونه سوئیچ می کنیم Arrow جزء
همه آنها یک چیز مشترک دارند layoutId که به Framer Motion می‌گوید که این مؤلفه‌ها به هم مرتبط هستند و وقتی کاربر روی عنصر جدیدی کلیک می‌کند باید از یک نمونه به نمونه «فعال» جدید تغییر کند.

را به اشتراک گذاشته شده است جنبه از تأثیر حرکت مؤلفه از یک موقعیت به موقعیت دیگر به عنوان یکسان است. و این چیزی است که من در مورد انیمیشن های طرح بندی مشترک دوست دارم. همه اش دود و آینه است. مثل یک ترفند جادویی 🪄!

“جادو” پشت آن در واقع بسیار ساده است:

در مثال بالا، وقتی روی یک مورد جدید کلیک می کنید، Arrow مؤلفه ای که روی صفحه نمایش داده می شود ناپدید می شود تا نمونه جدیدی از آن نشان داده شود Arrow جزء
این جدید Arrow موردی است که در نهایت در زیر آیتم تازه انتخاب شده ما در لیست قرار می گیرد
سپس این جزء به موقعیت نهایی خود می رود

برای نشان دادن این افکت، از نسخه ی نمایشی بالا استفاده مجدد کردم و به هر نمونه رنگ متفاوتی دادم Arrow بنابراین بهتر می توانید آنچه را که در حال وقوع است تجسم کنید:

اشکال زدای انیمیشن طرح بندی مشترک کوچک

یکی از اجزایی که دوست دارم با انیمیشن های چیدمان مشترک تزئین کنم این است Tabs. ما می‌توانیم از این نوع انیمیشن برای اضافه کردن انتقال‌های مناسب برای «نشانگر انتخاب‌شده» و همچنین برای «نور در حالت انتظار» استفاده کنیم، همانطور که Vercel به تنهایی انجام می‌دهد. Tabs جزء! در زیر نمونه ای از اجرای چنین کامپوننتی با این دو انیمیشن طرح بندی آورده شده است:

هنگامی که یک برگه جدید انتخاب می شود، می توانیم “نشانگر انتخاب شده” را ببینیم که از یک برگه به برگه دیگر حرکت می کند
“Hover Lighting” هنگام شناور کردن روی ماوس کاربر را دنبال می کند Tabs جزء
هر انیمیشن چیدمان مشترک طرح متفاوتی دارد layoutId پشتیبانی کنید: underline و highlight

import { motion } from 'framer-motion';
import React from 'react';
import { Wrapper, Tab } from './Components';
import './scene.css';

const Tabs = () => {
  const [focused, setFocused] = React.useState(null);
  const [selected, setSelected] = React.useState('Item 1');
  const tabs = ['Item 1', 'Item 2', 'Item 3'];

  return (
    Wrapper onMouseLeave={() => setFocused(null)}>
      {tabs.map((item) => (
        Tab
          key={item}
          onClick={() => setSelected(item)}
          onKeyDown={(event: { key: string }) =>
            event.key === 'Enter' ? setSelected(item) : null
          }
          onFocus={() => setFocused(item)}
          onMouseEnter={() => setFocused(item)}
          tabIndex={0}
        >
          span>{item}span>
          {focused === item ? (
            motion.div
              transition={{
                layout: {
                  duration: 0.2,
                  ease: 'easeOut',
                },
              }}
              style={{
                position: 'absolute',
                bottom: '-2px',
                left: '-10px',
                right: 0,
                width: '140%',
                height: '110%',
                background: '#23272F',
                borderRadius: '8px',
                zIndex: 0,
              }}
              layoutId="highlight"
            />
          ) : null}
          {selected === item ? (
            motion.div
              style={{
                position: 'absolute',
                bottom: '-10px',
                left: '0px',
                right: 0,
                height: '4px',
                background: '#5686F5',
                borderRadius: '8px',
                zIndex: 0,
              }}
              layoutId="underline"
            />
          ) : null}
        Tab>
      ))}
    Wrapper>
  );
}

export default Tabs;

با این حال، یک مشکل کوچک وجود دارد. اگر بخواهیم یک کامپوننت قابل استفاده مجدد ایجاد کنیم که یک انیمیشن طرح بندی مشترک تعریف شده باشد و دو بار در همان صفحه از آن استفاده کنیم؟ خوب، هر دو انیمیشن طرح بندی مشترک به ظاهر متفاوت در نهایت یکسان خواهند بود layoutId پشتیبانی، که منجر به کوچک شدن چیزها می شود عجیب:

اینجا کجاست LayoutGroup وارد عکس میشه👀.

LayoutGroup: مورد استفاده از فضای نام

برای این مورد استفاده می توانیم ببینیم LayoutGroup مانند ابزاری برای استفاده در انیمیشن های طرح بندی مشترک و همانطور که در ابتدا ممکن است به نظر برسد مستقیماً با آنها مرتبط نیستند.

این را در بالا دیدیم layoutId props را در نظر نمی گیرد که در کدام نمونه جزء استفاده می شود، به عنوان مثال. جهانی هستند. در این اولین مورد استفاده از آن استفاده خواهیم کرد فضای نام انیمیشن های چیدمان مشترک ما: به آنها یک ویژگی منحصر به فرد بدهید id بنابراین می‌توان آن‌ها را چندین بار رندر کرد و همچنان واضح رفتار کرد.

فضای نام چند نمونه از انیمیشن های طرح بندی مشترک با LayoutGroup

1
const ComponentsWithSharedLayoutAnimation = () => {
6
    motion.div layoutId="shared-layout-animation" />
14
      ComponentsWithSharedLayoutAnimation />
17
      ComponentsWithSharedLayoutAnimation />

با کمک LayoutGroup در مال ما Tabs پیاده سازی کامپوننت، اکنون می توانیم آن را به یک جزء قابل استفاده مجدد تبدیل کنیم و خطایی را که در قسمت قبل نشان دادیم دور بزنیم: انیمیشن‌های طرح‌بندی مشترک اکنون فقط در قالب خود به اشتراک گذاشته می‌شوند LayoutGroup.

1
const Tabs = ({ id }) => {
2
  const [focused, setFocused]
3
    = React.useState(null);
4
  const [selected, setSelected]
5
    = React.useState('Item 1');

LayoutGroup: مورد استفاده گروه بندی

طرح فضای نام مشترک تنها مورد استفاده برای آن نیست LayoutGroup. هدف اصلی آن در واقع این است که:

اجزای حرکتی را که نیاز به اجرای انیمیشن های چیدمان با هم دارند گروه بندی کنید.

اما این دقیقا به چه معناست؟

در قسمت اول دیدیم که انیمیشن layout یک کامپوننت را از یک طرح به دیگری منتقل می کند که رندر مجدد اتفاق بیفتد. این به خوبی برای همه چیز در داخل کار می کند motion جزء با layout تکیه گاه اما در مورد اجزای خواهر و برادر چطور؟

در نتیجه متحرک سازی طرح بندی یک جزء، ممکن است طرح کلی صفحه تحت تأثیر قرار گیرد. به عنوان مثال، هنگامی که یک مورد را از لیست حذف می کنید، تمام اجزای اطراف باید از طریق انتقال یا تغییر اندازه تطبیق داده شوند. مشکل اینجاست که هیچ راهی وجود ندارد که این اجزای دیگر همانطور که هست به راحتی پیش بروند زیرا:

آنها لزوما نیستند motion خود اجزاء
آنها دوباره رندر نمی شوند زیرا با آنها تعاملی نداشته اند
از آنجایی که آنها رندر نمی‌شوند، نمی‌توانند خود طرح‌بندی را متحرک کنند، حتی اگر یکی تعریف شده باشد.

این را می توان با پیچیدن هر یک از اجزای خواهر و برادر در یک حل کرد motion جزء با layout تنظیم شده به true (اگر خواهر و برادر نبودند motion خود مؤلفه ها قبلاً) و بسته بندی همه مؤلفه ها مایلیم زمانی که طرح کلی به LayoutGroup.

در ویجت کوچک زیر، من این را با رندر کردن دو نمونه از یک جزء لیست که هر عنصر در آن قرار دارد نشان می‌دهم motion جزء:

قهوه درست کن ☕️ لیست 1

به باشگاه بروید 🏃‍♂️ لیست 1

پست وبلاگ را تمام کنید ✍️ لیست 2

با Three.js ✨ تجربیات جدیدی ایجاد کنید لیست 2

افزودن اجزای جدید به سیستم طراحی 🌈 لیست 2

Try to remove an item from the first list and notice that the items within the first list perform a smooth layout animation and that the second list, however, moves abruptly
Toggle LayoutGroup wrapping on and notice that now when removing an item from the first list, the second list transition smoothly to its target position.

Drag-to-reorder items in a list where each item then smoothly moves to its final position is perhaps the best in class use case when it comes to layout animations. It's actually the first use case I thought about when I discovered layout animations in the first place a year ago.

Lucky us, the developers at Framer gave us a ready-to-use set of components to handle that specific use case with ease 🎉. They provided 2 components that we're going to use in follow-up examples:

Reorder.Group where we pass our list of items, the direction of the reorder (horizontal or vertical), and the onReorder callback which will return the latest order of the list
Reorder.Item where we pass the value of an item in the list

Simple examples of drag-to-reorder list using Reorder

2
  const [items, setItems] = React.useState(['Item 1', 'Item 2', 'Item 3']);
15
      {items.map((item) => (
17
        Reorder.Item key={item} value={item}>

تنها با چند خط کد، می‌توانیم یک لیست آماده برای استفاده با افکت کشیدن مرتب‌سازی مجدد دریافت کنیم! و این همه ماجرا نیست:

همه Reorder.Item جزء حرکت است
همه Reorder.Item جزء موجود در لیست می‌تواند، خارج از جعبه، انیمیشن‌های طرح‌بندی را انجام دهد

بنابراین، اضافه کردن انیمیشن های بسیار بیشتر در بالای این مؤلفه برای ایجاد یک تجربه کاربری واقعاً لذت بخش بسیار آسان است. با این حال، دو صید کوچک وجود دارد که من فقط در زمان شروع کار با آنها کشف کردم Reorder اجزاء 👇

هر دو Reorder.Group و Reorder.Item پشتیبانی کنید چند شکلی، یعنی به توسعه دهنده اجازه دهید تا تگ HTML اصلی را برای رندر انتخاب کند. با این حال، بر خلاف سایر کتابخانه هایی که از چند شکلی پشتیبانی می کنند، در اینجا می توانید فقط عناصر HTML را منتقل کنید.

2
Reorder.Group as="span" />
3
Reorder.Item as="div" />
4
Reorder.Item as="aside" />
7
Reorder.Group as={List} />
8
Reorder.Item as={Card} />

این پیشنهاد مؤلفه‌های سفارشی React را در زمان نوشتن این پست وبلاگ نمی‌پذیرد. خوشبختانه یک راه آسان برای انجام این کار وجود دارد. اگر سیستم کتابخانه/طراحی اجزای شما از چندشکلی پشتیبانی می کند، می توانید این محدودیت را به سادگی با عبور از خواسته ها برطرف کنید. Reorder جزء درون کامپوننت شما as پشتیبانی:

1
const Card = styled('div', {...});
6
Card as={Reorder.Item} />

ترکیب همه چیز

در زمین بازی زیر، نمونه پیشرفته تری را خواهید دید که از آن استفاده می کند Reorder.Group و Reorder.Item به همراه برخی از جنبه های دیگر انیمیشن های طرح بندی که قبلاً دیدیم:

وقتی کارتان تمام شد، موارد فهرست را بررسی کنید!

layout="position" بر روی محتوای هر عنصر استفاده می شود تا هنگام انتخاب و اجرای انیمیشن طرح بندی از تحریف جلوگیری شود.
استفاده از کامپوننت های سفارشی استایل React Reorder اجزای چند شکلی

8
  Card.Body as={motion.div} layout="position">
10
      id={`checkbox-${item.id}`}
11
      aria-label="Mark as done"
12
      checked={item.checked}
13
      onChange={() => completeItem(item.id)}

از سبک های درون خطی استفاده می شود borderRadius از مورد برای جلوگیری از اعوجاج هنگام تغییر اندازه مورد
position: relative به عنوان یک سبک درون خطی به اضافه شده است Reorder.Item برای رفع مشکلات همپوشانی که هنگام کشیدن موارد لیست روی یکدیگر رخ می دهد
AnimatePresence هنگامی که موارد از لیست حذف می شوند، برای فعال کردن انیمیشن های خروجی استفاده می شود

5
       exit={{ opacity: 0, transition: { duration: 0.2 } }}
12
          width: item.checked ? '70%' : '100%',

2
  Reorder.Group axis="y" values={items} onReorder={setItems}>
9
    span>Check items off the list when you're done!span>

آیا می خواهید این مثال را اجرا کنید و خودتان آن را هک کنید؟ می توانید اجرای کامل این مثال را در مخزن Github وبلاگ من بیابید.

اکنون تقریباً همه چیزهایی را که باید در مورد انیمیشن های طرح بندی Framer Motion بدانید، می دانید. خواه این موارد استفاده اولیه مانند لیست اعلان‌هایی باشد که در قسمت اول دیدیم، اضافه کردن جزئیات کوچک مانند انیمیشن‌های طرح‌بندی مشترک از اجزای برگه، برای ساخت لیست‌های قابل مرتب‌سازی مجدد با انتقال‌های پیچیده: انیمیشن های چیدمان دیگر هیچ رازی برای شما ندارند.

امیدوارم این پست وبلاگ بتواند به عنوان یک راهنما/کمک باشد تا انیمیشن های خود را کاملاً بی نقص جلوه دهد ✨ مخصوصاً زمانی که روی جزئیات دقیق تر انتقالات کار می کنید. ممکن است صرف زمان زیادی برای خواندن و کار کردن روی مشکلاتی که در این پست وبلاگ ارائه کرده ایم بسیار زیاد به نظر برسد، اما به من اعتماد کنید، ارزشش را دارد!

می خواهید بیشتر بروید؟

من پیشنهاد می کنم برخی از نمونه های پیچیده ارائه شده در مستندات Framer Motion را مشاهده کنید. تیم نمونه‌های خوب زیادی مانند این مؤلفه کشیدن و رها کردن برای مرتب‌سازی مجدد برگه‌ها ارائه کرد که شامل هر مفهومی است که در مثال فهرست کارهایی که در این پست وبلاگ ارائه کردم، استفاده شده است.
سپس سعی می کنم ببینم کجا می توانید جادوی انیمیشن چیدمان را روی پروژه های خود بپاشید. هیچ راهی برای یادگیری بهتر از این نیست که چیزها را خودتان بسازید!

Source link

admin1 روز پیش

0 1 خواندن این مطلب 15 دقیقه زمان میبرد

admin

نوشته های مشابه

آنچه بداهه نوازی جاز در مورد طراحی می آموزد

یک محیط تست صفحه خوان را در رایانه خود تنظیم کنید

12 سایت برای دانلود رایگان فیلم ها بدون کپی رایت

استفاده از عناصر جریان عمومی برای معرفی اجزای React عمومی

دیدگاهتان را بنویسید لغو پاسخ