Animated API: چیست، امکانات کتابخانه و اصل کار

Animated API در React Native چیست

Animated API یک کتابخانه انیمیشن اظهاری است که در هسته React Native تعبیه شده و برای ایجاد انیمیشن‌های روان و با عملکرد بالا در برنامه‌های موبایل طراحی شده است. برخلاف انیمیشن‌های CSS در توسعه وب، Animated API مستقیماً با نخ UI بومی از طریق پل جاوااسکریپت یا درایور بومی کار می‌کند. این کتابخانه حول مفهوم Animated.Value ساخته شده است — محفظه‌ای که مقدار عددی ذخیره می‌کند و به طور خودکار همه کامپوننت‌های وابسته را روی تغییرات مشترک می‌کند. هنگام تغییر مقدار از طریق Animated.timing یا Animated.spring، کتابخانه حالت‌های میانی را بدون رندر مجدد کامپوننت‌های React محاسبه می‌کند که برای حفظ 60 FPS حیاتی است. Animated API از تمام ویژگی‌های استایل از جمله transform، opacity، width، height، top، left و backgroundColor پشتیبانی می‌کند. مستندات React Native Animated API را برای همه سناریوهای انیمیشنی که نیاز به عملکرد بالا و رفتار قابل پیش‌بینی در هر دو پلتفرم دارند توصیه می‌کند.

Animated API چگونه کار می‌کند: Value، timing و spring

اساس Animated API Animated.Value است — محفظه مقدار عددی که از طریق سازنده new Animated.Value(0) مقداردهی اولیه می‌شود. هر Animated.Value یک عدد اولیه ذخیره می‌کند و روش‌های انیمیشن را فراهم می‌کند: timing، spring و decay. متد timing یک انیمیشن خطی یا با easing با پارامترهای duration، delay و easing ایجاد می‌کند. متد spring یک انیمیشن فنری فیزیکی با پارامترهای friction، tension و velocity پیاده‌سازی می‌کند. متد decay یک انیمیشن با اینرسی و میرایی ایجاد می‌کند — برای سوایپ و اسکرول مفید است. همه متدها یک شی Animated.Composite برمی‌گردانند که می‌توان آن را از طریق start() راه‌اندازی و از طریق stop() متوقف کرد. انیمیشن در یک نخ جداگانه اجرا می‌شود: هنگام استفاده از useNativeDriver = true، محاسبات در نخ UI بومی انجام می‌شود و نخ جاوااسکریپت برای پردازش رویدادها و منطق آزاد می‌ماند.

Animated.timing: تنظیم مدت و easing

Animated.timing یک متد پایه انیمیشن با مدت زمان قابل کنترل است. پیکربندی را می‌پذیرد: toValue، duration (پیش‌فرض 500ms)، easing (پیش‌فرض Easing.linear) و delay. توابع easing از ماژول Easing امکان شتاب غیرخطی را فراهم می‌کنند: Easing.bezier، Easing.elastic، Easing.bounce. برای انیمیشن با سرعت یکنواخت از Easing.linear، برای شتاب طبیعی از Easing.inOut استفاده کنید. مهم: Animated.timing تضمین می‌کند که انیمیشن دقیقاً در toValue در زمان مشخص شده، صرف‌نظر از بار دستگاه، به پایان می‌رسد.

Animated.spring: انیمیشن فیزیکی

Animated.spring یک مدل انیمیشن فنری بر اساس قانون هوک پیاده‌سازی می‌کند. پارامتر friction (اصطکاک) تعداد نوسانات را کنترل می‌کند: هرچه friction بالاتر باشد، توقف سریع‌تر است. پارامتر tension (کشش) سفتی فنر را تعیین می‌کند: tension بالا حرکت را تسریع می‌کند. پارامتر velocity سرعت اولیه را برای انیمیشن با اینرسی تعیین می‌کند — برای انیمیشن‌هایی که از ژست کاربر پیروی می‌کنند حیاتی است. Animated.spring مدت زمان ثابتی ندارد — انیمیشن زمانی به پایان می‌رسد که سرعت و دامنه به مقادیر آستانه برسند.

Animated.View، Animated.Text و سایر کامپوننت‌ها

