React-native動畫：嘗試組合多個動畫； 出錯

Question

我正在嘗試制作動畫，從左上角的彩色正方形開始。 單擊它應將正方形移動到屏幕中心，同時將其縮放到其大小的兩倍。 然后，它應該翻轉並顯示背面。 當我嘗試在模擬器上加載應用程序時，出現以下錯誤：

這是代碼：

 import React, {Component} from 'react'; import { StyleSheet, View, Text, Animated, Dimensions, TouchableWithoutFeedback } from 'react-native'; export default class App extends Component { state = { animation: new Animated.ValueXY(), scaleAnimation: new Animated.Value(1), rotateAnimation: new Animated.Value(0) }; startAnimation = () => { const {width, height} = Dimensions.get("window"); Animated.parallel([ Animated.timing(this.state.animation.y, { toValue: (height / 2) - (this._height / 2), duration: 500, useNativeDriver: true }), Animated.timing(this.state.animation.x, { toValue: (width / 2) - (this._width / 2), duration: 500, useNativeDriver: true }), Animated.timing(this.state.scaleAnimation, { toValue: 2, duration: 500, useNativeDriver: true }) ]).start(() => { Animated.timing(this.state.rotateAnimation, { toValue: 180, duration: 500, useNativeDriver: true }).start(); }) } saveDimensions = (e) => { this._width = e.nativeEvent.layout.width; this._height = e.nativeEvent.layout.height; } render() { const animatedStyles = { transform: [ { translateX: this.state.animation.x }, { translateY: this.state.animation.y }, { scale: this.state.scaleAnimation } ] } const frontInterpolate = this.state.rotateAnimation.interpolate({ inputRange: [0, 180], outputRange: ['0deg', '180deg'] }) const backInterpolate = this.state.rotateAnimation.interpolate({ inputRange: [0, 180], outputRange: ['180deg', '360deg'] }) const frontAnimatedStyle = { transform: [ { rotateY: this.frontInterpolate } ] } const backAnimatedStyle = { transform: [ { rotateY: this.backInterpolate } ] } return ( <View style={styles.container}> <TouchableWithoutFeedback onPress={() => this.startAnimation()} onLayout={() => this.saveDimensions()} > <View> <Animated.View style={[styles.box, animatedStyles, frontAnimatedStyle]} > <Text>Front</Text> </Animated.View> <Animated.View style={[backAnimatedStyle, styles.box, styles.boxBack]} > <Text>Back</Text> </Animated.View> </View> </TouchableWithoutFeedback> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, //alignItems: 'center', //justifyContent: 'center', }, box: { width: 150, height: 150, backgroundColor: 'tomato', position: 'absolute', top: 0, left: 0, }, boxBack: { backgroundColor: 'green', }, }); 

我什至不知道動畫是否可以正常播放，因為即使沒有出現此錯誤也無法加載。

Answer 1

這是小吃https://snack.expo.io/@ziyoshams/frisky-watermelon ，然后嘗試檢查代碼。 您的錯誤來自onLayout ，但進行了很多修改。 這是代碼：

 import React, { Component } from 'react'; import { StyleSheet, View, Text, Animated, Dimensions, TouchableWithoutFeedback, } from 'react-native'; const { width, height } = Dimensions.get('window'); export default class App extends Component { state = { animation: new Animated.ValueXY(), scaleAnimation: new Animated.Value(1), box1RotateAnimation: new Animated.Value(0), box2RotateAnimation: new Animated.Value(0), }; startAnimation = () => { Animated.parallel([ Animated.timing(this.state.animation.y, { toValue: height / 2 - this._height / 2, duration: 500, useNativeDriver: true, }), Animated.timing(this.state.animation.x, { toValue: width / 2 - this._width / 2, duration: 500, useNativeDriver: true, }), Animated.timing(this.state.scaleAnimation, { toValue: 2, duration: 500, useNativeDriver: true, }), ]).start(() => { Animated.sequence([ Animated.timing(this.state.box1RotateAnimation, { toValue: 180, duration: 500, useNativeDriver: true, }), Animated.timing(this.state.box2RotateAnimation, { toValue: 180, duration: 500, useNativeDriver: true, }), ]).start(); }); }; saveDimensions = e => { this._width = e.nativeEvent.layout.width; this._height = e.nativeEvent.layout.height; }; render() { const frontInterpolate = this.state.box1RotateAnimation.interpolate({ inputRange: [0, 180], outputRange: ['0deg', '90deg'], }); const backInterpolate = this.state.box2RotateAnimation.interpolate({ inputRange: [0, 180], outputRange: ['90deg', '0deg'], }); const parentAnimation = { transform: [ { translateX: this.state.animation.x, translateY: this.state.animation.y, scale: this.state.scaleAnimation, }, ], }; const box1Animation = { transform: [ { rotateY: frontInterpolate, }, ], }; const box2Animation = { transform: [ { rotateY: backInterpolate, }, ], }; return ( <View style={styles.container}> <TouchableWithoutFeedback onPress={this.startAnimation} onLayout={this.saveDimensions}> <Animated.View style={[styles.box, parentAnimation]}> <Animated.View style={[styles.box1, box1Animation]}> <Text>Front</Text> </Animated.View> <Animated.View style={[styles.box2, box2Animation]}> <Text>Back</Text> </Animated.View> </Animated.View> </TouchableWithoutFeedback> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, box: { width: 150, height: 150, position: 'absolute', top: 0, left: 0, }, box1: { width: 150, height: 150, backgroundColor: 'tomato', alignItems: 'center', justifyContent: 'center', position: 'absolute', top: 0, left: 0, }, box2: { width: 150, height: 150, backgroundColor: 'green', alignItems: 'center', justifyContent: 'center', position: 'absolute', top: 0, left: 0, }, });