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