React Native - Animasi

Di bab ini, kami akan menunjukkan cara menggunakan LayoutAnimation di React Native.

Komponen Animasi

Kami akan mengatur myStylesebagai milik negara. Properti ini digunakan untuk menata elemen di dalamnyaPresentationalAnimationComponent.

Kami juga akan membuat dua fungsi - expandElement dan collapseElement. Fungsi ini akan memperbarui nilai dari negara bagian. Yang pertama akan menggunakanspring animasi preset sedangkan yang kedua akan memiliki linearpreset. Kami akan melewatkan ini sebagai alat peraga juga. ItuExpand dan Collapse tombol memanggil expandElement() dan collapseElement() fungsi.

Dalam contoh ini, kami akan mengubah lebar dan tinggi kotak secara dinamis. SejakHome komponen akan sama, kami hanya akan mengubah Animations komponen.

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
   }
})