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

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش انیمیشن ها در برنامه نویسی ریکت نیتیو خواهیم پرداخت.

مولفه انیمیشن ها

ما myStyle را به عنوان ویژگی state تنظیم خواهیم کرد. این ویژگی برای یک ظاهر طراحی شده در داخل عنصر PresentationalAnimationComponent استفاده می شود.

ما همچنین دو تابع ایجاد می کنیم – expandElement و shembElement. این توابع مقادیر موجود در حالت را به روز می کنند. مورد اول از انیمیشن از پیش تنظیم شده spring استفاده می کند در حالی که مورد دوم از پیش تعیین شده خطی است. ما نیز از این موارد به عنوان لوازم جانبی عبور خواهیم کرد. دکمه های Expand و Collapse توابع ()expandElement  و ()ollaElement  را فراخوانی می کنند.

در این مثال، عرض و ارتفاع جعبه را به صورت پویا تغییر خواهیم داد. از آنجا که مولفه 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
   }
})

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

1. آموزش برنامه نویسی ریکت نیتیو
2. آموزش تنظیمات محیطی برنامه نویسی ریکت نیتیو
3. آموزش برنامه نویسی ریکت نیتو – برنامه
4. آموزش state در برنامه نویسی ریکت نیتیو 
5. آموزش Props در برنامه نویسی ریکت نیتیو 
6. آموزش استایل دهی در برنامه نویسی ریکت نیتیو
7. آموزش Flexbox در برنامه نویسی ریکت نیتیو
8. آموزش ListView در برنامه نویسی ریکت نیتیو
9. آموزش ورودی متن در برنامه نویسی ریکت نیتیو
10. آموزش ScrollView در برنامه نویسی ریکت نیتیو
11. آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو
12.  آموزش HTTP در برنامه نویسی ریکت نیتیو
13. آموزش کار با دکمه ها در برنامه نویسی ریکت نیتیو