React Native中能否将Animated Value设为动画目标值？切换视图遇阻

你当前代码无法生效的核心原因是：不能把Animated.Value（包括interpolate返回的实例）作为Animated.timing的toValue参数——这个参数需要传入具体的数值，而非Animated.Value实例，所以动画根本无法正确触发目标值的计算。

下面给你两种简单可行的实现方式，都能完成你想要的"0和1互相切换"的动画效果：

方法一：用额外状态跟踪切换状态（推荐，逻辑更清晰） #

我们可以用一个普通的state变量记录当前的开关状态，直接根据这个状态设置动画的目标值：

constructor(props) {
  super(props);
  this.state = {
    filterOffset: new Animated.Value(0),
    isFilterActive: false // 记录当前是0还是1的状态
  };
}

handleToggle = () => {
  // 根据当前状态计算目标值
  const targetValue = this.state.isFilterActive ? 0 : 1;
  
  Animated.timing(this.state.filterOffset, {
    toValue: targetValue,
    duration: 100,
    useNativeDriver: false // 如果你的动画样式支持原生驱动（比如transform、opacity），可以设为true
  }).start(() => {
    // 动画结束后更新状态，确保下次切换逻辑正确
    this.setState(prevState => ({ isFilterActive: !prevState.isFilterActive }));
  });
}

// 触发切换的视图
<View onPress={this.handleToggle}>
  {/* 你的触发元素，比如按钮文字 */}
</View>

// 需要应用动画的视图
<Animated.View 
  style={{
    // 举个例子：根据filterOffset的值切换透明度
    opacity: this.state.filterOffset.interpolate({
      inputRange: [0, 1],
      outputRange: [0.3, 1]
    }),
    // 你可以添加其他动画样式，比如位移、缩放等
  }}
>
  {/* 动画视图的内容 */}
</Animated.View>

方法二：监听Animated.Value的当前值来切换 #

如果你不想额外维护一个state，可以通过给Animated.Value添加监听器，实时获取它的当前数值，以此判断目标值：

constructor(props) {
  super(props);
  this.state = {
    filterOffset: new Animated.Value(0)
  };
  this.currentOffsetValue = 0;
  
  // 添加监听器跟踪当前值
  this.valueListener = this.state.filterOffset.addListener(({ value }) => {
    this.currentOffsetValue = value;
  });
}

componentWillUnmount() {
  // 组件卸载时一定要移除监听器，避免内存泄漏
  this.state.filterOffset.removeListener(this.valueListener);
}

handleToggle = () => {
  const targetValue = this.currentOffsetValue === 0 ? 1 : 0;
  
  Animated.timing(this.state.filterOffset, {
    toValue: targetValue,
    duration: 100,
    useNativeDriver: false
  }).start();
}

补充说明 #

如果你的动画样式是transform（比如平移、旋转）这类支持原生驱动的属性，记得把useNativeDriver设为true，这样动画性能会更好；如果是像backgroundColor这类不支持原生驱动的属性，就保持false即可。

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