React-Motion을 사용하여 React-Konva Circle을 애니메이션 할 수 없습니다.

React-Konva를 사용하여 앱에서 모양을 그립니다. 나는 다른 원 안에 원을 그려서 그룹화했다. 이제, 버튼 클릭시 원이 움직여 야합니다 (수평으로 이동).React-Motion을 사용하여 React-Konva Circle을 애니메이션 할 수 없습니다.

<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 클래스는 어떤 스타일 소품도 받아들이지 않는다. 해결 방법이 있습니까? 계층 어린이 (안 DOM 요소)로만 Konva.Group 또는 Konva.Shape을 가질 수 있기 때문에

출처

2017-10-02 Arslan Tariq