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

Posted 2023-02-19

【中文标题】在 Reanimated 2 中设置另一个值后立即设置值

【英文标题】：Set value immediately after another one have been set in Reanimated 2

【发布时间】：2021-12-25 23:32:32

【问题描述】：

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

我正在使用共享值来为 View 设置动画，因为我们都知道设置共享值的值会自动改变 View 的样式，我的问题是假设它是一个用户按下的按钮View 只需更改 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（相同的旧值），因此视图不会别动。

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

【参考方案1】：

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] />;

【讨论】：

感谢您的回答，但 Animated.View 是从 Reanimated 2 导入并使用的。为了简单起见，我把它省略了。