有什么办法可以让 React Native 中的动画剩余时间？

Question

假设我有一个正在淡入的视图，然后我调用 stopAnimation 来停止它...此时是否有办法让剩余的 time/duration 离开 2000 毫秒或 0 如果完成.. ..

下面是带有淡入视图的示例。我想恢复动画，但现在当我恢复它时，还需要 5 秒才能完成...我不希望这样，当恢复时我希望它从停止的地方完成它自己。

import React, { useRef } from "react";
import { Animated, Text, View, StyleSheet, Button, SafeAreaView } `from "react-native";`     
const App = () => {
      // fadeAnim will be used as the value for opacity. Initial `Value: 0`
      const fadeAnim = useRef(new Animated.Value(0)).current;
    
      const fadeIn = () => {
        // Will change fadeAnim value to 1 in 5 seconds
        Animated.timing(fadeAnim, {
          toValue: 1,
          duration: 5000
        }).start();
      };
    
      const stop = () => {
        fadeAnim.stopAnimation()
      };
    
      return (
        <SafeAreaView style={styles.container}>
          <Animated.View
            style={[
              styles.fadingContainer,
              {
                // Bind opacity to animated value
                opacity: fadeAnim
              }
            ]}
          >
            <Text style={styles.fadingText}>Fading View!</Text>
          </Animated.View>
          <View style={styles.buttonRow}>
            <Button title="Fade In View" onPress={fadeIn} />
            <Button title="stop" onPress={stop} />
            <Button title="Resume" onPress={fadeIn} />
          </View>
        </SafeAreaView>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
      },
      fadingContainer: {
        padding: 20,
        backgroundColor: "powderblue"
      },
      fadingText: {
        fontSize: 28
      },
      buttonRow: {
        flexBasis: 100,
        justifyContent: "space-evenly",
        marginVertical: 16
      }
    });
    
    export default App;

Answer 1

您可以在调用stop()后手动计算剩余时间：

const valueDifference = toValue - fadeAnim._startingValue;
const remainingTime = (toValue - fadeAnim._value) * (duration / valueDifference);

console.log({ remainingTime });

有什么办法可以让 React Native 中的动画剩余时间？

Is there any way to get the remaining time of animation in react native?

animation

react-native

react-animated