无法使用 React-Motion 为 React-Konva Circle 制作动画

Question

我正在使用 React-Konva 在我的应用程序中绘制形状。我在另一个圆圈内画了一个圆圈并将它们分组。现在，我想要做的是在单击按钮时圆圈应该动画（水平移动）。这是我的相关代码：

<Layer>
  <Motion style={{a: spring(open ? 400 : x)}}>
    {({a}) => {
      return(
        <div
          style={{
            WebkitTransform: `translate3d(${a}px, 0, 0)`,
            transform: `translate3d(${a}px, 0, 0)`,
          }}
        >
          <Group draggable={true}>
            <CircleComponent
              x={parseInt(x)}
              y={parseInt(y)}
              radius={parseInt(radius)}
              color={color}
              shadowValue={parseInt(shadowValue)}
            />
            <CircleComponent
              x={parseInt(x)}
              y={parseInt(y)}
              radius={parseInt(innerRadius)}
              color={innerColor}
            />
          </Group>
        </div>
      );}
    }
  </Motion>
</Layer>

现在我收到此错误：“无法读取未定义的属性 '_idCounter'”。这是因为我在 Layer 标记中引入了一个 div 容器。但是，如果我删除 div 容器并将转换样式应用于 Group 标记，则什么也不会发生。我已阅读文档，Group class 不接受任何样式道具。有什么解决方法吗？

Answer 1

您不能将 div 添加为 Layer 的子元素，因为图层只能包含 Konva.Group 或 Konva.Shape 作为子元素（而不是 DOM 元素).

Group不要style属性，但是可以用offsetX和offsetY来实现我们的效果。类似于：

<Group draggable={true} offsetX={a}>

无法使用 React-Motion 为 React-Konva Circle 制作动画

Unable to animate React-Konva Circle using React-Motion

javascript

animation

reactjs

konvajs

react-motion