Impossible d'animer React-Konva Circle en utilisant React-Motion

Question

J'utilise React-Konva pour dessiner des formes dans mon application. J'ai dessiné un cercle à l'intérieur d'un autre cercle et je les ai regroupés. Maintenant, ce que je veux faire, c'est que sur un bouton, les cercles devraient s'animer (se déplacer horizontalement). Voici mon code connexe:

<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> 

Je suis en ce moment obtiens cette erreur: « Impossible de lire la propriété « _idCounter » undefined ». Et c'est parce que j'introduis un conteneur div à l'intérieur du tag Layer. Mais si je supprime le conteneur div et applique le style de transformation à la balise de groupe, rien ne se passe. J'ai lu les docs et la classe Group n'accepte aucun accessoire de style. Y a-t-il une solution de contournement?

Answer 1

Vous ne pouvez pas ajouter div comme un enfant de Layer parce que la couche ne peut avoir Konva.Group ou Konva.Shape que les enfants (éléments non DOM).

Group ne le font pas style la propriété, mais vous pouvez utiliser offsetX et offsetY pour atteindre notre effet. Quelque chose comme:

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