استفاده از متد Animated.spring() برای انیمیشن های پویا در React Native

با این کتابخانه React و این نکات مفید، بر انیمیشن فنری مسلط شوید.

کتابخانه React Native Animated API می تواند به شما در ایجاد انیمیشن های پویا و روان با کمی تلاش کمک کند.

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

انیمیشن های پویا چیست؟

انیمیشن های پویا انیمیشن هایی هستند که در آن حرکات اشیاء متحرک از قبل برنامه ریزی نشده باشد. می توانید آنها را در پاسخ به تعامل کاربر یا تغییرات در محیط شروع کنید. این تکنیک در انیمیشن بازی های ویدیویی، برنامه های کاربردی رسانه های اجتماعی یا سایر اشکال رسانه های تعاملی رایج است.

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

انیمیشن‌ها در اپلیکیشن‌های موبایل، در طول سال‌ها، پیچیده‌تر و پیچیده‌تر شده‌اند. API پیش‌فرض متحرک React Native برای سازگاری با این پیچیدگی‌ها پیشرفت کرده است. متد Animated.spring() که API ارائه می‌کند می‌تواند اشیاء React Native را متحرک کند و یک افکت پویا ایجاد کند.

کنترل انیمیشن

هنگام استفاده از متد ()Animated.spring، باید روی انیمیشن کنترل داشته باشید تا مطمئن شوید که آنطور که می خواهید رفتار می کند. Animated مجموعه ای از روش ها را برای کنترل و دستکاری دستی انیمیشن های React Native شما ارائه می دهد.

یکی از این روش ها stop() است که باعث می شود انیمیشن در مقدار فعلی خود متوقف شود. این روش زمانی مفید است که باید یک انیمیشن را لغو کنید یا آن را به حالت اولیه بازگردانید.

مثلا:

const stopAnimation = () => {
  position.stop(value => {
    position.setValue(0);
  });
};

توجه داشته باشید که چگونه می توانید از متد setValue() برای بازنشانی مقدار موقعیت به حالت اولیه 0 استفاده کنید.

روش دیگری که در دسترس شماست reset() است که انیمیشن را به حالت اولیه برمی گرداند. این روش زمانی مفید است که نیاز به راه اندازی مجدد یک انیمیشن دارید.

برنامه های کاربردی در دنیای واقعی

شما می توانید با ساخت یک انیمیشن ساده، استفاده عملی از متد Animated.spring() را کشف کنید. هنگامی که کاربر با آن برخورد می کند، یک توپ گرد به سطحی می افتد، سپس بلافاصله به هوا می پرد. از قبل باید یک پروژه react Native داشته باشید که بتوانید با آن کار کنید.

ابتدا یک متغیر حالت برای ردیابی موقعیت توپ ایجاد کنید:

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

const App = () => {
  const [position, setPosition] = useState(new Animated.Value(0));
  
  return (
    <Animated.View style={{ transform: [{ translateY: position }] }}>
      {/* Ball component here */}
    </Animated.View>
  );
};

از Animated.Value برای ایجاد یک متغیر حالت به نام موقعیت استفاده کنید که موقعیت عمودی توپ را ردیابی می کند. کامپوننت View را در Animated.View بپیچید تا بتوانید انیمیشن ها را روی آن اعمال کنید.

در مرحله بعد، تابع انیمیشن را ایجاد کنید که باعث می شود توپ بیفتد و به سمت بالا پرش کند:

const startAnimation = () => {
  Animated.spring(position, {
    toValue: 300,
    friction: 1,
    tension: 10,
    useNativeDriver: true,
  }).start(() => {
    Animated.spring(position, {
      toValue: 0,
      friction: 1,
      tension: 10,
      useNativeDriver: true,
    }).start();
  });
};

از Animated.spring() برای ایجاد انیمیشنی استفاده کنید که توپ را از موقعیت اولیه 0 به موقعیت نهایی 300 منتقل می کند. مقادیر اصطکاک و تنش را برای کنترل اثر پرش توپ مشخص کنید در حالی که برای بهبود عملکرد، useNativeDriver را روی true تنظیم کنید.

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

return (
  <TouchableWithoutFeedback onPress={startAnimation}>
    <Animated.View style={{ transform: [{ translateY: position }] }}>
      {/* Ball component here */}
    </Animated.View>
  </TouchableWithoutFeedback>
);

این کد مولفه Animated.View را در TouchableWithoutFeedback می‌پیچد تا زمانی که کاربر توپ را فشار می‌دهد، انیمیشن فعال شود. همچنین می توانید با فراخوانی تابع startAnimation() در داخل قلاب useEffect() React انیمیشن را فعال کنید.

با استفاده از این کد، شما باید یک انیمیشن در حال سقوط با استفاده از Animated.spring ایجاد کنید.

انیمیشن های پویا در React Native

نحوه پیاده‌سازی انیمیشن توپ در حال سقوط را با استفاده از Animated.spring() مشاهده کرده‌اید، اما راه‌های زیادی وجود دارد که می‌توانید از آن برای ایجاد انیمیشن‌های پویا استفاده کنید.

برای مثال، می‌توانید از Animated.spring() برای ایجاد انیمیشن‌هایی استفاده کنید که سایر حرکات مبتنی بر فیزیک را شبیه‌سازی می‌کنند، مانند چرخاندن یا چرخاندن اجسام.

با ترکیب Animated.spring() با سایر توابع انیمیشن، مانند Animated.timing() یا Animated.sequence()، می توانید انیمیشن های پیچیده و بدون درز ایجاد کنید که تجربه کاربر را بهبود می بخشد.

منبع مقاله