react-native - 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，它工作正常，所以我很满意该库已正确安装并且正在工作，所以它只能是我的实现。如果您需要更多信息，请不要犹豫，任何帮助将不胜感激。提前致谢。

标签： react-nativereact-native-reanimatedreact-native-svgreact-native-reanimated-v2

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

我希望这对某人有帮助！