۲۹
فروردین

جلسه ۱۴ : انیمیشن در React Native

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. اجزای قابل لمس در فریم ورک راکت نیتیو و توضیحاتی راجع به Touchable Native Feedback و Touchable Without Feedback داده شد. اکنون انیمیشن در React Native و کامپوننت های انیمیشن در React Native رو خواهیم داشت.

انیمیشن در React Native

در این فصل، ما به شما نحوه استفاده از LayoutAnimation در React Native را نشان خواهیم داد.

کامپوننت های انیمیشن در React Native

ما myStyle را به عنوان ویژگی state تنظیم خواهیم کرد. این ویژگی برای طراحی یک عنصر در PresentationAnimationComponent استفاده می شود.
ما همچنین دو عمل را ایجاد خواهیم کرد. expandElement و collapseElement. این توابع مقادیر state را به روز می کند. اولین بار از spring preset animation استفاده می کند در حالی که دومین بار از linear preset برخوردار است. ما این را نیز به عنوان props ها منتقل خواهیم کرد. دکمه های Expand و Collapse با عملکردهای ()expandElement و ()collapseElement فراخوانی می شوند.

در این مثال، عرض و ارتفاع جعبه را به طور پویا تغییر می دهیم. از آن جا که کامپوننت Home همان خواهد بود، ما تنها کامپوننت Animations را تغییر خواهیم داد.
در این مثال، عرض و ارتفاع جعبه را به طور پویا تغییر می دهیم. از آن جا که کامپوننت Home همان خواهد بود، ما تنها کامپوننت Animations را تغییر خواهیم داد.

App.js

مثال :

import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'

class Animations extends Component {
   componentWillMount = () => {
      this.animatedWidth = new Animated.Value(50)
      this.animatedHeight = new Animated.Value(100)
   }
   animatedBox = () => {
      Animated.timing(this.animatedWidth, {
         toValue: 200,
         duration: 1000
      }).start()
      Animated.timing(this.animatedHeight, {
         toValue: 500,
         duration: 500
      }).start()
   }
   render() {
      const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }
      return (
         <TouchableOpacity style = {styles.container} onPress = {this.animatedBox}>
            <Animated.View style = {[styles.box, animatedStyle]}/>
         </TouchableOpacity>
      )
   }
}
export default Animations

const styles = StyleSheet.create({
   container: {
      justifyContent: 'center',
      alignItems: 'center'
   },
   box: {
      backgroundColor: 'blue',
      width: 50,
      height: 100
   }
})

import React, { Component } from 'react'

import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'

class Animations extends Component {

componentWillMount = () => {

this.animatedWidth = new Animated.Value(50)

this.animatedHeight = new Animated.Value(100)

}

animatedBox = () => {

Animated.timing(this.animatedWidth, {

toValue: 200,

duration: 1000

}).start()

Animated.timing(this.animatedHeight, {

toValue: 500,

duration: 500

}).start()

}

render() {

const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }

return (

<Animated.View style = {[styles.box, animatedStyle]}/>

</TouchableOpacity>

)

}

export default Animations

const styles = StyleSheet.create({

container: {

justifyContent: 'center',

alignItems: 'center'

box: {

backgroundColor: 'blue',

width: 50,

height: 100

}

})

کلام پایانی

اکنون که انیمیشن در React Native و کامپوننت های انیمیشن در React Native رو آموختیم می تونیم در جلسه بعد به راحتی وارد مبحث Debugging شیم .پس همراهمون بمونید.

به اشتراک بگذارید

LayoutAnimation در React Native ,آموزش React Native ,انیمیشن در React Native ,دکمه های Expand در React Native

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۴ : انیمیشن در React Native

مقدمه

انیمیشن در React Native

کامپوننت های انیمیشن در React Native

App.js

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