Animated API: ما هو، إمكانيات المكتبة ومبدأ العمل

ما هو Animated API في React Native

Animated API هي مكتبة رسوم متحركة تصريحية مدمجة في نواة React Native، مصممة لإنشاء رسوم متحركة سلسة وعالية الأداء في تطبيقات الجوال. على عكس رسوم CSS المتحركة في تطوير الويب، يعمل Animated API مباشرة مع خيط UI الأصلي عبر جسر JavaScript أو المشغل الأصلي. تم بناء المكتبة حول مفهوم Animated.Value — حاوية تخزن قيمة رقمية وتشترك تلقائيًا في جميع المكونات التابعة للتغييرات. عندما تتغير القيمة عبر Animated.timing أو Animated.spring، تحسب المكتبة الحالات الوسيطة دون إعادة عرض مكونات React، وهو أمر بالغ الأهمية للحفاظ على 60 إطارًا في الثانية. يدعم 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 رسومًا متحركة خطية أو بتسريع مع معلمات المدة والتأخير والتسريع. ينفذ spring رسومًا متحركة زنبركية فيزيائية مع معلمات الاحتكاك والتوتر والسرعة. ينشئ decay رسومًا متحركة مع القصور الذاتي والتخميد — مفيد للسحب والتمرير. تُرجع جميع الطرق كائن Animated.Composite يمكن تشغيله عبر start() وإيقافه عبر stop(). يتم تنفيذ الرسم المتحرك في خيط منفصل: عند استخدام useNativeDriver = true، تتم العمليات الحسابية في خيط UI الأصلي، ويظل خيط JavaScript حرًا لمعالجة الأحداث والمنطق.

Animated.timing: ضبط المدة والتسريع

Animated.timing هي طريقة الرسم المتحرك الأساسية بمدة محكومة. تقبل التكوين: toValue و duration (افتراضي 500 مللي ثانية) و easing (Easing.linear افتراضيًا) و delay. تتيح دوال التسريع من وحدة Easing تسريعًا غير خطي: Easing.bezier و Easing.elastic و Easing.bounce. للرسوم المتحركة بسرعة موحدة استخدم Easing.linear، للتسريع الطبيعي استخدم Easing.inOut. مهم: يضمن Animated.timing أن الرسم المتحرك سينتهي بالضبط عند toValue خلال الوقت المحدد، بغض النظر عن حمل الجهاز.

Animated.spring: رسوم متحركة فيزيائية

Animated.spring ينفذ نموذج رسم متحرك زنبركي استنادًا إلى قانون هوك. تتحكم معلمة friction (الاحتكاك) في عدد التذبذبات: كلما زاد الاحتكاك، زادت سرعة التوقف. تحدد معلمة 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')، ألوان ست عشرية ('#ff0000')، كائنات تحويل. يدعم الاستيفاء التسريع و 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 بتشغيل جميع الرسوم المتحركة في وقت واحد مع رد اتصال إكمال مشترك واحد. يقوم Animated.stagger بتشغيل الرسوم المتحركة مع تأخير بين بداية كل منها — مفيد لإنشاء تأثيرات موجية. يمكن تداخل التراكيب: تسلسل من مجموعات متوازية أو توازي من تسلسلات. يتيح ذلك إنشاء سلاسل معقدة: رسم متحرك لظهور العناصر مع تأخير، slide-in متوازي مع fade-in، ثم تسلسل من 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 هو خيار تكوين للرسوم المتحركة ينقل كل منطق الرسم المتحرك من خيط JavaScript إلى خيط UI الأصلي. بدون useNativeDriver، يتم تنفيذ الرسوم المتحركة عبر جسر JavaScript: يتم إرسال كل تغيير قيمة إلى الخيط الأصلي، مما يسبب تأخيرات عندما يكون خيط JS مشغولاً بالعمليات غير المتزامنة. مع useNativeDriver = true، يتم تحديث Animated.Value مباشرة على الجانب الأصلي، تاركًا خيط JavaScript حرًا لمعالجة الأحداث وطلبات API ومطابقة React. القيد: يدعم useNativeDriver فقط خصائص غير متعلقة بالتخطيط — opacity و transform و backgroundColor (عبر PlatformColor). بالنسبة لخصائص التخطيط (width، height، top، left)، يلزم NativeAnimatedModule أو LayoutAnimation. وفقًا لـ React Native 0.76، جميع الخصائص المتحركة مدعومة عبر المشغل الأصلي باستثناء تلك القائمة على التخطيط. يوصى باستخدام useNativeDriver لجميع الرسوم المتحركة حيثما أمكن — فهو يرفع FPS من 30-40 إلى 60 ثابتة.

الرسوم المتحركة بالإيماءات: PanResponder و Gesture Handler

PanResponder هو نظام مدمج في React Native لمعالجة الإيماءات يتكامل جيدًا مع Animated API. يوفر PanResponder استدعاءات onPanResponderMove و onPanResponderRelease حيث يمكن تحديث Animated.Value بناءً على موضع الإصبع. للإيماءات الأكثر تعقيدًا — swipe و pinch و rotation — استخدم مكتبة react-native-gesture-handler، التي تعمل بشكل متزامن مع الرسوم المتحركة وتوفر 60 إطارًا في الثانية حتى مع إيماءات متعددة الأصابع. يوفر Gesture Handler Animated.event — وهي طريقة تربط الإيماءة مباشرة بـ Animated.Value دون معالجة يدوية للاستدعاءات. الجمع بين Gesture Handler + Animated API هو المعيار الصناعي للرسوم المتحركة التفاعلية في تطبيقات React Native.

Animated.event: ربط الإيماءات بالقيم

Animated.event هي طريقة تربط حدثًا أصليًا (مثل gestureEvent) مباشرة بـ Animated.Value. على عكس المعالجة اليدوية في الاستدعاء، يعمل Animated.event بشكل متزامن في الخيط الأصلي ولا يتطلب جسر JavaScript لكل إطار. يوفر هذا رسومًا متحركة سلسة حتى أثناء السحبات السريعة. يقبل 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 المتحرك يخلق تأثير نبض طبيعي باستخدام نموذج زنبرك فيزيائي. إعدادات الاحتكاك المنخفض (2-4) والتوتر العالي (100-150) تعطي تذبذبات ناعمة تخمد بشكل طبيعي. استخدم Animated.loop لنبض لا نهائي مع دورة تسلسل: scale → 1.2، scale → 1.0. يُستخدم النبض لمؤشرات التحميل والإشعارات والأزرار البارزة.