我正在使用 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 。有什么解决方法吗?
最佳答案
您不能将 div
添加为 Layer
的子级,因为层只能有 Konva.Group
或 Konva.Shape
作为子元素(不是 DOM 元素)。
Group
没有style
属性,但是您可以使用offsetX
和offsetY
来实现我们的效果。像这样的东西:
<Group draggable={true} offsetX={a}>
关于javascript - 无法使用 React-Motion 为 React-Konva Circle 制作动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46521345/