legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 09:31:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

switch back to css anim

Browse Source
This commit is contained in:
legop3
2026-02-10 13:42:23 -05:00
parent 8ea0f7be70
commit 1ac46f4a03
3 changed files with 20 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/TopDownMap.jsx
+9 -39
View File
@@ -266,47 +266,17 @@ function SideBrushVisual({ cx, cy, current, overcurrent }) {
if (mag < 10) mag = 0;
const color = currentColor(current * 3, overcurrent);
const armLength = 43;
const groupRef = React.useRef(null);
const speedRef = React.useRef(0);
const targetSpeedRef = React.useRef(0);
const angleRef = React.useRef(0);
const lastTimeRef = React.useRef(null);
const direction = -1;
React.useEffect(() => {
const baseSpeed = mag > 0 ? (2 * Math.PI) / 0.65 : 0;
targetSpeedRef.current = direction * baseSpeed;
}, [mag, direction]);
React.useEffect(() => {
let rafId = null;
const tick = (time) => {
if (lastTimeRef.current == null) {
lastTimeRef.current = time;
rafId = requestAnimationFrame(tick);
return;
}
const dt = (time - lastTimeRef.current) / 1000;
lastTimeRef.current = time;
const tau = 0.2; // smooth start/stop time constant
const alpha = 1 - Math.exp(-dt / tau);
speedRef.current += (targetSpeedRef.current - speedRef.current) * alpha;
angleRef.current += speedRef.current * dt;
if (groupRef.current) {
const deg = ((angleRef.current * 180) / Math.PI) % 360;
groupRef.current.setAttribute('transform', `rotate(${deg} ${cx} ${cy})`);
}
rafId = requestAnimationFrame(tick);
};
rafId = requestAnimationFrame(tick);
return () => {
if (rafId) cancelAnimationFrame(rafId);
lastTimeRef.current = null;
};
}, [cx, cy]);
const spinDuration = mag > 0 ? 0.65 : null;
const spinDirection = 'reverse';
return (
<g ref={groupRef}>
<g
style={{
transformOrigin: `${cx}px ${cy}px`,
animation: spinDuration ? `spin ${spinDuration}s linear infinite` : 'none',
animationDirection: spinDuration ? spinDirection : 'normal',
}}
>
<circle cx={cx} cy={cy} r={10} fill="#64748b" stroke="#64748b" strokeWidth="1" />
{[0, 120, 240].map((deg) => {
const rad = toRad(deg);