5 کتابخانه React native برای ساخت انیمیشن

انیمیشن ها تاثیر زیادی بر روی موبایل دارند و باعت ایجاد تجره کاربری در اپلیکیشن ها میشه که این مسئله باعث میشه کاربران بیشتر با اپلیکیشن شما درگیر باشند و از اون استفاده کنند.
از نظر فنی react native یک api قدرتمند برای ساخت animation دارد.با این حال ممکن است بخواهید بدون استفاده مستقیم از animation api انیمیشن هایه خودمونو بسازیم به همین جهت ما در این مقاله 5 کتابخانه برتر در این زمینه را به شما نشان میدیم:

1.react-native-animatable:

react-native-animatable یک کتابخانه ساده برای ساخت انیمیشن در React native است .این کابخانه api ساده ای دارد بنابر این میتوان خیلی ساده انیمیشن خود را روی اجزای صفحه پیاده کرد.

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

ابتدا این کتابخانه را نصب میکنیم:

npm install react-native-animatable –save

1	npm install react-native-animatable –save

و یک انیمیشن slideInDown ایجاد میکنیم

کد هایه ما به این صورت خواهد بود:

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Dimensions, TouchableOpacity, SafeAreaView, Animated, Easing } from "react-native";
import * as Animatable from "react-native-animatable";

export default class index extends Component {

  render() {
    return (
      <SafeAreaView style={styles.container}>
       
        <View style={{ alignItems: "center" }}>
          <Animatable.View style={styles.card} animation="slideInDown" iterationCount={5} direction="alternate">
            <Text style={styles.whiteText}>slideInDown Animation</Text>
          </Animatable.View>
        </View>
      </SafeAreaView>
    );
  }
}

import React, { Component } from "react";

import { Platform, StyleSheet, Text, View, Dimensions, TouchableOpacity, SafeAreaView, Animated, Easing } from "react-native";

import * as Animatable from "react-native-animatable";

export default class index extends Component {

render() {

return (

<Animatable.View style={styles.card} animation="slideInDown" iterationCount={5} direction="alternate">

<Text style={styles.whiteText}>slideInDown Animation</Text>

</Animatable.View>

</View>

</SafeAreaView>

);

}

ابتدا Animatable از کتابخانه react-native-animatable ایمپورت کردیم .سپس ما از کامپوننت Animatable خود استفاده میکنیم و آن را به کامپوننتی که میخواهیم انیمیشن داشته باشد میدهیم.

پراپس های این کتابخانه:

Animation: مقدار ورودی رشته و برای نمایش نوع انیمیشن استفاده میشود.

iteractionCount: از این پراپس برای نمایش تعداد دفعات اجرای انیمیشن استفاده میشود.(تعداد دفعات اجرا میتواند یک عدد یا مقدار infinite باشد)

direction: مشخص کردن جهت انیمیشن شامل مقادیر normal ,alternate-reverse ,reverse است.

ما همچنین میتونیم از پراپس های دیگه این کتابخانه هم استفاده کنیم مثل پراپس transition که برای نمایش پروپرتی style استفاده میشه. به مثال زیر توجه کنید:

<Animatable.View
            style={[
              styles.card,
              {
                opacity: this.state.opacity
              }
            ]}
            iterationCount="infinite"
            direction="reverse"
            transition="opacity"
          >
            <Text style={styles.whiteText}>slideInDown Animation</Text>
</Animatable.View>

<Animatable.View

style={[

styles.card,

{

opacity: this.state.opacity

}

]}

iterationCount="infinite"

direction="reverse"

transition="opacity"

<Text style={styles.whiteText}>slideInDown Animation</Text>

</Animatable.View>

برای اشنایی بیشتر با این کتابخانه و پراپس های آن اینجا کلیک کنید.

2.react-native-motion:

react-native-motion یک api ساده برای ساخت انیمیشن در زمان باز شدن یک modal یا به حرکت در آوردن کامپوننت های صفحه در react native است. مثال زیر نموه کد ساخت انیمیشن با استفاده از این کتابخانه:

آموزش React Native - ساخت اپلیکیشن flashlight

import React, { Component } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
import { Shake } from "react-native-motion";

export default class index extends Component {
  state = {
    value: 0
  };
  _startAnimation = () => {
    this.setState({ value: this.state.value + 1 });
  };
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.item}>
          <TouchableOpacity style={styles.btn} onPress={this._startAnimation}>
            <Text style={styles.textBtn}>Start animation 🚀</Text>
          </TouchableOpacity>
        </View>
        <View style={{ alignItems: "center" }}>
          <Shake style={[styles.card]} value={this.state.value} type="timing">
            <Text style={styles.whiteText}>{this.state.value}</Text>
          </Shake>
        </View>
      </View>
    );
}

