Reanimated 的 withTiming 回调不执行是怎么回事？

程序员丽苹提问于 2026-03-15 11:44:20 阅读 44

移动

我用 Reanimated 2 做一个动画，想在动画结束后执行点逻辑，但传给 withTiming 的回调根本没触发，这是为啥？

我试过把回调写成第二个参数，也检查了 shared value 的值确实在变，但就是不进回调。代码大概是这样的：

const opacity = useSharedValue(1);

// 触发动画
opacity.value = withTiming(0, { duration: 500 }, (isFinished) => {
  console.log('动画结束了吗？', isFinished); // 这行完全没输出
});

Redux 性能优化组件设计

我来解答赞 11 收藏

反馈

1 条解答

迷人的子轩 Lv1

你的回调写法本身没问题，问题在于 Reanimated 2 的 worklet 机制。

动画回调是在 UI 线程的 worklet 上下文中执行的，不能直接调用 JS 函数。你需要用 runOnJS 包装一下：

import { runOnJS } from 'react-native-reanimated';



const opacity = useSharedValue(1);



// 触发动画

opacity.value = withTiming(0, { duration: 500 }, (isFinished) => {

  runOnJS((finished) => {

    console.log('动画结束了吗？', finished);

  })(isFinished);

});

或者抽成独立函数更清晰：

const onAnimationComplete = (isFinished) => {

  console.log('动画结束了吗？', isFinished);

};



opacity.value = withTiming(0, { duration: 500 }, (isFinished) => {

  runOnJS(onAnimationComplete)(isFinished);

});

另外提醒一下，这种回调在开发模式下有时会不触发（尤其是热重载后），可以试试重新编译一下应用确认下是不是配置问题。

2026-03-16 19:07