React Konva旋转/旋转动画

Question

嘿，我是新来反应的。我正在创建一个项目，在这个项目中，我想让一个矩形围绕一个对象旋转。有没有人能建议我如何做到这一点。任何帮助都是非常感谢的。

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

Answer 1

您可以使用Konva.Animation根据需要移动矩形。这是由你来计算形状的位置。

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

Answer 2

您可以使用node的.rotate属性

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