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

چرا انیمیشن ها در React Native مهم هستند

انیمیشن ها بیشتر از آبنبات های چشم هستند.آنها قابلیت استفاده را با ارائه نشانه های بصری بهبود می دهند - مانند یک دکمه که فشار می آورد تا یک ضربه را تأیید کند، یا یک کارت کشویی برای نشان دادن محتوای جدید، آنها زمان بارگذاری درک شده را کاهش می دهند، و باعث می شود برنامه شما سریعتر احساس شود، انیمیشن ها برنامه شما را در یک بازار شلوغ جدا می کنند.

بنیادها: دو خانه ی انیمیشن

React Native دو سیستم انیمیشن ابتدایی را ارائه می دهد: API انیمیشن و کتابخانه مدرن تر Reanimated Library درک تفاوت های آنها برای انتخاب ابزار مناسب حیاتی است.

Animated API

در این میان، از جمله React Native، ، ، با استفاده از انیمیشن های روی رشته جاوا اسکریپت کار می کند، روش های غیر قابل مشاهده مانند ، و برای محو کردن ساده یا انتقال اسلاید، کاملاً مناسب است، زیرا انیمیشن های پیچیده یا مداوم (به عنوان مثال:A) می توانند به سادگی حرکت کنند.

کتابخانه Reanimated Library

Reanimated [نسخه ی ۲ یا ۳] انیمیشن های UI را از طریق worklets اجرا می کند، با استفاده از رشته ی جاوا اسکریپت به طور کامل، این باعث می شود آن را برای عملکرد بالا، حرکت و یا انیمیشن های زنجیره ای توصیه شده است.

تکنیک های انیمیشن ضروری

در زیر تکنیک های اثبات شده ای که می توانید امروز پیاده سازی کنید، هر کدام شامل توضیحات مختصر و بدون کد از الگوی حرکت هستند.

Fade In / Fade Out

تغییر در طول زمان ساده ترین راه برای نشان دادن یا پنهان کردن عناصر به طرز ماهرانه ای است. به یک نقطه (FLT:7) از 0 به 1 (یا برعکس) برای Reanimated، استفاده از و سبک متحرک. Fades برای modal overlay، ابزار یا بارگذاری تصویر عالی هستند.

۲) انتقال اسلاید

ترجمه یک جزء به صورت افقی یا عمودی برای ایجاد حرکت. [۱] یک عنصر در لبه احساس طبیعی می کند – فکر کردن به یک منوی کشو یا یک بنر اعلان. ترجمه را با توابع کاهش مانند برای تقلید حرکت فیزیکی برای عملکرد بهتر، استفاده از اموال و تنظیم (FLT 11) ترکیب کنید (با انیمیشن و Re انیمیشن).

۳- مقیاس و Bounce

عناصر مقیاس پذیری در تعامل کاربر (به عنوان مثال، مطبوعات دکمه) بازخورد لمسی را فراهم می کند. انیمیشن بهار یک "bounce" نور را می دهد که احساس ارگانیک بودن می کند.در Reanimated، به شما اجازه می دهد سفتی، مرطوب کردن و توده را تنظیم کنید تا اثرات پرش را به خوبی کنترل کنید.

۴- تنظیمات

چرخش یک آیکون یا تصویر برای نشان دادن پیشرفت یا تغییر حالت.یک اسپینر یک مثال کلاسیک است، اما چرخش همچنین می تواند برای کارت های تلنگر، گسترش فلش ها یا انیمیشن های بارگیری بازی استفاده شود. [FLT 13] برای نقشه برداری یک ارزش متحرک به یک محدوده چرخش (0-360 درجه).

۵- شکل های مورفین (Interpolation)

Interpolationation یک مفهوم قدرتمند است: آن را نقشه یک محدوده ورودی به محدوده خروجی.به عنوان مثال، یک موقعیت اسکرول می تواند یک اثر پارالکس، رنگ های تغییر یا عناصر اندازه.

الگوهای پیشرفته برای برنامه های حرفه ای

هنگامی که شما با تکنیک های اساسی راحت هستید، آنها را برای ایجاد تعاملات غنی ترکیب کنید.

زنجیره ای و توالی

پس از استفاده از آن، از طریق استفاده از آن استفاده کنید (FLT:15) یا با قرار دادن (FLT:16) و (Reanimated) این الگو برای جریان های ورودی، معرفی گام به گام، یا ورودی لیست روشن است.

انیمیشن های Parallel Animations

خواص متعدد در یک بار -شهر، مقیاس و ترجمه - استفاده از یا [FLT 19] در یک سبک متحرک واحد ایجاد می کند، این حرکت پیچیده و هماهنگ مانند یک کارت در حال گسترش در حالی که محو شدن در.

انیمیشن های Gesture-Driven Animations