Animated API چهار کامپوننت انیمیشنی داخلی فراهم می‌کند: Animated.View، Animated.Text، Animated.ScrollView و Animated.Image. هر کدام از آنها یک پوشش بر روی کامپوننت بومی مربوطه هستند که از انتقال Animated.Value در ویژگی‌های استایل پشتیبانی می‌کنند. Animated.View پرکاربردترین کامپوننت است که همان propsهای View معمولی را می‌پذیرد، اما با پشتیبانی از مقادیر انیمیشنی در style. Animated.Text برای انیمیشن رنگ متن یا فاصله بین حروف مفید است. Animated.ScrollView امکان انیمیشن scrollTo و contentOffset را فراهم می‌کند. Animated.Image از شفافیت و مقیاس انیمیشنی در هنگام بارگذاری تصاویر پشتیبانی می‌کند. اگر به انیمیشن کامپوننت دیگری نیاز دارید، از Animated.createAnimatedComponent(MyComponent) استفاده کنید.

import React from 'react';
import { Animated, View, Button } from 'react-native';

const FadeInView = () => {
  const opacity = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    View
      Animated.View { style: [{ opacity }] }
      Button title="Fade In" onPress={fadeIn}
  );
};

سیستم درون‌یابی: از اعداد به رنگ و تبدیل

درون‌یابی مکانیزمی برای تبدیل محدوده عددی ورودی Animated.Value به مقادیر خروجی از نوع دیگر است. متد interpolate پیکربندی با inputRange (آرایه مقادیر ورودی) و outputRange (آرایه مقادیر خروجی) دریافت می‌کند. انواع outputRange: اعداد (مختصات، شفافیت)، رشته‌ها (زاویه چرخش با 'deg')، رنگ‌های hex ('#ff0000')، اشیاء تبدیل. درون‌یابی از easing و extrapolate — رفتار خارج از محدوده تعیین شده (clamp، extend، identity) پشتیبانی می‌کند. به عنوان مثال، در ژست درگ می‌توان موقعیت انگشت را از 0 تا 200 به شفافیت از 1 تا 0 تبدیل کرد و اثر محو شدن در هنگام سوایپ ایجاد کرد. سیستم درون‌یابی امکان ایجاد انیمیشن‌های پیچیده چندمرحله‌ای را فراهم می‌کند: مقدار 0-0.5-1.0 می‌تواند به زرد-نارنجی-قرمز تبدیل شود.

const spinValue = new Animated.Value(0);

Animated.timing(spinValue, {
  toValue: 1,
  duration: 3000,
  easing: Easing.linear,
  useNativeDriver: true,
}).start();

const spin = spinValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});

ترکیب انیمیشن: توالی و موازی‌سازی

Animated API از سه حالت ترکیب انیمیشن پشتیبانی می‌کند: Animated.sequence، Animated.parallel و Animated.stagger. Animated.sequence انیمیشن‌ها را یکی پس از دیگری راه‌اندازی می‌کند: هر انیمیشن بعدی پس از پایان قبلی شروع می‌شود. Animated.parallel همه انیمیشن‌ها را همزمان با یک callback پایان مشترک راه‌اندازی می‌کند. Animated.stagger انیمیشن‌ها را با تأخیر بین شروع هر کدام راه‌اندازی می‌کند — شروع تأخیری، برای ایجاد اثرات موجی مفید است. ترکیب‌ها می‌توانند در یکدیگر تودرتو شوند: sequence از گروه‌های parallel یا parallel از sequence. این امکان ایجاد زنجیره‌های پیچیده را فراهم می‌کند: انیمیشن ظاهر شدن عناصر با تأخیر، slide-in موازی با fade-in، سپس sequence از bounce و shake.

Animated.sequence([
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 500,
    useNativeDriver: true,
  }),
  Animated.parallel([
    Animated.timing(scaleAnim, {
      toValue: 1.1,
      duration: 200,
      useNativeDriver: true,
    }),
    Animated.spring(colorAnim, {
      toValue: 1,
      friction: 4,
      useNativeDriver: true,
    }),
  ]),
]).start();

useNativeDriver و عملکرد انیمیشن

