چگونه انیمیشن های بومی با واکنش بهتر بسازیم

با این کتابخانه React Native، بازی انیمیشن خود را به سطح بعدی ببرید.

برنامه های موبایل اغلب از انیمیشن برای زنده کردن تجربه کاربر استفاده می کنند. اما ایجاد انیمیشن های با کیفیت بالا می تواند یک چالش باشد.

خوشبختانه، مفاهیم و تکنیک هایی وجود دارد که می توانید از آنها برای بهبود مهارت های انیمیشن خود استفاده کنید. سپس می‌توانید آن‌ها را برای ایجاد انیمیشن‌های بهتر و روان‌تر برای برنامه موبایل React Native بعدی خود اعمال کنید.

انیمیشن های بومی React

کتابخانه React Native Animated محبوب ترین راه برای ایجاد انیمیشن در برنامه React Native است.

درست مانند کتابخانه انیمیشن داخلی React، Animated API بخشی از کتابخانه متحرک مبتنی بر جاوا اسکریپت است. Animated مجموعه ای از کلاس ها و روش ها را ارائه می دهد که به شما امکان می دهد انیمیشن های روان و روان ایجاد کنید. چندین گزینه عالی دیگر برای ایجاد انیمیشن های React Native مانند Reanimated وجود دارد.

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

تنظیم مدت زمان انیمیشن

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

مدت زمان به مدت زمان لازم برای اجرای کامل یک انیمیشن اشاره دارد. به‌طور پیش‌فرض، انیمیشن‌ها در React Native دارای مدت زمان ۵۰۰ میلی‌ثانیه هستند، اما می‌توانید آن‌ها را طوری تنظیم کنید که سریع‌تر یا آهسته‌تر حرکت کنند.

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

با متد Animation.timing() می توانید یک انیمیشن زمان بندی شده سفارشی متناسب با نیاز خود ایجاد کنید.

در اینجا مثالی از نحوه افزودن مدت زمان سفارشی به یک انیمیشن محو ساده آورده شده است:

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

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

  React.useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 2000, // set custom duration
        useNativeDriver: true,
      }
    ).start();
  }, [fadeAnim]);

  return (
    <Animated.View
      style={{
        ...props.style,
        opacity: fadeAnim,
      }}
    >
      {props.children}
    </Animated.View>
  );
}

export default function App() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
      </FadeInView>
    </View>
  );
}

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

وقتی برای اولین بار در حال آزمایش هستید، سعی کنید با مدت زمان طولانی‌تری شروع کنید. مدت زمان طولانی‌تر به شما زمان بیشتری برای تنظیم عملکرد آسان‌سازی و اصلاح انیمیشن خود می‌دهد. وقتی از اثر کلی راضی بودید، همیشه می توانید مدت زمان را کوتاه کنید.

از توابع تسهیل کننده استفاده کنید

انیمیشن های ساده ممکن است سرعت ثابتی داشته باشند، اما تغییر سرعت می تواند جلوه های طبیعی بیشتری ایجاد کند. توابع کاهش سرعت تغییر یک انیمیشن را در طول زمان کنترل می کنند. آنها می توانند کاری کنند که انیمیشن های شما به آرامی شروع شود و سپس سرعت آن افزایش یابد. تنظیم سرعت های مختلف با پیشرفت انیمیشن می تواند یک انیمیشن روان و جذاب ایجاد کند.

به این مثال از استفاده از تابع easing توجه کنید:

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

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

  React.useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 2000,
        easing: Animated.easeOut, // use easing function here
        useNativeDriver: true,
      }
    ).start();
  }, [fadeAnim]);

  return (
    <Animated.View
      style={{
        ...props.style,
        opacity: fadeAnim,
      }}
    >
      {props.children}
    </Animated.View>
  );
}

export default function App() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fade In</Text>
      </FadeInView>
    </View>
  );
}

این کد از تابع Animated.easeOut برای کنترل میزان تغییر کدورت یک نمای متحرک استفاده می کند. متد Animated.timing() از تابع ease-out برای تغییر تدریجی شفافیت از 0 به 1 در مدت زمان دو ثانیه استفاده می کند تا انیمیشن با رسیدن به پایان خود کند به نظر برسد.

می‌توانید از انواع مختلفی از عملکردهای آسان‌سازی برای نرم‌تر جلوه دادن انیمیشن‌های خود استفاده کنید، از جمله ease-in، ease-out و ease-in-out.

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

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

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

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

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

به عنوان مثال، فرض کنید می خواهید یک مربع را از موقعیت شروع (0، 0) به موقعیت پایانی (100، 100) در مدت یک ثانیه متحرک کنید.

می توانید آرایه ای از فریم های کلیدی مانند زیر ایجاد کنید:

const keyframes = [
  { x: 0, y: 0 },
  { x: 50, y: 50 },
  { x: 100, y: 100 },
];

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

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

با شتاب سخت افزاری از دستگاه بهره ببرید

شتاب سخت افزاری می تواند ابزار قدرتمندی برای بهینه سازی عملکرد انیمیشن های React Native شما باشد. با استفاده از سخت‌افزار گرافیکی دستگاه، می‌توانید برخی از کارهای پردازشی را از CPU بارگیری کنید و به نوبه خود به انیمیشن‌های نرم‌تر و پاسخ‌گوتر برسید.

سپس GPU دستگاه به‌جای اینکه رشته جاوا اسکریپت مجبور به انجام این کار باشد، مقادیر و سبک‌های متحرک را به‌طور بومی پردازش می‌کند.

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

منبع مقاله