بیاموزید که چگونه اجزای خود را در React Native به روشی آسان و بهتر متحرک کنید.
انیمیشن‌ها می‌توانند به یک اپلیکیشن جان بدهند و آن را برای کاربر جذاب‌تر و شهودی‌تر کنند. اما اگر با انیمیشن های React Native تازه کار هستید، شروع به کار می تواند کمی دلهره آور باشد.
انیمیشن های React Native را کاوش کنید و دریابید که چگونه می توانید شروع به ایجاد انیمیشن های زیبا و روان کنید.
انیمیشن های بومی Basic React چگونه کار می کنند؟
انیمیشن ها می توانند انتقال صاف بین صفحه نمایش ها یا عناصر مختلف ایجاد کنند. آنها می توانند اطلاعات را برجسته کنند یا در مورد اقدامات کاربر بازخورد ارائه دهند. انیمیشن ها می توانند ساده یا پیچیده باشند و می توانند از تکنیک های مختلفی مانند موشن گرافیک دو بعدی یا سه بعدی استفاده کنند.
قابل حمل بودن React Native باعث می شود اگر چندین پلتفرم را هدف قرار دهید، ارزش استفاده از آن را داشته باشد. یکی از قوی ترین ویژگی های آن امکان ساخت انیمیشن های زیبا برای اپلیکیشن های موبایل است.
شما می توانید یک شی React Native را به سادگی با تغییر وضعیت موقعیت کامپوننت مورد نظر متحرک کنید.
مثلا:
import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
const App = () => {
// Initialize state to track the box position
const [boxPosition, setBoxPosition] = useState(0);
// Use the useEffect hook to update the box position every 1 second
useEffect(() => {
const interval = setInterval(() => {
// Update the box position by adding 10 to the current position
setBoxPosition(prevPosition => prevPosition + 10);
}, 1000);
// Return a cleanup function to clear the interval when the component
// unmounts
return () => clearInterval(interval);
}, []);
// Set the box position using the state variable in the inline style
const boxStyle = {
transform: [{ translateY: boxPosition }]
};
return (
<View style={styles.container}>
<View style={[styles.box, boxStyle]} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: 100,
height: 100,
backgroundColor: 'blue',
},
});
export default App;
این کد یک کادر آبی را نمایش می دهد که هر ثانیه به سمت پایین حرکت می کند. این انیمیشن با استفاده از قلاب useEffect برای ایجاد یک تایمر کار می کند که متغیر وضعیت boxPosition را هر 1 ثانیه به روز می کند.
در حالی که این ممکن است در برخی شرایط کار کند، این بهترین گزینه برای استفاده نیست. به‌روزرسانی‌های حالت در React Native به‌صورت ناهمزمان کار می‌کنند، اما انیمیشن‌ها برای درست کار کردن به به‌روزرسانی‌های حالت همزمان متکی هستند. اجرای ناهمزمان انیمیشن شما باعث می‌شود که به‌روزرسانی‌های حالت فوراً در خروجی رندر شده کامپوننت منعکس نشود و زمان انیمیشن‌های شما را به هم بزند.
آنها چندین کتابخانه انیمیشن مانند کتابخانه Animated، react-native-reanimated و react-native-animable برای ساخت انیمیشن های پرفورمنس در React Native هستند. هر یک از این کتابخانه های انیمیشن مشکل به روز رسانی حالت ناهمزمان را برطرف می کند و کاملا ایده آل است.
React Native Animated API
Animated یک API است که React Native ارائه می کند. می توانید از آن برای ایجاد انیمیشن های روان که به تعاملات کاربر یا تغییرات حالت پاسخ می دهند استفاده کنید.
Animated API به شما امکان می دهد مقادیر متحرکی را ایجاد کنید که می توانید آنها را درون یابی کنید و به ویژگی های سبک مختلف اجزای خود نگاشت کنید. سپس می توانید این مقادیر را در طول زمان با استفاده از روش های مختلف انیمیشن به روز کنید. سپس با تغییر مقادیر متحرک، سبک‌های اجزای شما به‌روزرسانی می‌شوند و در نتیجه انیمیشن‌های نرمی ایجاد می‌شوند.
انیمیشن بسیار خوب با سیستم چیدمان React Native کار می کند. به همین دلیل، انیمیشن های شما به درستی با بقیه UI شما ادغام می شوند تا ظاهری حتی بهتر داشته باشند.
برای شروع استفاده از Animated در پروژه React Native خود، باید ماژول Animated را از “react-native” به کد خود وارد کنید:
import { Animated } from 'react-native';
با Imported Animated، می توانید شروع به ایجاد انیمیشن کنید. برای انجام این کار، ابتدا یک مقدار متحرک ایجاد کنید که در طول انیمیشن دستکاری کنید:
const animatedValue = new Animated.Value(0);
Animated.Value یک کلاس در React Native Animated API است که یک مقدار قابل تغییر را نشان می دهد. می‌توانید آن را با مقدار اولیه مقداردهی اولیه کنید، و سپس با استفاده از روش‌های مختلف انیمیشن ارائه شده توسط API متحرک، مانند .timing()، .spring() و .decay()، با مشخص کردن مدت زمان انیمیشن، تابع easing، آن را به‌روزرسانی کنید. و سایر پارامترها
مقدار متحرک مشابه یک مقدار حالت در یک جزء React است.
می توانید یک Animated.Value را با مقدار حالت اولیه یک جزء مقداردهی اولیه کنید و سپس با استفاده از متد setState در طول زمان آن را به روز کنید.
به عنوان مثال، شما مؤلفه‌ای دارید که دارای یک شمارش مقدار حالت است، که نشان‌دهنده تعداد دفعاتی است که کاربر روی آن دکمه کلیک کرده است.
می توانید یک Animated.Value ایجاد کنید و آن را با مقدار حالت اولیه count مقداردهی کنید:
const App = () => {
const [count, setCount] = useState(0);
const animatedValue = new Animated.Value(count);
};
سپس، هر زمان که مقدار حالت شمارش به‌روزرسانی شد، می‌توانید animatedValue را نیز به‌روزرسانی کنید:
const handlebuttonClick = () => {
setCounter(count + 1);
Animated.timing(animatedValue, {
toValue: count + 1,
duration: 500,
useNativeDriver: true
}).start();
};
این مثال هر زمان که کاربر روی دکمه کلیک کند، animatedValue را با استفاده از متد ()Animated.timing به روز می کند. animatedValue انیمیشن را هدایت می کند و مقدار آن را بیش از 500 میلی ثانیه تغییر می دهد.
با ربط دادن Animated.Value به یک مقدار حالت از این طریق، می‌توانید انیمیشن‌هایی ایجاد کنید که به تغییرات حالت جزء شما پاسخ می‌دهند.
اکنون می‌دانید که چگونه یک مقدار متحرک را دستکاری کنید، سپس می‌توانید به Interpolate مقدار متحرک بروید و با استفاده از متد Animated.interpolate() آن را به یک ویژگی سبک از مؤلفه خود نگاشت کنید.
مثلا:
const opacity = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 1]
});
return (
<View style={{ opacity }}>
{/* your component content */}
</View>
);
این یک انیمیشن ایجاد می کند که با تغییر مقدار متحرک از 0 به 1، به تدریج در مؤلفه View محو می شود.
آشنایی با انواع انیمیشن
درک انواع انیمیشن و نحوه عملکرد آنها برای ایجاد انیمیشن های خوب مهم است.
استفاده از گزینه useNativeDriver با Animated عملکرد را بهبود می بخشد. این گزینه به شما امکان می‌دهد انیمیشن‌ها را در رشته رابط کاربری داخلی بارگذاری کنید. می تواند با کاهش میزان پردازش جاوا اسکریپت مورد نیاز، عملکرد را به میزان قابل توجهی بهبود بخشد.
با این حال، همه انواع انیمیشن از درایور بومی پشتیبانی نمی کنند. تلاش برای استفاده از درایور بومی با انیمیشن‌هایی که شامل تغییرات رنگ یا طرح‌بندی هستند ممکن است باعث رفتار غیرمنتظره شود.
علاوه بر این، انیمیشن‌هایی که شامل توالی‌های پیچیده هستند می‌توانند باعث مشکلات عملکردی قابل توجهی در دستگاه‌هایی با قدرت پردازش یا حافظه محدود شوند. اگر پروژه React Native شما نسخه پایین تری را اجرا کند که از موتور هرمس پشتیبانی نمی کند، ممکن است این کاستی های عملکرد نیز قابل توجه باشد.
درک نقاط قوت و محدودیت‌های انواع مختلف انیمیشن می‌تواند به شما در انتخاب رویکرد مناسب برای مورد استفاده خود کمک کند.
با انیمیشن های بومی React راحت باشید
انیمیشن ها ابزاری قدرتمند برای ایجاد رابط های کاربری جذاب و پویا در برنامه های React Native هستند. Animated API یک روش منعطف و کارآمد برای ایجاد انیمیشن های توالی ساده و پیچیده ارائه می دهد.
با این حال، مهم است که تأثیر عملکرد انیمیشن ها را در نظر بگیرید و رویکرد و کتابخانه مناسب را برای استفاده برای موقعیت خود انتخاب کنید.