未回答：React Native - 每次组件更新时应用动画

Question

我是 React Native 的新手，最近一直在开发 Quotes 应用程序。它只是在向上滑动或向左滑动时更改为新报价。我按照官方文档 React Native Animations 的建议添加了一些淡入过渡。 fadeIn 过渡仅在组件安装时应用一次。 但我希望它在用户每次滑动查看新报价时一次又一次地发生。我什至将 'componentDidMount' 更改为 'ComponentDidUpdate' 但它没有用。

我已经在展会上添加了项目 Expo Project Link

这是代码

import React, {Component} from 'react';
import {Animated, Dimensions } from 'react-native'
import { StyleSheet, Text, View, Image, ScrollView, Button, TouchableWithoutFeedback, TextInput, AsyncStorage} from 'react-native';
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
import LinearGradient from 'react-native-linear-gradient';
import AnimatedLinearGradient, {presetColors} from 'react-native-animated-linear-gradient'

import Quotes from './quotes.json';
import Background from './background.json';


//-------------IMPORTS END---------------------------------------------


class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),  // Initial value for opacity: 0
  }

  componentDidMount() {
    Animated.timing(                  // Animate over time
      this.state.fadeAnim,            // The animated value to drive
      {
        toValue: 1,                   // Animate to opacity: 1 (opaque)
        duration: 700,              // Make it take a while
      }
    ).start();                        // Starts the animation
  }

  componentDidUpdate() {
    Animated.timing(                  // Animate over time
      this.state.fadeAnim,            // The animated value to drive
      {
        toValue: 1,                   // Animate to opacity: 1 (opaque)
        duration: 700,              // Make it take a while
      }
    ).start();                        // Starts the animation
  }

  render() {
    let { fadeAnim } = this.state;

    return (
      <Animated.View                 
        style={{
          ...this.props.style,
          opacity: fadeAnim,         // Bind opacity to animated value
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}

//-------------Animation Class Ends------------------------------------


export default class App extends React.Component {

    state = {
        activeQuoteIndex: 0,
        backgroundColor: 0,
    }

    onSwipeLeft(gestureState) {
      this.state.activeQuoteIndex= Math.floor(Math.random() * (Quotes.length));
      this.state.backgroundColor= Math.floor(Math.random() * (Background.length));
    }
    onSwipeUp(gestureState) {
      this.state.activeQuoteIndex= Math.floor(Math.random() * (Quotes.length));
      this.state.backgroundColor= Math.floor(Math.random() * (Background.length));
    }

    onSwipe(gestureName, gestureState) {
      const {SWIPE_UP, SWIPE_DOWN, SWIPE_LEFT, SWIPE_RIGHT} = swipeDirections;
      this.setState({gestureName: gestureName});
      switch (gestureName) {
        case SWIPE_LEFT:
          break;
        case SWIPE_UP:
          break;
      }
  }

    render() {

        const config = {
          velocityThreshold: 0.3,
          directionalOffsetThreshold: 80
        };

        const dimension = {
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').height+50
        };

     const quote = Quotes[this.state.activeQuoteIndex]
     return (

         <View style={{backgroundColor: "#000", height: dimension.height,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center'}}>

        <GestureRecognizer
         onSwipe={(direction, state) => this.onSwipe(direction, state)}
         onSwipeLeft={(state) => this.onSwipeLeft(state)}
         onSwipeUp={(state) => this.onSwipeUp(state)}
         config={config}
         style={{
           height:dimension.height-310,
           width: dimension.width-70,
           backgroundColor: "#000",
           justifyContent: 'center',
           alignItems: 'center',
           borderRadius: 10
         }}
         >
         <FadeInView style={{width: 250, height: 550, backgroundColor: 'transparent'}}>
         <Text style={{fontSize: 24,
         padding: 40, textAlign: 'center', color: Background[this.state.backgroundColor].background}}>Quote</Text>
         <Text style={{fontSize: 20, padding: 40, textAlign: 'center', color: Background[this.state.backgroundColor].background}}>"{quote.quote}"</Text>
         <View style={{width: 60, height: 2, backgroundColor: Background[this.state.backgroundColor].background}}></View>
         <Text style={{fontSize: 14, padding: 40, textAlign: 'center', color: Background[this.state.backgroundColor].background}}>{quote.author}</Text>
         </FadeInView>

       </GestureRecognizer>
       </View>
    );
  }
}

Answer 1

没有运行你的代码，但我认为问题是这样的：一开始，你设置

淡化动画：新 Animated.Value(0)

稍后或者你说开始动画你说

toValue: 1

并且在 componentDidUpdate 中您再次使用相同的值 (1)。问题是您永远不会将值设置回 0，因此不透明度从 1 到 1 动画 - 没有任何动画！

您需要找到一个合适的位置将动画值重置为零。据我所知，start() 调用还接受动画完成时执行的回调。也许这会有所帮助。或者您可能需要将动画状态移至 App 组件的更高位置。

未回答：React Native - 每次组件更新时应用动画

Unanswered: React Native - Apply animation every-time component updates

reactjs

react-native

expo