使用svg把小球按照制定轨迹进行运动

使用svg，把小球按照制定轨迹进行运动的代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> 
        body {
            background: #fff;
        }
        .to-animate {
            width: 50px;
            height: 50px;
            background: green;
            position: absolute;
            top: -25px;
            left: -25px;
            border-radius: 25px;
            opacity: 1;
        }
        svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 640px;
            height: 480px;
            display: #fff;
        }
        path {
            fill: none;
            stroke: red;
        }
    </style>
</head>
<body>
    <div class="to-animate"></div>
    <svg xmlns="http://www.w3.org/2000/svg" >
        <path d="m 227.6035,38.929859 c -17.098,-6.615379 -35.43714,-5.654746 -53.72008,-5.654746 -28.88045,0 -78.608562,23.436783 -69.27063,60.788513 8.30718,33.228734 73.51169,-17.343534 73.51169,25.446354 0,111.52514 -170.5191138,45.29238 -156.919185,154.09181 2.924851,23.39881 26.328181,58.41063 40.996904,76.33907 58.597841,71.61958 74.550601,-43.6165 130.059141,-32.51479 51.57633,10.31527 43.90688,155.47922 168.22868,115.92228 167.51141,-53.29909 -59.7547,-112.77835 8.48212,-169.64236 48.39108,-40.32591 95.07686,92.99483 193.67503,8.48212 36.29006,-31.10577 60.13025,-119.23372 -1.41369,-145.6097 C 531.50007,113.83552 494.02863,119.47348 466.5165,101.13206 447.3794,88.373995 454.4009,55.952532 431.17434,45.99829 381.32712,24.635198 348.07325,65.928309 303.94257,71.444645 274.33127,75.146057 256.00673,42.987462 227.6035,38.929859 z"
        />
    </svg>
    <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>
使用svg把小球按照制定轨迹进行运动

猜你喜欢
