用Javascript的Animate方法实现圆周运动

20241203

先使用svg画一个圆形，让它做圆周运动

    <div id="circle">
        <svg  xmlns="http://www.w3.org/2000/svg" version="1.1">
            <circle cx="100" cy="50" r="40" stroke="black"
            stroke-width="2" fill="orange" />
        </svg>
    </div>

假设我们希望它的运动半径是 $r$ ，初始位置在轨道为 $\alpha$ ，注：a为弧度制，我们已经知道了二维的平移矩阵为

\begin{pmatrix} 1 & 0 & r \times \cos \alpha \\ 0 & 1 & r \times \sin \alpha \\ 0 & 0 & 0 \end{pmatrix}

这就是这个圆形的初始位置

接下来运行了若干帧后，轨道滑过了 $\theta$ ，那么我们可以得到b

\begin{pmatrix} 1 & 0 & r \times \cos (\alpha+\theta) \\ 0 & 1 & r \times \sin (\alpha+\theta) \\ 0 & 0 & 0 \end{pmatrix}

我们用一个函数来产生这些矩阵

    let createMatrixByDeg = (r, deg) => {
        let ang = deg % (2 * Math.PI)
        let arr = [1, 0, 0, 1, r * Math.cos(ang), r * Math.sin(ang)]
        return `matrix(${arr[0]}, ${arr[1]},${arr[2]}, ${arr[3]}, ${arr[4]}, ${arr[5]})`
    }

    let createFrames = (r, originalDeg, counts) => {
        const res = []
        for(let i = 0; i < counts; i++) {
            const t = i / counts
            const frameDeg = originalDeg * (1 - t) + (originalDeg + 2*Math.PI) * t
            res.push({
                transform: createMatrixByDeg(r, frameDeg)
            })
        }
        return res;
    }

调用createFrames就可以得到这个动画的关键帧

     circle.animate(createFrames(30, 0, 60), {
            duration:2000,
            iterations:Infinity
        })