React Native如何获取动画剩余时长并从中断位置恢复动画

核心原理 #

React Native的stopAnimation方法支持传入回调参数，执行时会返回当前动画的瞬时值，我们可以基于这个值和总动画时长计算剩余时长，再用剩余时长启动新的动画即可实现从暂停位置继续播放的效果。

• 淡入动画是从0到1的线性变化，剩余时长计算公式：剩余时长 = 总动画时长 * (1 - 当前动画值)
• 若当前动画值等于1（动画已完成），剩余时长直接返回0

完整修改后的代码 #

import React, { useRef } from "react";
import { Animated, Text, View, StyleSheet, Button, SafeAreaView } from "react-native";     

// 抽离总动画时长为常量，方便统一修改和计算
const FADE_TOTAL_DURATION = 5000;

const App = () => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  // 通用的动画启动/恢复方法
  const startOrResumeFade = () => {
    // 先停止当前动画，同时获取当前动画值
    fadeAnim.stopAnimation(currentValue => {
      // 已经完成动画直接返回，剩余时长为0
      if (currentValue >= 1) return 0;
      // 计算剩余时长
      const remainingDuration = FADE_TOTAL_DURATION * (1 - currentValue);
      // 用剩余时长启动新动画，从当前值过渡到1
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: remainingDuration,
        useNativeDriver: true // 建议加上提升动画性能
      }).start();
    })
  };

  const stop = () => {
    fadeAnim.stopAnimation()
  };

  // 如果需要单独获取剩余时长不启动动画，可以封装这个方法
  const getRemainingDuration = async () => {
    const currentValue = await new Promise(resolve => fadeAnim.stopAnimation(resolve));
    return currentValue >=1 ? 0 : FADE_TOTAL_DURATION * (1 - currentValue);
  };

  return (
    <SafeAreaView style={styles.container}>
      <Animated.View
        style={[
          styles.fadingContainer,
          {
            opacity: fadeAnim
          }
        ]}
      >
        <Text style={styles.fadingText}>Fading View!</Text>
      </Animated.View>
      <View style={styles.buttonRow}>
        <Button title="Fade In View" onPress={startOrResumeFade} />
        <Button title="stop" onPress={stop} />
        <Button title="Resume" onPress={startOrResumeFade} />
      </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;

关键修改说明 #

• 将原来固定时长的fadeIn方法替换为startOrResumeFade，每次执行前都会先获取当前动画的进度，动态计算剩余动画时长
• 新增了独立的getRemainingDuration方法，可单独调用获取剩余时长，动画完成时返回0
• 增加了useNativeDriver: true配置，使用原生驱动渲染动画，大幅提升动画流畅度

内容的提问来源于stack exchange，提问作者Hassaan Shahzad