制作React-native-svg动画

lqfhib0f 于 2023-11-21 发布在 React

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

我正在尝试用下面的代码动画SVG：

//create animated path component

const AnimatedPath = Animated.createAnimatedComponent(Path);

  P1 = new Animated.ValueXY({x: 0, y: 1});
  P2 = new Animated.ValueXY({x: 1, y: 1});
  P3 = new Animated.ValueXY({x: 2, y: 1});
  path = `M ${this.P1._value} ${this.P1._value} S ${this.P2.x._value} ${this.P2.y._value} ${this.P3.x._value} ${this.P3.y._value}`;

            Animated.timing(this.P1, {
              toValue: {x: 3, y: 3},
              duration: 300,
              useNativeDriver: 'true',
            }).start();

        <Svg height="50%" width="50%" viewBox="0 0 4 4 " fill="blue">
          {/* <Path /> */}
          {console.log('this.P1.x: ', this.P1.x)}
          <AnimatedPath
            d={this.path}
            // d="M 0 1 S 1 1 2 1"
            fill="none"
            stroke="red"
          />
        </Svg>

字符串
但它不工作。有什么办法让它有生命吗？
我们也应该使用react-native-reanimated 2吗？

react-native

来源：https://stackoverflow.com/questions/63934357/animating-the-react-native-svg

1条答案

按热度按时间

bbuxkriu1#

请查看reanimated2文档中的useAnimatedProps。请注意，文档中的示例有一些缺陷，这里是一个演示：

import { StyleSheet } from 'react-native';
import {
  Animated,
  useSharedValue,
  useAnimatedProps,
  withTiming
} from 'react-native-reanimated';
import Svg, { Path } from 'react-native-svg';

const AnimatedPath = Animated.createAnimatedComponent(Path);

function App() {
  const radius = useSharedValue(50);

  const animatedProps = useAnimatedProps(() => {
    // draw a circle
    const path = `
    M 100, 100
    m -${radius}, 0
    a ${radius},${radius} 0 1,0 ${radius * 2},0
    a ${radius},${radius} 0 1,0 ${-radius * 2},0
    `;
    return {
      d: path
    };
  });

  // attach animated props to an SVG path using animatedProps
  return <Svg><AnimatedPath animatedProps={animatedProps} fill="black" onPress={() => radius.value = withTiming(Math.random() * 180)} /></Svg>
}

字符串

我知道你可能找到了解决方案，但我想为偶然发现这个问题的人提供一个答案。

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

我来回答

制作React-native-svg动画

1条答案

相关问题

热门标签

最新问答