Diselesaikan: bereaksi memutar asli

Pembaharuan Terakhir: 09/11/2023
penulis: Jejak Sumber JavaScript

Masalah utama dengan react native rotate adalah tidak didukung dengan baik oleh sebagian besar perangkat. Artinya, ini mungkin tidak berfungsi dengan benar di perangkat Anda, atau mungkin tidak tersedia sama sekali.

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

Kode ini baris demi baris:

impor Bereaksi, { Komponen } dari 'bereaksi'; import { Animated, Text, View } from 'react-native'; class FadeInView extends Komponen { state = { fadeAnim: new Animated.Value(0), // Nilai awal untuk opacity: 0 } componentDidMount() { Animated.timing( // Animasikan dari waktu ke waktu this.state.fadeAnim, // Animasi value to drive { toValue: 1, // Animate to opacity: 1 (opaque) duration: 10000, // Bikin agak lama }, ).start(); // Memulai animasi } render() { let { fadeAnim } = this.state; kembali ( {ini.alat peraga.anak-anak} ); } }

Transformasi

Ada beberapa jenis transformasi yang dapat dilakukan di React Native. Ini termasuk:

Transformasi tata letak: Ini mengubah tata letak aplikasi. Misalnya, Anda dapat mengubah tinggi atau lebar jendela aplikasi.

Transformasi animasi: Ini mengubah cara elemen tampak bergerak seiring waktu. Misalnya, Anda dapat mengubah opasitas elemen atau mengubahnya menjadi bentuk yang berbeda.

Transformasi manajemen status: Ini mengubah cara aplikasi berperilaku saat berada dalam status yang berbeda, seperti saat memuat atau saat berinteraksi dengan pengguna.

Putar gambar menggunakan Animasi

Di React Native, Anda dapat menggunakan komponen Animation untuk memutar gambar.

Pertama, Anda perlu mengimpor komponen Animasi.

import { Animation } dari 'react-native'

Selanjutnya, Anda perlu membuat instance Animation baru.

biarkan animasi = Animasi baru()

animation.fromRect(0, 0, 100, 100) // Menetapkan titik awal animasi. animation.toRect(50, 50, 150, 150) // Menetapkan titik akhir animasi. animation.duration = 1000 // Mengatur berapa lama durasi animasi dalam milidetik.

Pos terkait: