上一节:
下一节:

  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
   }
})
上一节:
下一节: