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

如何解决React-native-svg 组上的 React-native-reanimated 转换转换不起作用

我正在尝试实现一组 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,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 ，该组件工作正常，因此我对库已正确安装并且正在运行感到满意，因此它只能是我的实现。如果您需要更多信息，请不要犹豫询问任何帮助，将不胜感激。提前致谢。

解决方法

为了让其他遇到此问题的人受益，解决方案是如此明显，以至于很容易被遗漏：我没有将转换应用于 '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,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

我希望这对某人有所帮助！