react konva animation to follow a path - reactjs

Question

Hey I am new to react konva and wanted to create an animation in which a rectangle follows a user defined path of dots. First user defines the path by clicking on screen and initializing the destination dots and then the rectangle should follow the path accordingly
const [coords, setCoords] = useState([]); //path dots variable
const [points, setPoints] = useState([250, 250]); //rectangle x,y variable
const ref= useRef(null);
const [check, setCheck] = useState(false); //check wheather user has clicked the start tracing button
const [i, setI] = useState(0); //index state variable
const handleStart= () => {
if (check === false) {
setCheck(true);
} else {
setCheck(false);
}
};
const handleClick = (e) => {
if (check === false) {
var stage = e.target.getStage();
var newcoord = stage.getPointerPosition();
var temp = [newcoord.x, newcoord.y];
setCoords((coords) => [...coords, temp]);
}
};
useEffect(() => {
if (!check) {
return;
}
var node = ref.current;
var anim = new Konva.Animation(function (frame) {
if (frame.time / 10 >= coords[i][0]) {
alert("reached");
setPoints([coords[i][0], coords[i][1]]);
setI(i + 1);
} else {
node.x(frame.time / 10);
}
if (frame.time / 10 >= coords[i][1]) {
alert("reached");
setPoints([coords[i][0], coords[i][1]]);
setI(i + 1);
} else {
node.y(frame.time / 10);
}
}, node.getLayer());
anim?.start();
return () => anim?.stop();
}, [check, i]);
return (
<div>
<Stage
onMouseDown={(e) => handleClick(e)}
width={window.innerWidth}
height={window.innerHeight}
>
<Layer>
<Group >
<Rect
width={50}
height={50}
x={points[0]}
y={points[1]}
strokeWidth={2}
fill="black"
opacity={1}
draggable
ref={ref}
/>
</Group>
{coords.map((key, index) => (
<Circle
x={key[0]}
y={key[1]}
numPoints={1}
radius={4}
fill="black"
strokeWidth={2}
/>
))}
</Layer>
</Stage>
<Button onClick={handleStart}>Start Tracing</Button>
</div>
this is my code but it doesnt seem to work as intended.Any help is much appreciated.
PS if you have any queries plz lemme know

Answer 1

You can use some Konva API to work with the path and get points on it.
useEffect(() => {
if (!check) {
return;
}
var node = ref.current;
// generate path from points
let data = coords
.map(([x, y], index) => {
if (index === 0) {
return `M ${x} ${y}`;
}
return `L ${x} ${y}`;
})
.join(" ");
const firstPoint = coords[0];
data += ` L ${firstPoint[0]} ${firstPoint[1]}`;
const path = new Konva.Path({
data
});
var anim = new Konva.Animation(function (frame) {
const length = path.getLength();
const delta = ((frame.time / 2000) % 1) * length;
const point = path.getPointAtLength(delta);
if (point) {
node.position(point);
}
}, node.getLayer());
anim?.start();
return () => {
anim?.stop();
path.destroy();
};
}, [check, i]);
https://codesandbox.io/s/react-konva-follow-path-mwd2w