React Native - Animaciones

En este capítulo, le mostraremos cómo utilizar LayoutAnimation en React Native.

Componente de animaciones

Nosotros estableceremos myStylecomo propiedad del estado. Esta propiedad se usa para diseñar un elemento dentroPresentationalAnimationComponent.

También crearemos dos funciones: expandElement y collapseElement. Estas funciones actualizarán los valores del estado. El primero usará elspring animación preestablecida mientras que el segundo tendrá la linearPreestablecido. También los pasaremos como accesorios. losExpand y el Collapse botones llaman al expandElement() y collapseElement() funciones.

En este ejemplo, cambiaremos dinámicamente el ancho y el alto de la caja. Desde elHome El componente será el mismo, solo cambiaremos el Animations componente.

App.js

import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'

class Animations extends Component {
   componentWillMount = () => {
      this.animatedWidth = new Animated.Value(50)
      this.animatedHeight = new Animated.Value(100)
   }
   animatedBox = () => {
      Animated.timing(this.animatedWidth, {
         toValue: 200,
         duration: 1000
      }).start()
      Animated.timing(this.animatedHeight, {
         toValue: 500,
         duration: 500
      }).start()
   }
   render() {
      const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }
      return (
         <TouchableOpacity style = {styles.container} onPress = {this.animatedBox}>
            <Animated.View style = {[styles.box, animatedStyle]}/>
         </TouchableOpacity>
      )
   }
}
export default Animations

const styles = StyleSheet.create({
   container: {
      justifyContent: 'center',
      alignItems: 'center'
   },
   box: {
      backgroundColor: 'blue',
      width: 50,
      height: 100
   }
})