我是否应该使用useEffect在React Native Reanimated的属性值改变时进行动画？

fjnneemd 于 2023-01-21 发布在 React

关注(0)|答案(1)|浏览(143)

我需要一个视图，以动画的地方时，一些 prop 的价值变化使用React本机复活
我只能找到动画，例如，一个用户点击使用onPress函数来改变useSharedValue值的值。但我似乎找不到如何动画时， prop 的变化。所以目前我使用useEffect。

export const SomeComponent = ({
  top,
  left
}) => { 
  const animation = useSharedValue({
    top,
    left
  });

  useEffect(() => {
    animation.value = { top, left };
  }, [top, left]);

  const animationStyle = useAnimatedStyle(() => {
    return {
      top: withTiming(animation.value.top, {
      duration: 1000
      }),
      left: withTiming(animation.value.left, {
      duration: 1000
      })
    };
  });
}

在上面的代码中， prop 可以改变值，我应该像现在这样用useEffect触发动画吗？或者有没有更好的方法只使用Reanimated。

react-native

来源：https://stackoverflow.com/questions/75166339/should-i-be-using-useeffect-to-animate-on-prop-value-change-with-react-native-re

1条答案

按热度按时间

hfyxw5xn1#

有意思。这有用吗？我从没见过这么做的。
是的，useEffect是一个触发动画的好方法。通常我会这样做：

const duration = 1000;

export const SomeComponent = ({
  top: topProp,
  left: leftProp
}) => { 
  const top = useSharedValue(topProp);
  const left = useSharedValue(leftProp);

  useEffect(() => {
    top.value = withTiming(topProp, { duration });
    left.value = withTiming(leftProp, { duration });
  }, [topProp, leftProp]);

  const animationStyle = useAnimatedStyle(() => ({
    top: top.value,
    left: left.value,
  }));

  return <Animated.View style={animationStyle}>
    //...
}

1.这些值被拆分成原语，我不知道这是否会影响性能--我以前从未将对象用作共享值。
1.风格直接来自共同的价值观。

useEffect等待 prop 更改，然后运行动画。
我从来没有尝试过在样式中运行动画-似乎它不应该对我起作用，但我可能是错的！

赞(0）回复(0）举报 2023-01-21

我来回答

我是否应该使用useEffect在React Native Reanimated的属性值改变时进行动画？

1条答案

相关问题

热门标签

最新问答