Το κύριο πρόβλημα με το 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:[{rotate:'360deg'}] }} > {this.props.children} </Animated.View> ); } }
Αυτός ο κώδικας γραμμή προς γραμμή:
εισαγωγή React, { Component } από το 'react'; εισαγωγή { Animated, Text, View } από το 'react-native'; class FadeInView extends Component { state = {fadeAnim: new Animated.Value(0), // Αρχική τιμή για την αδιαφάνεια: 0 } componentDidMount() { Animated.timing( // Κίνηση με την πάροδο του χρόνου this.state.fadeAnim, // The animated value to drive { toValue: 1, // Animate to opacity: 1 (opaque) duration: 10000, // Κάντε το να πάρει λίγο }, .start(); // Ξεκινά το animation } render() { let { fadeAnim } = this.state; ΕΠΙΣΤΡΟΦΗ (
Μεταμορφώσεις
Υπάρχουν μερικοί τύποι μετασχηματισμών που μπορούν να εκτελεστούν στο React Native. Αυτά περιλαμβάνουν:
Μετασχηματισμοί διάταξης: Αυτά αλλάζουν τη διάταξη της εφαρμογής. Για παράδειγμα, μπορείτε να αλλάξετε το ύψος ή το πλάτος του παραθύρου της εφαρμογής.
Μετασχηματισμοί κινούμενων εικόνων: Αυτές αλλάζουν τον τρόπο με τον οποίο ένα στοιχείο φαίνεται να κινείται με την πάροδο του χρόνου. Για παράδειγμα, μπορείτε να αλλάξετε την αδιαφάνεια ενός στοιχείου ή να το μετατρέψετε σε διαφορετικό σχήμα.
Μετασχηματισμοί διαχείρισης κατάστασης: Αυτές αλλάζουν τον τρόπο συμπεριφοράς της εφαρμογής όταν βρίσκεται σε διαφορετικές καταστάσεις, όπως όταν φορτώνεται ή όταν αλληλεπιδρά ο χρήστης.
Περιστρέψτε την εικόνα χρησιμοποιώντας το Animation
Στο React Native, μπορείτε να χρησιμοποιήσετε το στοιχείο Animation για να περιστρέψετε μια εικόνα.
Πρώτα, πρέπει να εισαγάγετε το στοιχείο Κινούμενα σχέδια.
εισαγωγή { Animation } από το 'react-native'
Στη συνέχεια, πρέπει να δημιουργήσετε μια νέα παρουσία κινούμενων εικόνων.
let animation = νέο Animation()
animation.fromRect(0, 0, 100, 100) // Ορίζει το σημείο εκκίνησης της κινούμενης εικόνας. animation.toRect(50, 50, 150, 150) // Ορίζει το σημείο λήξης της κινούμενης εικόνας. animation.duration = 1000 // Ορίζει πόσο θα διαρκέσει το animation σε χιλιοστά του δευτερολέπτου.
