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

4 سال پیش

امتیاز دهید post

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

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

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

ما 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 = () =&gt; {
      this.animatedWidth = new Animated.Value(50)
      this.animatedHeight = new Animated.Value(100)
   }
   animatedBox = () =&gt; {
      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 (
         &lt;TouchableOpacity style = {styles.container} onPress = {this.animatedBox}&gt;
            &lt;Animated.View style = {[styles.box, animatedStyle]}/&gt;
         &lt;/TouchableOpacity&gt;
      )
   }
}
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

}

})

منبع.

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

امتیاز دهید post

نویسنده مطلب saber

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

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

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

App.js

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

دیدگاه شما

بدون دیدگاه

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

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

App.js

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه