reactjskonvajsreact-konvakonvakonvajs-reactjs

React Konva Rotation/Revolution Animation


Hey I am new to react konva. I am creating a project in which i want a rectangle to revolves around an object. Can anybody advise me on how to achieve this. Any help is much appreciated

    <div>
      <Stage width={500} height={500}>
        <Layer>
            <Rect ///<=this rect is the center object
              width={50}
              height={100}
              x={20}
              y={20}
              strokeWidth={2}
              stroke="red"
              fill="blue"
              opacity={1}         
            />
        
            <Rect ///<=this rect should revolve around it
              width={50}
              height={100}
              x={50}
              y={50}
              strokeWidth={2}
              stroke="black"
              fill="black"
              opacity={1}         
            />
        </Layer>
      </Stage>
      <Button onClick={handleRotate}>Start Rotation</Button>
    </div>

Solution

  • you can use the .rotate property of node

    const ref=useRef(null)
    
    useEffect(() => {
      
        var rect= ref.current;
        var anim = new Konva.Animation((frame) => {
          rect?.rotate((frame.timeDiff *90) / 1000);
        }, rect?.getLayer());
        anim?.start();
        
      }, [input]);
    
    <Rect
    ref={ref}
    />