React Konva Rotation/Revolution Animation

Question

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>

score 2 · Accepted Answer · answered Sep 29 '21 at 16:16

You can use Konva.Animation to move the rectangle as you want it. It is up to you to calculate position of the shape.

import React from "react";
import { render } from "react-dom";
import { Stage, Layer, Rect } from "react-konva";
import Konva from "konva";

const App = () => {
  const rectRef = React.useRef();
  const [animating, setAnimation] = React.useState(false);

  React.useEffect(() => {
    if (!animating) {
      return;
    }
    const node = rectRef.current;
    const anim = new Konva.Animation(
      (frame) => {
        const centerX = 200;
        const centerY = 200;
        const radius = 200;

        node.x(centerX + radius * Math.cos(frame.time / 1000));
        node.y(centerY + radius * Math.sin(frame.time / 1000));
      },
      [node.getLayer()]
    );
    anim.start();
    return () => anim.stop();
  }, [animating]);
  return (
    <>
      <button
        onClick={() => {
          setAnimation(!animating);
        }}
      >
        Toggle animation
      </button>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Rect
            x={200}
            y={200}
            width={100}
            height={100}
            fill="red"
            shadowBlur={10}
          />
          <Rect
            ref={rectRef}
            width={100}
            height={100}
            fill="blue"
            shadowBlur={10}
            // set default position
            // animation will overwrite it
            x={400}
            y={200}
          />
        </Layer>
      </Stage>
    </>
  );
};

render(<App />, document.getElementById("root"));

https://codesandbox.io/s/react-konva-animate-rotation-bxbtj

score 1 · Answer 2 · edited Sep 29 '21 at 22:33

1

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

edited Sep 29 '21 at 22:33

Marvin Fischer

2,552
3
23
34

answered Sep 29 '21 at 19:30

theta28

73
2
9

React Konva Rotation/Revolution Animation

2 Answers2