reactjs - 在 Reanimated 2 中设置另一个值后立即设置值

Question

我正在使用 Reanimated 2 使用 React Native 构建游戏，它的性能非常好，但我有一个问题。

我正在使用共享值来为视图设置动画，因为我们都知道设置共享值的值会自动更改视图的样式，我的问题是，假设它将是用户按下的按钮给视图一个只需通过更改 View 的动画样式中使用的共享值来提高海拔，海拔只是在 y 轴上的平移。

高程值最初为 0。用户单击按钮，值立即更改为例如 500，没有过渡和动画，视图将立即显示在其起始位置上方的 500 处。从 500 开始，View 将通过动画回落到 0。我尝试了下面的代码，但没有帮助。

const elevation = useSharedValue(0);
const handleClick = () => {
   elevation.value = 500;
   elevation.value = withTiming(0, { duration: 1000 });
}
const viewAnimatedStyle = useAnimatedStyle(() => ({
   transform: [
        {
            translateY: elevation.value,
        }
    ]
}))

按下按钮时，视图不会移动，似乎 Reanimated 跳过了第一个elevation.value分配，并且由于第二个分配是 0（相同的旧值），因此视图不会移动。

[编辑] Animated.View 是从 Reanimated 2 导入并使用的。为了简单起见，我把它省略了。

标签： reactjsreact-nativeanimationreact-native-reanimatedreact-native-reanimated-v2

Answer 1

您需要将 <Animated.View> 用于 useAnimatedStyle，如果您现在使用它将无法正常工作。

function App() {
  const width = useSharedValue(50);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      width: width.value,
    };
  });

  // attach animated style to a View using style property
  return <Animated.View style={[styles.box, animatedStyle]} />;
}