Основният проблем с 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'; import { Animated, Text, View } from 'react-native'; class FadeInView extends Component { state = { fadeAnim: new Animated.Value(0), // Първоначална стойност за opacity: 0 } componentDidMount() { Animated.timing( // Анимиране във времето this.state.fadeAnim, // Анимираният стойност за задвижване { toValue: 1, // Анимиране до непрозрачност: 1 (непрозрачен) продължителност: 10000, // Накарайте да отнеме известно време }, ).start(); // Стартира анимацията } render() { let { fadeAnim } = this.state; връщане (
трансформации
Има няколко вида трансформации, които могат да бъдат изпълнени в React Native. Те включват:
Трансформации на оформлението: Те променят оформлението на приложението. Например можете да промените височината или ширината на прозореца на приложението.
Трансформации на анимация: Те променят начина, по който даден елемент изглежда да се движи във времето. Например, можете да промените непрозрачността на даден елемент или да го трансформирате в различна форма.
Трансформации на управлението на състоянието: Тези промени начина, по който приложението се държи, когато е в различни състояния, като например когато се зарежда или когато потребителят взаимодейства с него.
Завъртете изображението с помощта на анимация
В React Native можете да използвате компонента Animation, за да завъртите изображение.
Първо, трябва да импортирате компонента Animation.
импортиране на { анимация } от 'react-native'
След това трябва да създадете нов екземпляр на анимацията.
нека анимация = нова анимация()
animation.fromRect(0, 0, 100, 100) // Задава началната точка на анимацията. animation.toRect(50, 50, 150, 150) // Задава крайната точка на анимацията. animation.duration = 1000 // Задава колко време ще продължи анимацията в милисекунди.
