React Native动画问题：value<0.5无日志输出，如何监听动画完成？

一、为什么scaleValue < 0.5时无日志输出 #

你的动画目标值设为了0.8，动画是从初始值1缩放到0.8，整个过程中scaleValue的取值范围是1 → 0.8，永远不会低于0.5，所以这个判断条件永远不会触发。如果要测试该逻辑，需将动画的toValue改成小于0.5的数值（比如0.4）。

二、如何在动画完成时打印日志 #

Animated.spring()的start()方法可接收一个回调函数，动画完成后会自动执行该函数，直接在此添加日志打印即可。

三、代码优化点 #

1. 不要用useState存储Animated.Value：Animated.Value是可变实例，用useState会导致组件不必要重渲染，应换成useRef保存，避免动画实例被重复创建。
2. 移除动画监听器：使用addListener后，需在组件卸载时移除监听器，防止内存泄漏。

修改后的完整代码 #

import { StyleSheet, Text, View, TouchableOpacity, Animated } from 'react-native';
import React, { useRef, useEffect } from 'react';

const App = ({ navigation }) => {
  // 用useRef保存Animated.Value实例
  const scaleValue = useRef(new Animated.Value(1)).current;

  const handlePressIn = () => {
    Animated.spring(scaleValue, {
      toValue: 0.8, // 若要测试小于0.5的逻辑，可改为0.4
      useNativeDriver: true
    }).start(() => {
      // 动画完成时执行的回调
      console.log('动画已完成！');
    });
  };

  useEffect(() => {
    // 添加监听器并保存订阅ID
    const listenerId = scaleValue.addListener(({ value }) => {
      if (value < 0.5) {
        console.log('Circle is small!');
      }
    });

    // 组件卸载时移除监听器
    return () => {
      scaleValue.removeListener(listenerId);
    };
  }, [scaleValue]);

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={[styles.circle, { transform: [{ scale: scaleValue }] }]}
        onPress={handlePressIn}
      >
        <Text>Press me!</Text>
      </TouchableOpacity>
    </View>
  )
}

export default App

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0'
  },
  circle: {
    width: 300,
    height: 300,
    borderRadius: 150,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  }
});

关键说明 #

• 替换useState为useRef后，动画实例不会随组件重渲染重置，保证动画连续性。
• 在start()的回调中实现动画完成后的日志打印，这是React Native Animated官方推荐的动画结束监听方式。
• 通过useEffect管理监听器生命周期，组件卸载时移除监听器，避免内存泄漏。

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