React-native-svg 组上的 React-native-reanimated 翻译转换不起作用

Question

我正在尝试实现一组 svg 元素的简单动画。该组应该从（横向强制）视口的顶部开始（translateY：-900），然后从屏幕顶部进入视口（translateY：0）。我正在尝试使用 react-native-svg 和 react-native-reanimated (v2) 来做到这一点。这是我到目前为止的代码：

import React, { useEffect } from 'react'
import Svg, {
  G,
  Path,
  Defs,
  LinearGradient,
  Stop,
  Line,
} from 'react-native-svg'
import Animated, {
  useSharedValue,
  useAnimatedProps,
  withTiming,
  Easing,
} from 'react-native-reanimated'

const AnimatedGroup = Animated.createAnimatedComponent(G)

const Curtains = ({}) => {
  const vOffset = useSharedValue(-900)

  const config = {
    duration: 1500,
    easing: Easing.bezier(0.5, 0.01, 0, 1),
  }

  const animatedProps = useAnimatedProps(() => {
    return {
      translateY: withTiming(vOffset.value, config),
    }
  })

  const animateIn = () => {
    vOffset.value = 0
  }

  useEffect(() => {
    animateIn()
  }, [])

  return (
    <Svg
      width="100%"
      height="100%"
      viewBox="0 0 1600 900"
      // onLayout={() => animateIn()}
    >
      <AnimatedGroup id="bothCurtains" animatedProps={animatedProps}>
        // A whole bunch of sub-groups and path in here
      </AnimatedGroup>
    </Svg>
  )
}

export default Curtains

如您所见，我已尝试在 SVG 元素上同时使用 useEffect 和 onLayout 事件来触发动画，但似乎都不起作用 - 没有发生过渡。

抱歉，如果我遗漏了一些明显的东西，这是我第一次尝试 react-native 项目。我真的很喜欢它，但这让我很困惑。与 Reanimated 文档中显示的示例相比，我相信我的实现是正确的，但由于某种原因它不起作用。我已经创建了一个测试组件，它在一个视图元素上使用 useAnimatedStyle，它工作正常，所以我很满意该库已正确安装并且正在运行，所以它只能是我的实现。如果您需要更多信息，请随时询问，我们将不胜感激。提前致谢。

Answer 1

为了其他遇到此问题的人的利益，解决方案非常明显，很容易被忽略：我没有将转换应用于 'translateY'，而是将其应用于 'y'，它首先起作用时间.

import React, { useEffect } from 'react'
import Svg, {
  G,
  Path,
  Defs,
  LinearGradient,
  Stop,
  Line,
} from 'react-native-svg'
import Animated, {
  useSharedValue,
  useAnimatedProps,
  withTiming,
  Easing,
} from 'react-native-reanimated'

const AnimatedGroup = Animated.createAnimatedComponent(G)

const Curtains = ({}) => {
  const vOffset = useSharedValue(-900)

  const config = {
    duration: 1500,
    easing: Easing.bezier(0.5, 0.01, 0, 1),
  }

  const animatedProps = useAnimatedProps(() => {
    return {
      y: withTiming(vOffset.value, config),
    }
  })

  const animateIn = () => {
    vOffset.value = 0
  }

  useEffect(() => {
    animateIn()
  }, [])

  return (
    <Svg
      width="100%"
      height="100%"
      viewBox="0 0 1600 900"
    >
      <AnimatedGroup id="bothCurtains" animatedProps={animatedProps}>
        // A whole bunch of sub-groups and path in here
      </AnimatedGroup>
    </Svg>
  )
}

export default Curtains

希望对大家有所帮助！

Answer 2

您应该也可以使用 translateY，但它需要采用转换样式。在您的示例中，您尝试在不在转换数组中的情况下使用 translateY。这也将允许您应用其他变换，如缩放、旋转、skewX、skewY 等...

关于转换的文档... https://reactnative.dev/docs/transforms#transform

return {
   transform: [{ translateY: withTiming(vOffset.value, config)}]
};

React-native-svg 组上的 React-native-reanimated 翻译转换不起作用

React-native-reanimated translate transition on React-native-svg group not working

react-native

react-native-svg

react-native-reanimated

react-native-reanimated-v2