Мне нужно сделать плавную анимацию увеличения длины линии окружности. Я использую <canvas>
, но он не работает должным образом. Также я использую ReactJS + Two.js.
Sandbox демо анимации: https://1jxhv.csb.app/
Sandbox код: https://codesandbox.io/s/relaxed-lalande-1jxhv?file=/src/App.js
Код:
import React, { useRef, useEffect } from "react";
import Two from "two.js";
let two;
let stop = 100;
export default () => {
let gameRef = useRef();
useEffect(() => {
two = new Two({ width: 310, height: 310 }).appendTo(gameRef.current);
setInterval(() => {
if (stop > 0) {
two.update();
stop = stop - 1;
draw();
}
}, 1000 / 30);
}, [gameRef]);
const draw = () => {
let points = [];
let centerX = 155;
let centerY = 155;
let radius = 150;
let steps = 100;
for (var i = 0; i < steps; i++) {
if (i > stop)
points.push(
new Two.Anchor(
centerX + radius * Math.cos((2 * Math.PI * -i - 160) / steps),
centerY + radius * Math.sin((2 * Math.PI * -i - 160) / steps)
)
);
}
two.clear();
let path = two.makeCurve(points, true);
path.noFill().linewidth = 5;
path.cap = path.join = "round";
path.stroke = "black";
};
return (
<div className="game-container col">
<div ref={gameRef} />
</div>
);
};