Question

我目前正在努力使我的Svg正确设置动画。我试图使其可拖动，同时还要根据多边形上的固定点调整其位置。用图像说明这一点可能是最简单的。这里的第一张图片是初始渲染的样子，也是我想要的输出。

但是，一旦我拖动气泡，我希望我的多边形进行动画处理并跟随它，从而改变多边形左，右角的X和Y位置。不幸的是，这不会发生。

part of svg changed, however polygon does not follow.

这是我的代码：

const AnimatedPolygon = Animated.createAnimatedComponent(Polygon)

PanResponder逻辑：

this._eventResponder = PanResponder.create({
      //normal stuff here
      onPanResponderGrant: ( e, gesture ) => {
        this.state.eventAnimation.extractOffset()
      },
      onPanResponderMove: (e, gesture) => {
        if (gesture.numberActiveTouches === 2) {
         //handling pinching
        } else {
        Animated.event([ null,
        { dx: this.state.eventAnimation.x, dy: this.state.eventAnimation.y},
      ])(e, gesture)} // function logic continues from here

以下是设置三角形点的组成部分：

let leftCornerX = (deviceWidth/2 - 50) - 25 + 100
let leftCornerY = ((sceneHeight + layoutY ) / 2) - 75 - 50 + 100

let rightCornerX = (deviceWidth/2 - 50) + 25 + 100
let rightCornerY = ((sceneHeight + layoutY ) / 2) - 75 - 50 + 100

let bottomX = deviceWidth/2 + 100
let bottomY = ((sceneHeight + layoutY) /2 ) + 100

let points = `${leftCornerX},${leftCornerY}, ${bottomX},${bottomY} ${rightCornerX},${rightCornerY}`

<AnimatedPolygon
   points={points}
   fill="white"
   stroke="black"
   strokeWidth="3"
   transform={{translate: `${eventAnimation.x}, ${eventAnimation.y}`}}
/>

无论我尝试什么，我都无法使我的三角形跟随我的小气泡。我可以console.log我的eventAnimation.x和.y值，看看它们正在变化。它们是我用来拖动气泡的相同值，因此我知道Animated.Event已正确返回。但是，看来我的变换对象的格式必须不正确，才能使Polygon动态调整其点原点。

我学习了如何根据这两篇文章来格式化对象： https://github.com/react-native-community/react-native-svg/issues/88 https://medium.com/@richardrosko/matrix-transform-in-svg-in-react-native-53a9357a811b

不幸的是，没有一个使我成功。任何帮助表示赞赏。

SVG转换/可拖动

0 个答案: