React Native - 动画

• 

  简述

  在本章中，我们将向您展示如何使用LayoutAnimation在 React Native 中。
• 

  动画组件

  我们将设置myStyle作为国家的财产。此属性用于设置内部元素的样式PresentationalAnimationComponent.

  我们还将创建两个函数 -expandElement和collapseElement. 这些函数将从状态更新值。第一个将使用spring预设动画，而第二个将具有linear预设。我们也会将这些作为道具传递。这Expand和Collapse按钮调用expandElement()和collapseElement()功能。

  在此示例中，我们将动态更改框的宽度和高度。由于Home组件将是相同的，我们只会更改Animations零件。

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