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);
    }

这应该可以满足您的要求。

箭头在圆形动画的外半径上旋转

1 个答案: