动画时钟可视化

功能概述

这个创意示例演示了使用关系图节点和连线构建的模拟时钟。时钟面、时针、分针和秒针都是实时动画的图元素。它展示了关系图在创建动态的、基于时间的可视化方面的多功能性，超出了传统关系图的范围。

核心特性实现

时钟面节点

const createClockFace = () => {
    const nodes = [];
    const lines = [];

    // 中心节点
    nodes.push({ id: 'center', text: '', x: 400, y: 300, width: 10, height: 10 });

    // 小时标记
    for (let i = 0; i < 12; i++) {
        const angle = (i * 30) * Math.PI / 180;
        const x = 400 + Math.cos(angle) * 250;
        const y = 300 + Math.sin(angle) * 250;
        nodes.push({ id: `hour-${i}`, text: i.toString(), x, y });
    }

    return { nodes, lines };
};

指针动画

const updateClockHands = () => {
    const now = new Date();
    const hours = now.getHours() % 12;
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    const hourAngle = ((hours + minutes / 60) * 30) * Math.PI / 180;
    const minuteAngle = ((minutes + seconds / 60) * 6) * Math.PI / 180;
    const secondAngle = (seconds * 6) * Math.PI / 180;

    updateHandPosition('hour-hand', hourAngle, 150);
    updateHandPosition('minute-hand', minuteAngle, 200);
    updateHandPosition('second-hand', secondAngle, 220);
};

useEffect(() => {
    const timer = setInterval(updateClockHands, 1000);
    return () => clearInterval(timer);
}, []);

创意使用场景

时区显示：显示不同时区的多个时钟。

计时器和倒计时：带有动画指针的可视化倒计时。

仪表板小部件：监控仪表板中的时间显示。

教育工具：教授模拟时钟阅读。

日程可视化：在时钟面上显示基于时间的日程。

小玩意-时钟