useNativeDriver گزینه پیکربندی انیمیشنی است که کل منطق انیمیشن را از نخ جاوااسکریپت به نخ UI بومی منتقل می‌کند. بدون useNativeDriver انیمیشن‌ها از طریق پل جاوااسکریپت اجرا می‌شوند: هر تغییر مقدار به نخ بومی ارسال می‌شود که در هنگام بارگذاری نخ JS با عملیات ناهمگام باعث تأخیر می‌شود. با useNativeDriver = true، Animated.Value مستقیماً در سمت بومی به‌روزرسانی می‌شود و نخ جاوااسکریپت برای پردازش رویدادها، درخواست‌های API و بازسازگاری React آزاد می‌ماند. محدودیت: useNativeDriver فقط از ویژگی‌های غیرlayout پشتیبانی می‌کند — opacity، transform، backgroundColor (از طریق PlatformColor). برای ویژگی‌های layout (width، height، top، left) به NativeAnimatedModule یا LayoutAnimation نیاز است. طبق React Native 0.76، تمام ویژگی‌های انیمیشنی به جز layout-based از طریق درایور بومی پشتیبانی می‌شوند. حالت useNativeDriver برای همه انیمیشن‌هایی که ممکن است توصیه می‌شود — این کار FPS را از 30-40 به 60 پایدار افزایش می‌دهد.

انیمیشن با ژست‌ها: PanResponder و Gesture Handler

PanResponder یک سیستم داخلی React Native برای پردازش ژست‌ها است که به خوبی با Animated API یکپارچه می‌شود. PanResponder callbackهای onPanResponderMove و onPanResponderRelease را فراهم می‌کند که در آنها می‌توان Animated.Value را بر اساس موقعیت انگشت به‌روزرسانی کرد. برای ژست‌های پیچیده‌تر — swipe، pinch، rotation — از کتابخانه react-native-gesture-handler استفاده کنید که به صورت همزمان با انیمیشن‌ها کار می‌کند و حتی با ژست‌های چندانگشتی 60 FPS را تضمین می‌کند. Gesture Handler Animated.event را فراهم می‌کند — متدی که ژست را مستقیماً بدون پردازش دستی callbackها به Animated.Value متصل می‌کند. ترکیب Gesture Handler + Animated API استاندارد صنعت برای انیمیشن‌های تعاملی در برنامه‌های React Native است.

Animated.event: اتصال ژست‌ها به مقادیر

Animated.event متدی است که رویداد بومی (مثلاً gestureEvent) را مستقیماً به Animated.Value متصل می‌کند. برخلاف پردازش دستی در callback، Animated.event به صورت همزمان در نخ بومی کار می‌کند و برای هر فریم به پل جاوااسکریپت نیاز ندارد. این کار انیمیشن روان را حتی در سوایپ‌های سریع تضمین می‌کند. Animated.event آرایه‌ای از نگاشت‌ها را می‌پذیرد که در آن هر عنصر فیلد رویداد را به Animated.Value متصل می‌کند. دسترسی تودرتو پشتیبانی می‌شود: Animated.event([{ nativeEvent: { translationX: xValue } }]).

نمونه کد با Animated API

سه مثال عملی استفاده از Animated API در پروژه‌های React Native را بررسی می‌کنیم. مثال اول — انیمیشن ظاهر شدن کارت با توالی opacity + translateY. مثال دوم — انیمیشن ضربان دکمه با استفاده از spring. مثال سوم — عنصر درگ تعاملی با PanResponder. همه مثال‌ها از useNativeDriver = true استفاده می‌کنند و با بهترین شیوه‌های React Native 0.76 مطابقت دارند.

const CardWithAnimation = () => {
  const anim = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.spring(anim, {
      toValue: 1,
      friction: 6,
      tension: 40,
      useNativeDriver: true,
    }).start();
  }, []);

  const translateY = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [50, 0],
  });

  return (
    Animated.View {
      style: [{ opacity: anim, transform: [{ translateY }] }]
    }
  );
};

انیمیشن ضربان از طریق spring

انیمیشن spring با استفاده از مدل فنری فیزیکی یک اثر ضربان طبیعی ایجاد می‌کند. تنظیم friction پایین (2-4) و tension بالا (100-150) نوسانات نرمی می‌دهد که به طور طبیعی محو می‌شوند. از Animated.loop برای ضربان بی‌نهایت با چرخه sequence استفاده کنید: scale → 1.2، scale → 1.0. ضربان برای نشانگرهای بارگذاری، اعلان‌ها و دکمه‌های تأکیدی استفاده می‌شود.