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

از انیمیشن مداوم برای بهبود تجربه کاربری در برنامه React Native خود استفاده کنید و آن را جذاب تر و زنده تر کنید.

یکی از ویژگی های کلیدی React Native’s Animated API متد ()Animated.loop است که با استفاده از آن می توانید انیمیشن های پیوسته ای ایجاد کنید که به طور نامحدود تکرار می شوند.

ما نحوه استفاده از متد Animated.loop() برای ایجاد انیمیشن پیوسته در React Native را بررسی خواهیم کرد و نحوه سفارشی سازی و بهبود این انیمیشن ها را خواهیم آموخت.

آشنایی با متد () Animated.loop

برای استفاده از متد ()Animated.loop، ابتدا باید یک شی Animated.Value ایجاد کنید. این مقدار در هر فریم از حلقه انیمیشن به روز می شود و برای متحرک سازی جزء هدف استفاده می شود.

هنگامی که شی Animated.Value ایجاد شد، می توانید آن را به متد ()Animated.loop به همراه یک شی پیکربندی انیمیشن که رفتار انیمیشن را تعریف می کند، ارسال کنید.

این شیء پیکربندی می‌تواند شامل ویژگی‌هایی مانند مدت زمان، کاهش و تأخیر باشد که نحوه رفتار انیمیشن را تعیین می‌کند.

حلقه زدن انیمیشن شما

به طور پیش فرض، متد Animated.loop() یک حلقه بی نهایت از انیمیشن ایجاد می کند، به این معنی که انیمیشن تا زمانی که به صورت دستی متوقف شود به تکرار ادامه می دهد. با این حال، می‌توانید با تنظیم ویژگی iterations در شیء پیکربندی انیمیشن، مدت زمان حلقه انیمیشن را مشخص کنید.

مثال زیر که نحوه استفاده از Animation.loop() را برای ایجاد یک انیمیشن چرخشی حلقه ای نشان می دهد:

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Animated, Image } from 'react-native';

export default function App() {
 const [spinValue] = useState(new Animated.Value(0));

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

   Animated.loop(
     Animated.timing(
       spinValue,
       {
         toValue: 1,
         duration: 2000,
         useNativeDriver: true,
       }
     )
   ).start();
 }, []);

 return (
   <View style={styles.container}>
     <Animated.Image
       style={{ width: 200, height: 200, transform: [{ rotate: spinValue }] }}
       source={{ uri: 'https://reactjs.org/logo-og.png' }}
     />
   </View>
 );
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center',
 },
});

در این مثال، یک شی Animated.Value به نام spinValue ایجاد می کنیم و مقدار اولیه آن را 0 می کنیم. سپس متد loop() را روی شی Animated.timing() فراخوانی می کنیم که حالت spinValue را به عنوان آرگومان خود می گیرد. شی ()Animated.timing چگونگی پیشرفت انیمیشن را در طول زمان توضیح می دهد و در این حالت، یک تصویر را 360 درجه می چرخاند.

برای تنظیم مدت زمان حلقه، یک ویژگی duration به شی ()Animated.timing داده ایم، که تعیین می کند انیمیشن قبل از حلقه زدن چه مدت اجرا شود. ویژگی duration را روی 2000 قرار دادیم، یعنی 2 ثانیه قبل از راه اندازی مجدد.

همچنین می‌توانید تعداد دفعاتی را که انیمیشن باید حلقه بزند، با ارسال ویژگی iterations به متد loop() تعیین کنید.

به عنوان مثال، فرض کنید می خواهید انیمیشن قبل از توقف پنج بار حلقه بزند. در آن صورت، می‌توانید Animated.loop() را با تکرارها فراخوانی کنید: 5. اگر می‌خواهید انیمیشن به‌طور نامحدود حلقه بزند، می‌توانید ویژگی iterations را به طور کامل حذف کنید.

با استفاده از Animation.loop()، تنظیم مدت زمان آن، و اعمال سبک CSS به درستی بر روی شی نمایش برگشتی، می توانید انیمیشن های حلقه ای صاف در React Native ایجاد کنید.

کار با انیمیشن پیچیده

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

در اینجا دو نکته وجود دارد که هنگام حلقه زدن انیمیشن های پیچیده در React Native به شما کمک می کند:

1. انیمیشن را به قسمت های کوچکتر تقسیم کنید

می‌توانید انیمیشن‌های پیچیده را به انیمیشن‌های کوچک‌تر و ساده‌تر تقسیم کنید که می‌توان آنها را به صورت جداگانه حلقه کرد. به عنوان مثال، یک انیمیشن پیچیده که شامل چرخش و ترجمه است را می توان به دو انیمیشن جداگانه تقسیم کرد که به طور مستقل حلقه می شوند. با تقسیم کردن انیمیشن به بخش های کوچکتر، می توانید کد را ساده کرده و کار با آن را آسان تر کنید.

2. از متد Animated.sequence() استفاده کنید

متد Animated.sequence() به شما امکان می دهد دنباله ای از انیمیشن ها را یکی پس از دیگری اجرا کنید. این روش می تواند انیمیشن های حلقه ای پیچیده را با زنجیره زدن انیمیشن های تک حلقه ای ایجاد کند. می‌توانید از Animated.sequence() برای ایجاد یک انیمیشن استفاده کنید که ابتدا در یک تصویر محو می‌شود، آن را می‌چرخاند، و سپس محو می‌کند و یک‌بار تمام دنباله را تکرار می‌کند.

این نکات همراه با نکات کلی برای بهینه‌سازی برنامه‌های React Native به شما کمک می‌کند انیمیشن‌های حلقه‌ای عملکردی ایجاد کنید.

با انیمیشن خود آزمایش کنید

انیمیشن های لوپ شده در React Native می توانند ابزار قدرتمندی برای ایجاد یک تجربه کاربری جذاب تر و پویاتر باشند. شما باید تکنیک های مختلفی را برای ایجاد انیمیشن های حلقه ای آزمایش کنید تا به انیمیشن های جذاب بصری و اجرایی برسید.

منبع مقاله