[[رده:0]] و [[رده:]]، [[رده:رده:]] و [[رده:]]، [[رده:]] و [[رده:]] و [[رده:رده:]]، [[رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده:رده ها و یا در این کار با استفاده از این کار با استفاده از این کار و کار با استفاده از این کار و کار و کار و کار و در این کار با استفاده از آن ها و کار می کنند.

دانلود فیلم The Animations

[FLT:youtAnimation API به طور خودکار تغییر در طرح یک جزء (add، حذف، اندازه گیری) در حالی که محدود در سفارشی سازی، آن را یک راه صفر به صفر نیست برای اضافه کردن لهستانی، برای کنترل بیشتر، استفاده از Reanimateds (FLT:21 ترکیب شده با طرح دستی به صورت دستی.

انتقال عناصر مشترک

انتقال یک عنصر مشترک بین صفحه نمایش (به عنوان مثال، یک تصویر کوچک در حال گسترش به یک تصویر صفحه ای کامل) کتابخانه هایی مانند فعال- اشتراکی این منطق پیچیده را که آنها بر روی یک عنصر کپی و پایان دادن به یک عنصر و پایان دادن به یک عنصر کپی و یا پایان دادن به اشتراک گذاری تکیه می کنند.

کتابخانه های انیمیشن

به جای نوشتن همه چیز از ابتدا، این کتابخانه های محبوب را در نظر بگیرید:

  • – انیمیشن های پیچیده Render از After Effects به عنوان فایل های JSON صادر می شوند. Perfect for Complex, pre-design انیمیشن هایی مانند بارگذاری اسپینر، تصاویر یا میکرو-interactions.
  • - ساخته شده در بالای Reanimated، Moti یک API غیر قابل تنظیم برای الگوهای انیمیشن رایج (fade، اسلاید، مقیاس و غیره) با حداقل دیگ بخار است.
  • انیمیشن (React Native) – هنوز هم مفید برای اثرات سبک وزن که در آن Reanimated بیش از حد می کشد.

بهینه سازی نکات

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

  • از راننده بومی استفاده کنید، برای API متحرک، تنظیم کنید [FLT 25] یا [FLT 26] برای اجرای انیمیشن در رشته بومی است، نه همه خواص متحرک آن را پشتیبانی می کنند (واکنش، رنگ؛ خواص طرح نیست).
  • پیشفر Reanimated for Heavy Animations - Reanimated به طور کامل در رشته UI اجرا می شود، بنابراین از مسدود کردن موضوعات جاوا اسکریپت جلوگیری می کند.همیشه از Reanimated برای انیمیشن های متحرک یا مداوم استفاده کنید.
  • [[۱] [۱۰] [۱] [۱] [۱۰] [۱]] [۱]] [۱]] [۱] [۱]] [۱]] [۱]] [۱] [۱]] [۱]] [۱]] [۱]] [۱]] [۱]] [۱]] [۱] [۱]] [۱] [۱] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۱] [۳] [۳] [۱] [۳] [۳] [۳] [۳] [۱] [۱] [۱] [۳] [۳] [۳] [۳] [۳] [۱] [۳] [۱] [۳] [۳] [۱] [۱] [۳] [۳] [۳] [۱] [۳] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۳] [۳] [۱] [۱] [۳] [۳] [۳] [۱] [۱] [
  • Measure FPS - استفاده از مانیتور FPS React Native (دستگاهshake، کنترل Perf) یا کتابخانه ای مانند react-nactative-nactive-native performance برای شناسایی جکک.
  • [[۱] [۱۰] [۱۰] [۱۰] [۱]] [[۱]]] [[۱۰]]] [[۳]]] [[۱۰]]]] [[۳]]]] [۱۰]]] [۱۰]] [۱۰]] [۳]]] [بر [بر روی صفحه] حساب [بر روی] قرار دهید.

استفاده از پرونده های واقعی

برای مشاهده این تکنیک ها در عمل، برنامه هایی مانند را بررسی کنید (pull to-return, Heart Animation)، Airbnb [FLT3] (انتقالات پیچ و خم بین اقلام آنی)، و Headspace [FLT] [Fediting] همیشه با الگوی چرخش ظریف و چرخش است.

شروع کار با یک مثال ساده

اگر شما برای انیمیشن جدید هستید، با یک دکمه اصلی بازخورد مطبوعات شروع کنید.

import { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
// ... inside component
const scale = useSharedValue(1);
const animatedStyle = useAnimatedStyle(() => ({
 transform: [{ scale: scale.value }]
}));
// on touch start
scale.value = withSpring(0.95);
// on touch end
scale.value = withSpring(1);
// Apply animatedStyle to a component

این مثال حداقل بازخورد فوری را از اینجا ارائه می دهد: اضافه کردن ابهام، ترجمه یا زنجیرینگ.

نتیجه گیری

تسلط تکنیک های انیمیشن در React Native سرمایه گذاری است که در رتبه بندی کاربر و فروشگاه برنامه پرداخت می کند.با API انیمیشن برای موارد ساده شروع کنید، اما فارغ التحصیل به Reanimated به عنوان نیازهای شما رشد می کند. تکنیک های ترکیب مانند محو، اسلاید و مقیاس برای ایجاد تعاملات غنی از کتابخانه هایی مانند Lottie و Moti برای سرعت توسعه و همیشه اولویت عملکرد - انیمیشن انیمیشن انیمیشن های انیمیشنی و خلاقیت واقعی، اجازه می دهد تا از کتابخانه های حرفه ای و روشن شوند.

برای مطالعه بیشتر، با مستندات بومی مشورت کنید Reanimated docs و برای React Native Source این به شما تصویر کامل از نظریه پیشرفته پیاده سازی می دهد.