آموزش کار با انیمیشن در ریکت نیتیو

آموزش کار با انیمیشن در ریکت نیتیو

آموزش کار با انیمیشن در ریکت نیتیو

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

آموزش کار با انیمیشن در ریکت نیتیو

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

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

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
   }
})

 

لیست جلسات قبل آموزش React Native

  1. React Native یا ریکت نیتیو چیست؟
  2. آموزش React Native – نصب و تنظیم محیط React Native
  3. آموزش App در React Native
  4. آموزش کار با State در React Native
  5. آموزش کار با کامپوننت Props در React Native
  6. آموزش استایل دهی در برنامه نویسی React Native
  7. آموزش flex در برنامه نویسی react native
  8. آموزش لیست ویو در برنامه نویسی React Native
  9. آموزش کار با TextInput در برنامه نویسی ریکت نیتیو
  10. آموزش ScrollView در برنامه نویسی ریکت نیتیو
  11. آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو
  12. آموزش HTTP در برنامه نویسی ریکت نیتیو
  13. آموزش کار با Button در ریکت نیتیو

The post آموزش کار با انیمیشن در ریکت نیتیو appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

درباره نویسنده: administrator

ممکن است دوست داشته باشید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *