html,css,js被称作是前端开发的老三件，虽然近年来被很多新兴的开发框架取代了部分地位，但是由于它们的简介性，依赖少的特点，依旧被很多前端开发者所青睐。
前几天看到一个网站上有按照路径运动的小图像动来动去地很好玩，于是想要尝试写一个代码实现它。
总体流程
看着很复杂实际代码并不是很困难。我们可以用HTML来规定图标的运动路径(用svg)，用CSS来设计一些样式，再利用JavaScript来设计动画。
补充信息：SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的图像格式，允许用户通过标签来定义图形的形状、颜色、文本和其他属性。
开始写代码
首先我们可以设计一个小球在一条贝塞尔曲线上移动。贝塞尔曲线是一种广泛用于图形设计和动画中的曲线，能够创建平滑的路径。以下是定义贝塞尔曲线的代码示例：
<path id="path" d="M 50 350 Q 250 50 450 350" fill="transparent" stroke="lightgray" stroke-width="2"/>
在这段代码中，d="M 50 350 Q 250 50 450 350"表示从点（50，350）开始运动，路径是一条贝塞尔曲线。具体来说：
- M 50 350：
M表示移动到起点（50, 350）。 - Q 250 50 450 350：
Q表示使用一个控制点（250, 50）来绘制曲线，终点为（450, 350）。
此外，其他参数描述了轨迹的外观：fill="transparent"表示路径内部不填充颜色，stroke="lightgray"设置路径的颜色为浅灰色，stroke-width="2"则定义了边框的宽度为2个单位。
完整的代码 如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>路径动画示例</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
svg {
width: 80%;
height: auto;
}
.dot {
fill: red;
transition: transform 0.3s ease;
}
</style>
</head>
<body>
<svg viewBox="0 0 500 400">
<path id="path" d="M 50 350 Q 250 50 450 350" fill="transparent" stroke="lightgray" stroke-width="2"/>
<circle class="dot" r="5"></circle>
</svg>
<script>
const path = document.getElementById('path');
const dot = document.querySelector('.dot');
const pathLength = path.getTotalLength();
// 动画函数
function animateDot() {
let startTime = null;
function step(timestamp) {
if (!startTime) startTime = timestamp;
const progress = (timestamp - startTime) / 3000; // 动画持续时间3000ms
const point = path.getPointAtLength(progress * pathLength);
dot.setAttribute('cx', point.x);
dot.setAttribute('cy', point.y);
if (progress < 1) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
}
// 开始动画
animateDot();
</script>
</body>
</html>
在这个完整的代码中，我们创建了一个SVG画布，其中包含了定义的贝塞尔曲线和一个小球。通过JavaScript，我们实现了小球沿着曲线移动的动画效果，使其在视觉上更具动感和趣味性。这种实现方式不仅直观易懂，还能灵活调整，以适应不同的动画需求。
扩展思考
如果我们不想要运动小球，我们想要移动一个图片，则把dot改成image即可。
<image class="dot" href="图片路径" width="30" height="30" x="0" y="0"></image>
并且不要忘了把dot属性设置的名称从cx,cy改成x,y哦！
===
前端学习分享，欢迎讨论，斧正。
