javascript - 无法使用 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 类不接受任何样式 Prop 。有什么解决方法吗？

Answer 1

您不能将 div 添加为 Layer 的子级，因为层只能有 Konva.Group 或 Konva.Shape 作为子元素(不是 DOM 元素)。

Group 没有style 属性，但是您可以使用offsetX 和offsetY 来实现我们的效果。像这样的东西:

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