برنامه React Native خود را با انیمیشن های خیره کننده LOTTIE تقویت کنید

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

لوتی چیست؟

LOTTIE کتابخانه ای برای ارائه انیمیشن ها در زمان واقعی با استفاده از پرونده های JSON است. این انیمیشن ها سبک ، مقیاس پذیر و آسان برای استفاده هستند و آنها را برای برنامه های تلفن همراه مناسب می کند. انیمیشن های LOTTIE مبتنی بر بردار هستند ، به این معنی که به هر رزولوشن تیز به نظر می رسند ، و اندازه پرونده های کوچک آنها باعث می شود آنها برای عملکرد ایده آل شوند.

چرا از LOTTIE در React Native استفاده می کنید؟

• 1 عملکرد صاف: انیمیشن های LOTTIE برای عملکرد موبایل بهینه شده و آنها را سریعتر از گزینه های دیگری مانند GIF می کند.
• 2 قابل تنظیم: شما می توانید بر اساس تعامل ، سرعت ، حلقه و انیمیشن ها را کنترل کنید.
• 3 اندازه پرونده های کوچک: انیمیشن های لوتی جمع و جور هستند و اندازه کلی برنامه را کاهش می دهند.

شروع با Lottie در React Native

مرحله 1: وابستگی ها را نصب کنید
برای استفاده از LOTTIE در برنامه React Native خود ، باید بسته Lottie-Reace-Native را نصب کنید.

npm install lottie-react-native

یا در صورت استفاده از نخ:

yarn add lottie-react-native

مرحله 2: پیوند ماژول های بومی (برای نسخه های قدیمی)
برای نسخه های بومی React زیر 0.60 ، ممکن است لازم باشد که بسته بندی را به صورت دستی پیوند دهید:

react-native link lottie-react-native

استفاده اساسی از لوتی در React Native
در اینجا چگونه می توانید یک انیمیشن اساسی LOTTIE را به برنامه React Native خود اضافه کنید:

مرحله 1: واردات Lottieview

import React from 'react';
import { View, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

const App = () => {
  return (
    
      
    
  );
};

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

export default App;

• source: به پرونده LOTTIE JSON اشاره می کند.
• autoPlay: به طور خودکار انیمیشن را شروع می کند.
• loop: انیمیشن را بی نهایت حلقه می کند.

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

بازی انیمیشن به صورت برنامه ای
اگر می خواهید وقتی انیمیشن بازی می کند ، کنترل کنید ، می توانید این کار را با استفاده از Ref انجام دهید:

import React, { useRef } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

const App = () => {
  const animation = useRef(null);

  return (
    
      
       animation.current.play()} />
    
  );
};

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

export default App;

بهینه سازی انیمیشن های لوتی برای عملکرد

1. اندازه پرونده انیمیشن را کاهش دهید
پرونده های بزرگ JSON می توانند بر عملکرد برنامه تأثیر منفی بگذارند. برای بهینه سازی و فشرده سازی پرونده های انیمیشن از ابزارهایی مانند BodyMovin استفاده کنید.

2. تعداد قاب را کاهش دهید
کاهش تعداد فریم های موجود در انیمیشن به کاهش مصرف حافظه کمک می کند و عملکرد را بهبود می بخشد ، به خصوص در دستگاه های سطح پایین.

3. از حالت رندر استفاده کنید
لوتی از دو حالت رندر پشتیبانی می کند: CPU و GPU. حالت GPU به طور کلی عملکرد بهتری را فراهم می کند اما ممکن است در همه دستگاه ها خوب کار نکند:

پایان

LOTTIE یک کتابخانه قدرتمند است که اضافه کردن انیمیشن های با کیفیت بالا به برنامه های بومی React شما را ساده می کند. با دنبال کردن مراحل موجود در این راهنما ، می توانید به راحتی انیمیشن های Lottie را ادغام کنید ، آنها را سفارشی کنید و عملکرد آنها را برای یک تجربه کاربر نرم تر بهینه کنید.

شروع به آزمایش با انیمیشن های مختلف و پیشرفت UI برنامه خود امروز!