使用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> 相关推荐
mapaler 2020-07-17
MIKUScallion 2020-07-05
Dickzeng 2020-07-05
wallowyou 2020-06-28
hermanncain 2020-06-25
mapaler 2020-06-21
Dickzeng 2020-06-17
程序员俱乐部 2020-06-11
lanzhusiyu 2020-06-09
hermanncain 2020-05-09
Elena0 2020-04-11
Leonwey 2020-04-11
wallowyou 2020-03-05
jinxiutong 2020-02-10
jinxiutong 2020-02-03
mqbeauty 2020-01-08
mapaler 2020-01-17
Elena0 2020-01-12
Dickzeng 2020-01-05