箭頭在圓形動畫的外半徑上旋轉

Question

想法是使箭頭在外半徑上繞圓旋轉。 因此，箭頭必須堅持外半徑，然后跟隨外半徑。

單擊“開始”按鈕時它必須開始旋轉，單擊“停止”按鈕后必須減速並停止

目前的HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800px" height="800px">

  <path class="shape" fill="blue" d="
            M 100, 200 
            m 0 -100 
            a 100 100 0 1 0 1 0
            z
            m -1 25    
            a 75 75 0 1 1 -1 0     
            Z" />
</svg>

圓圈+箭頭
https://codepen.io/tom-truyen/pen/KORgYX

Answer 1

在您的甜甜圈SVG下方插入以下內容：

    <script>
        var animate = false;
        var angle = 0;
        function tick() 
        { 
            document.querySelector(".arrow").setAttribute("style", "transform:translate(75px,175px) rotate("+angle+"deg) translate(0px,-112px);");
            angle += 1;
            if (animate) { window.requestAnimationFrame(tick); }
        }
    </script>

    <button onClick="window.animate=true;tick();">start</button>
    <button onClick="window.animate=false;">stop</button>

並將箭頭css更改為：

    .arrow {
        height: 50px;
        width: 50px;
        position: absolute;
        transform:translate(75px,175px) translate(0px,-112px);
    }

那應該做您想要的。