答案是利用JavaScript操作SVG属性并结合requestAnimationFrame可实现流畅动画。通过DOM方法获取元素，修改如cx、fill等属性，配合定时器控制动画节奏，添加事件实现交互效果。
想用JavaScript操作SVG实现图形动画，其实并不复杂。SVG本身是基于XML的矢量图形格式，可以直接嵌入HTML，结合JavaScript能轻松实现交互和动态效果。核心思路是利用DOM方法控制SVG元素的属性，配合定时器或requestAnimationFrame实现流畅动画。
创建基础SVG图形
在HTML中插入SVG容器，定义基本图形如圆形、矩形或路径：
<svg width="500" height="300"> <circle id="myCircle" cx="50" cy="150" r="20" fill="blue" /> <rect id="myRect" x="10" y="10" width="40" height="40" fill="red" /> </svg>
这些图形可以通过id被JavaScript选中并修改属性。
使用JavaScript控制动画
通过修改SVG元素的属性来实现位移、缩放或颜色变化。常用的方法包括：
立即学习“Java免费学习笔记（深入）”；
- 获取元素：document.getElementById("myCircle")
- 修改属性：setAttribute('cx', 新值)
- 使用setInterval或requestAnimationFrame控制动画节奏
例如让圆向右移动：
const circle = document.getElementById("myCircle");
let pos = 50;
function animate() {
pos += 2;
circle.setAttribute("cx", pos);
if (pos < 450) requestAnimationFrame(animate);
}
animate();
实现更自然的动画效果
使用CSS transition也能简化部分动画，但JavaScript更适合复杂逻辑。想要缓动效果，可以引入数学函数：
- 使用Math.sin或Math.pow调整运动速度
- 结合时间戳控制帧率
- 添加鼠标事件实现交互，比如点击变色
例如点击改变颜色：
circle.addEventListener("click", function() {
const currentColor = circle.getAttribute("fill");
circle.setAttribute("fill", currentColor === "blue" ? "green" : "blue");
});
基本上就这些。掌握SVG结构和JavaScript对DOM的操作，就能做出丰富的矢量动画。不复杂但容易忽略细节，比如坐标系范围和单位。多试几次，慢慢就能熟练了。