import React, { Component } from "react";

import { Text, View, StyleSheet, TouchableOpacity } from "react-native";

import { Shake } from "react-native-motion";

export default class index extends Component {

state = {

value:

};

_startAnimation = () => {

this.setState({ value: this.state.value + 1 });

};

render() {

return (

<Text style={styles.textBtn}>Start animation 🚀</Text>

</TouchableOpacity>

</View>

<Text style={styles.whiteText}>{this.state.value}</Text>

</Shake>

</View>

);

}

3.Lottie:

Lottie یک کتابخانه برای ایجاد انیمیشن است که توسط Airbnb ایجاد شده و انیمیشن های After Effect را به فایل JSON تبدیل می کند که می توانید از آن را در برنامه خود استفاده کرد ، از Lottie میتوان در ios ، Android ، Windows ، Web و React Native استفاده کنید.

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

import LottieView from “lottie-react-native”;

1	import LottieView from “lottie-react-native”;

   <LottieView
            source={require("../lottie/1712-bms-rocket.json")}
            loop
            autoPlay
/>

<LottieView

source={require("../lottie/1712-bms-rocket.json")}

loop

autoPlay

برای استفاده و آشنایی بیشتر با این کتابخانه میتونید به دوره کار با کتابخانه lottie نگاهی بندازید .

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

4.react-native-reanimated:

react-native-reanimated یک کتابخانه با انعطاف پذیری بالا برای ساخت انیمیشن است.

react-native-reanimated یک api جدید به شما ارائه میدهد که به جای React Native Animated API استفاده میشود .

در اینجا دلایل استفاده از react-native-reanimated به جایه react-native-reanimated آمده است:

در react-native-reanimated کنترل بیشتری در مقادیر انیمیشن وجود دارد.
دیگر نیازی به استفاده از useNativeDriver نیست زیرا react-native-reanimated انیمیشن ها را مستقیما در ui انجام میدهد.

برای آشنایی بیشتر با این کتابخانه اینجا کلیک کنید.

5.(React Native Animations Library (rnal:

Rnal یک کتابخانه ساده برای نمایش انیمیشن های ساده مانند Fade, Scale, orrotation. برای ایجاد Fade effect میتوانید مانند زیر عمل کنید:

اگر می خواهید React Native (ری اکت نیتیو) را به صورت کامل و در قالب پروژه های مختلف یاد بگیرید پیشنهاد می کنیم در دوره آموزش جامع و پروژه محور React native شرکت کنید.

منبع

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

ریحان گفت:

سپتامبر 14, 2019 در 11:18 ق.ظ

چه کپی تمیزی خسته نباشه اقای حیاتی
https://blog.bitsrc.io/top-5-animation-libraries-in-react-native-d00ec8ddfc8d

پاسخ
- علیرضا گفت:
  
  سپتامبر 14, 2019 در 11:55 ق.ظ
  
  با سلام و احترام
  قاعدتا بین ترجمه و کپی تفاوت های زیادی وجود داره !!!
  ما هم سعی میکنیم با ترجمه مقالات بروز این حوزه محتوای خوبی رو در اختیار دوستان فارسی زبان خودمون بزاریم و تقریبا در تمامی مقاله های سایت منبع ها کاملا ذکر شدند .
  تو این مقاله متاسفانه فراموش شده بود که در حال حاضر منبع نوشته هم قرار گرفت .
  به هر حال از توجهتون ممنونیم
  
  پاسخ

1.react-native-animatable:

2.react-native-motion:

<img loading="lazy" class="aligncenter wp-image-37764" src="https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/reactnative012.gif" alt="" width="193" height="389" />3.Lottie:

4.react-native-reanimated:

5.(React Native Animations Library (rnal:

<img loading="lazy" class="aligncenter size-full wp-image-37767" src="https://d2ffcs5wrcif.cdn.shift8web.com/wp-content/uploads/reactnative016.gif" alt="آموزش ری اکت نیتیو" width="600" height="420" />

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

تفاوت توسعه برنامه های android و ios

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

استفاده از Mapbox در react native (ری اکت نیتیو)

نمایش عکس های گوشی در react native (ری اکت نیتیو)

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

3.Lottie: