React native rotate peamine probleem on see, et enamik seadmeid ei toeta seda hästi. See tähendab, et see ei pruugi teie seadmes korralikult töötada või ei pruugi olla üldse saadaval.
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> ); } }
See kood rida rea haaval:
import React, { Component } from 'react'; import { Animated, Text, View } from 'react-native'; class FadeInView laiendab Component { state = { fadeAnim: new Animated.Value(0), // Läbipaistmatuse algväärtus: 0 } componentDidMount() { Animated.timing( // Animated aja jooksul this.state.fadeAnim, // Animeeritud value to drive { toValue: 1, // Animeerimine läbipaistmatuseni: 1 (läbipaistmatu) kestus: 10000, // Võta veidi aega }, ).start(); // Käivitab animatsiooni } render() { let { fadeAnim } = this.state; tagasi (
Transformeerub
React Native'is saab teostada mõnda tüüpi teisendusi. Need sisaldavad:
Paigutuse teisendused: need muudavad rakenduse paigutust. Näiteks saate muuta rakenduse akna kõrgust või laiust.
Animatsiooni teisendused: need muudavad elemendi liikumist aja jooksul. Näiteks saate muuta elemendi läbipaistmatust või teisendada selle teise kujuga.
Olekuhalduse muudatused: need muudavad rakenduse käitumist, kui see on erinevates olekutes (nt laadimisel või kasutaja suhtlemisel).
Pöörake pilti animatsiooni abil
Rakenduses React Native saate pildi pööramiseks kasutada komponenti Animatsioon.
Esiteks peate importima animatsiooni komponendi.
import { Animation } from "react-native"
Järgmisena peate looma uue animatsiooni eksemplari.
las animatsioon = uus animatsioon()
animation.fromRect(0, 0, 100, 100) // Määrab animatsiooni alguspunkti. animation.toRect(50, 50, 150, 150) // Määrab animatsiooni lõpp-punkti. animation.duration = 1000 // Määrab, kui kaua animatsioon millisekundites kestab.
