آموزش کار با انیمیشن(Easing Animation) در React Native

در واقع Easing یک انیمیشن برای توضیح انواع متفاوت animations است.منظور از animation easing این است که انواع مختلفی از حرکت رو روی یک object مثل شروع سریع و توقف آهسته رو پیاده کند.این روند کند شدن decelerates the object نامیده می شود.4 نوع از easing در react native animation وجود دارد.در این نوع مقاله ما هر 4 نوع easing و نحوه پیاده سازی اون در React Native را یاد میگیریم.

حالا بهتره که بریم سراغ کدنویسی:

ایمپورت Animated, StyleSheet, View, TouchableWithoutFeedback در فایل App.js

import React, {Component} from 'react';
import { Animated, StyleSheet, View, TouchableWithoutFeedback, Easing } from 'react-native';

ایجاد یک class به نام App.این class کامپوننت اصلی ما در برنامه خواهد بود

export default class App extends Component {
}

ایجاد ()constructor برای App.درون ()constructor یک state به نام animationValue با مقدار پیش فرض صفر ایجاد می کنیم.ما از این state برای تغییر سرعت،شروع و پایان انیمیشن استفاده می کنیم.

constructor(){
super();
this.state={
animationValue : new Animated.Value(0)
}
}

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

از duration برای مشخص کردن مدت زمانی که شروع تا پایان انیمیشن استفاده می شود.

4 نوع مختلفی از انیمیشن Easing که داریم به صورت زیر است:

• Easing.bounce
• Easing.back
• Easing.elastic
• Easing.bezier

startAnimation=()=>{
Animated.timing(this.state.animationValue,{
toValue : 270,
duration : 500,
// easing: Easing.bounce,
// easing : Easing.back(10),
// easing : Easing.elastic(5),
easing : Easing.bezier(.07, 1, .33, .89),
}).start();
}

ایجاد یک متغیر به نام animatedStyle در بلاک render’s.حالا ما مقدار translateY رو با استفاده از animationValue بروزرسانی می کنیم.

render() {
const animatedStyle = {
transform: [{ translateY : this.state.animationValue }],
}
return (
);
}

ایجاد یک View اصلی به render’s return.حالا یک کامپوننت Animated.View که درون TouchableWithoutFeedback قرار می دهیم.و در onPress مربوط به این Button انیمیشن انجام خواهد شد.انیمیشن بر روی Animated.View انجام خواهد شد.

render() {
const animatedStyle = {
transform: [{ translateY : this.state.animationValue }],
}
return (
<View style={styles.MainContainer}>
<TouchableWithoutFeedback onPress={this.startAnimation}>
<Animated.View style={[styles.animatedBox, animatedStyle]} >
</Animated.View>
</TouchableWithoutFeedback>
</View>
);
}

ایجاد style

const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: 'center',
alignItems : 'center',
padding: 12
},
animatedBox:
{
width : 100,
height: 100,
backgroundColor : '#0091EA'
}
});

کد کامل برنامه در فایل App.js

import React, {Component} from 'react';
import { Animated, StyleSheet, View, TouchableWithoutFeedback, Easing } from 'react-native';
export default class App extends Component {
constructor(){
super();
this.state={
animationValue : new Animated.Value(0)
}
}
startAnimation=()=>{
Animated.timing(this.state.animationValue,{
toValue : 270,
duration : 500,
// easing: Easing.bounce,
// easing : Easing.back(10),
// easing : Easing.elastic(5),
easing : Easing.bezier(.07, 1, .33, .89),
// easing : Easing.ease(20)
}).start();
}
render() {
const animatedStyle = {
transform: [{ translateY : this.state.animationValue }],
}
return (
<View style={styles.MainContainer}>
<TouchableWithoutFeedback onPress={this.startAnimation}>
<Animated.View style={[styles.animatedBox, animatedStyle]} >
</Animated.View>
</TouchableWithoutFeedback>
</View>
);
}
};
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: 'center',
alignItems : 'center',
padding: 12
},
animatedBox:
{
width : 100,
height: 100,
backgroundColor : '#0091EA'
}
});

اگر این مقاله براتون مفید بود،اون رو با دوستان و همکاراتون به اشتراک بزارید

.همچنین اگر قصد دارید به عنوان یک برنامه نویسی حرفه ای React Native فعالیت کنید پیشنهاد میکنم دوره آموزش ساخت اپلیکیشن فروشگاهی مشابه digikala با react native رو مشاهده کنید.

منبع

اسکرین شات