React Native - Animazioni

In questo capitolo ti mostreremo come usare LayoutAnimation in React Native.

Componente Animazioni

Ci metteremo myStylecome proprietà dello Stato. Questa proprietà viene utilizzata per definire lo stile di un elemento all'internoPresentationalAnimationComponent.

Creeremo anche due funzioni: expandElement e collapseElement. Queste funzioni aggiorneranno i valori dallo stato. Il primo utilizzerà l'estensionespring l'animazione preimpostata mentre la seconda avrà l'estensione linearpreset. Passeremo anche questi come oggetti di scena. IlExpand e il Collapse i pulsanti chiamano expandElement() e collapseElement() funzioni.

In questo esempio, cambieremo dinamicamente la larghezza e l'altezza della scatola. Dal momento che ilHome il componente sarà lo stesso, cambieremo solo il 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
   }
})