ဖြေရှင်းထားသည်- မူလ လှည့်ပတ်မှုကို တုံ့ပြန်သည်။

react native rotate ၏အဓိကပြဿနာမှာ စက်ပစ္စည်းအများစုမှ ကောင်းစွာမပံ့ပိုးနိုင်ခြင်းကြောင့်ဖြစ်သည်။ ဆိုလိုသည်မှာ ၎င်းသည် သင့်စက်ပစ္စည်းပေါ်တွင် မှန်ကန်စွာ အလုပ်မလုပ်နိုင်ပါ သို့မဟုတ် လုံးဝမရနိုင်ဟု ဆိုလိုသည်။

 animation

import React, { Component } from 'react'; import { Animated, Text, View } from 'react-native'; class FadeInView extends Component { state = { fadeAnim: new Animated.Value(0), // Initial value for opacity: 0 } componentDidMount() { Animated.timing( // Animate over time this.state.fadeAnim, // The animated value to drive { toValue: 1, // Animate to opacity: 1 (opaque) duration: 10000, // Make it take a while }, ).start(); // Starts the animation } render() { let { fadeAnim } = this.state; return ( <Animated.View // Special animatable View style={{ ...this.props.style, opacity: fadeAnim, transform:&#91;{rotate:'360deg'}&#93; }} > {this.props.children} </Animated.View> ); } }

ဤကုဒ်မျဉ်းကြောင်းတစ်ကြောင်း-

'တုံ့ပြန်မှု' မှ တုံ့ပြန်မှု၊ {အစိတ်အပိုင်း } ကို တင်သွင်းပါ။ 'react-native' မှ { ကာတွန်း၊ စာသား၊ ကြည့်ရန် } ကို တင်သွင်းပါ။ class FadeInView သည် Component ကို တိုးချဲ့သည် { state = { fadeAnim: new Animated.Value(0), // opacity အတွက် ကနဦးတန်ဖိုး: 0 } componentDidMount() { Animated.timing( // အချိန်ကြာလာသည်နှင့်အမျှ Animate this.state.fadeAnim, // အဆိုပါ ကာတွန်း မောင်းနှင်ရန်တန်ဖိုး { toValue: 1၊ // အလင်းမှည့်ခြင်းသို့ လှုပ်ရှားရန်- 1 (opaque) ကြာချိန်: 10000၊ // ခဏကြာပါ }, .start(); // ကာတွန်းကို စတင်သည် } render() { let { fadeAnim } = this.state; ပြန်လာ ( {this.props.children} ); } }

အသွင်ပြောင်း

React Native တွင် လုပ်ဆောင်နိုင်သော အသွင်ကူးပြောင်းမှု အမျိုးအစား အနည်းငယ်ရှိပါသည်။ ၎င်းတို့တွင်-

အပြင်အဆင် ပြောင်းလဲခြင်း- ၎င်းတို့သည် အက်ပ်၏ အပြင်အဆင်ကို ပြောင်းလဲစေသည်။ ဥပမာအားဖြင့်၊ သင်သည် အက်ပ်ဝင်းဒိုး၏ အမြင့် သို့မဟုတ် အကျယ်ကို ပြောင်းလဲနိုင်သည်။

အန်နီမေးရှင်းအသွင်ပြောင်းခြင်း- ဤအရာများသည် ဒြပ်စင်တစ်ခုအား အချိန်နှင့်အမျှ ရွေ့လျားပုံပေါ်ပုံတို့ကို ပြောင်းလဲစေသည်။ ဥပမာအားဖြင့်၊ သင်သည် ဒြပ်စင်တစ်ခု၏ အလင်းပိတ်နိုင်မှုကို ပြောင်းလဲနိုင်သည် သို့မဟုတ် ၎င်းကို မတူညီသောပုံသဏ္ဍာန်အဖြစ် ပြောင်းလဲနိုင်သည်။

ပြည်နယ်စီမံခန့်ခွဲမှုအသွင်ပြောင်းခြင်း- ၎င်းသည် ဒေါင်းလုဒ်လုပ်နေချိန် သို့မဟုတ် အသုံးပြုသူနှင့် တုံ့ပြန်ဆောင်ရွက်နေချိန်ကဲ့သို့သော အခြေအနေအမျိုးမျိုးတွင် ရှိနေသည့်အချိန်တွင် အက်ပ်က ပြုမူပုံများကို ပြောင်းလဲစေသည်။

အန်နီမေးရှင်းကို အသုံးပြု၍ ပုံကိုလှည့်ပါ။

React Native တွင်၊ သင်သည် ရုပ်ပုံတစ်ပုံကို လှည့်ရန် အန်နီမေးရှင်း အစိတ်အပိုင်းကို အသုံးပြုနိုင်သည်။

ပထမဦးစွာ၊ သင်သည် Animation အစိတ်အပိုင်းကိုတင်သွင်းရန်လိုအပ်သည်။

'react-native' မှ { Animation } ကို တင်သွင်းပါ

ထို့နောက်၊ သင်သည် အန်နီမေးရှင်းအသစ်တစ်ခုကို ဖန်တီးရန် လိုအပ်သည်။

ကာတွန်း = အသစ် အန်နီမေးရှင်း()

animation.fromRect(0၊ 0၊ 100၊ 100) // ကာတွန်း၏ အစမှတ်ကို သတ်မှတ်သည်။ animation.toRect(50၊ 50၊ 150၊ 150) // ကာတွန်းရုပ်ပုံ၏ အဆုံးအမှတ်ကို သတ်မှတ်သည်။ animation.duration = 1000 // ကာတွန်းသည် မည်မျှကြာမည်ကို မီလီစက္ကန့်ဖြင့် သတ်မှတ်သည်။