svg path A 模拟在操场上跑步

最新推荐文章于 2024-09-25 17:58:55 发布

大大大白菜66

最新推荐文章于 2024-09-25 17:58:55 发布

阅读量401

点赞数 8

文章标签： html

本文链接：https://blog.csdn.net/weixin_38536027/article/details/134603632

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>完整跑道</title>
    <style>

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px;
    height: 480px;
    display: block;
}
 .my-svg-path{
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000; 
    /* forwards不能缺失，保留最后一帧动画 */
    animation: move 3s forwards;
}
@keyframes move {
    100%{
            stroke-dashoffset: 0;
            /* transform: scale3d(1, 1, 1); */
    }
}
.to-animate {
    width: 50px;
    height: 50px;
    /* background: url('./images/r.gif') no-repeat center center; */
    /* background-size: 100% 100%; */
    background: crimson;
    position: absolute;
    top: -25px;
    left: -25px;
    border-radius: 25px;
    z-index: 1;
}
    </style>
</head>
<body>
    <!-- <g>容器标签  -->
<!-- 指令 A (绝对) a (相对)
名称 elliptical arc 椭圆弧
参数
(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

rx ry 是椭圆的两个半轴的长度。

x-axis-rotation 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。

large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。

sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。

x y 是圆弧终点的坐标。 -->
<!-- <g stroke-width='6' stroke='black'> -->
    <div class="to-animate"></div>
<svg>
    <path id="path" d="M 100,100 A 150 100 230 1 1 100 100.05" stroke="#e5e9f2" fill="green" stroke-width='20'> </path>
    
    <path  class="my-svg-path" d="M 100,100 A 150 100 230 1 1 100 100.05" stroke='yellow' fill="none" stroke-width='6'> </path>
</svg>
<!-- </g> -->


<script>
     var start = performance.now();
        var box = document.querySelector('.to-animate');
        var path = document.querySelector('#path');
        var len = path.getTotalLength();

        function frame() {
            var now = performance.now();
            var phase = ((now - start) / 6000) % 1;
            var point = path.getPointAtLength(len * phase);
            box.style.transform = 'translate3d(' + point.x + 'px,' + point.y + 'px,0)'; // IE
            box.style.WebkitTransform = 'translate3d(' + point.x + 'px,' + point.y + 'px,0)'; // Chrome&Safari  
            requestAnimationFrame(frame);//执行动画
        }

        frame();


        
</script>
</body>
</html>

还没写完，要根据后台返回数据，模拟小人固定跑多少圈。下面的进度只有一圈，小人跑多圈。

进度都可以自己改。