DS制作的SVG小球动画

马黑黑

暂停 继续

马黑黑

代码

1. <svg id="container" width="500" height="500" style="border: 1px solid #ccc"></svg>
   
2. <div style="margin-top: 10px">
   
3.     <button id="pauseBtn">暂停</button>
   
4.     <button id="resumeBtn">继续</button>
   
5. </div>
   
6. 
   
7. <script>
   
8. const svg = document.getElementById('container');
   
9. const centerX = 250;
   
10. const centerY = 250;
    
11. const R = 200; // 大球半径
    
12. const r = 5;   // 小球半径
    
13. const balls = [];
    
14. const numBalls = 50;
    
15. 
    
16. // 物理参数
    
17. const physics = {
    
18.     boundaryDampening: 0.95,  // 边界碰撞能量损失
    
19.     collisionDampening: 0.98, // 小球碰撞能量损失
    
20.     maxSpeed: 4,             // 最大速度限制
    
21.     repelDistance: 2*r + 2    // 碰撞检测距离
    
22. };
    
23. 
    
24. // 动画控制变量
    
25. let isAnimating = true;
    
26. let animationFrameId = null;
    
27. 
    
28. // 创建大球容器
    
29. const container = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    
30. container.setAttribute('cx', centerX);
    
31. container.setAttribute('cy', centerY);
    
32. container.setAttribute('r', R);
    
33. container.setAttribute('fill', 'none');
    
34. container.setAttribute('stroke', '#333');
    
35. svg.appendChild(container);
    
36. 
    
37. // 创建小球
    
38. function createBall() {
    
39.     const angle = Math.random() * Math.PI * 2;
    
40.     const radius = Math.random() * (R - r - 10);
    
41.     const ball = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    
42.    
    
43.     const x = centerX + Math.cos(angle) * radius;
    
44.     const y = centerY + Math.sin(angle) * radius;
    
45.    
    
46.     ball.setAttribute('cx', x);
    
47.     ball.setAttribute('cy', y);
    
48.     ball.setAttribute('r', r);
    
49.     ball.setAttribute('fill', `hsl(${Math.random()*360}, 70%, 50%)`);
    
50.    
    
51.     return {
    
52.         element: ball,
    
53.         x,
    
54.         y,
    
55.         vx: 0,
    
56.         vy: 0
    
57.     };
    
58. }
    
59. 
    
60. // 初始化小球
    
61. for (let i = 0; i < numBalls; i++) {
    
62.     const ball = createBall();
    
63.     svg.appendChild(ball.element);
    
64.    
    
65.     // 设置随机初始速度
    
66.     const speed = 1 + Math.random() * 2;
    
67.     const dir = Math.random() * Math.PI * 2;
    
68.     ball.vx = Math.cos(dir) * speed;
    
69.     ball.vy = Math.sin(dir) * speed;
    
70.    
    
71.     balls.push(ball);
    
72. }
    
73. 
    
74. // 碰撞响应函数
    
75. function handleCollision(b1, b2) {
    
76.     // 计算相对位置
    
77.     const dx = b2.x - b1.x;
    
78.     const dy = b2.y - b1.y;
    
79.     const distance = Math.sqrt(dx*dx + dy*dy);
    
80.    
    
81.     // 碰撞法线方向
    
82.     const nx = dx / distance;
    
83.     const ny = dy / distance;
    
84.    
    
85.     // 相对速度
    
86.     const relativeVelocity = {
    
87.         x: b1.vx - b2.vx,
    
88.         y: b1.vy - b2.vy
    
89.     };
    
90.    
    
91.     // 速度沿法线方向的分量
    
92.     const speedAlongNormal = relativeVelocity.x * nx + relativeVelocity.y * ny;
    
93.    
    
94.     // 确保小球正在接近（避免重复处理）
    
95.     if (speedAlongNormal > 0) return;
    
96.    
    
97.     // 弹性系数
    
98.     const e = physics.collisionDampening;
    
99.    
    
100.     // 冲量计算
     
101.     const impulse = -(1 + e) * speedAlongNormal / (1/1 + 1/1); // 质量都为1
     
102.    
     
103.     // 应用冲量
     
104.     b1.vx -= impulse * nx;
     
105.     b1.vy -= impulse * ny;
     
106.     b2.vx += impulse * nx;
     
107.     b2.vy += impulse * ny;
     
108.    
     
109.     // 位置修正（防止重叠）
     
110.     const penetration = 2*r - distance;
     
111.     const correction = penetration / (1/1 + 1/1) * 0.8;
     
112.     b1.x -= nx * correction;
     
113.     b1.y -= ny * correction;
     
114.     b2.x += nx * correction;
     
115.     b2.y += ny * correction;
     
116. }
     
117. 
     
118. // 边界碰撞检测
     
119. function checkBoundary(ball) {
     
120.     const dx = ball.x - centerX;
     
121.     const dy = ball.y - centerY;
     
122.     const distance = Math.sqrt(dx*dx + dy*dy);
     
123.     const maxDistance = R - r;
     
124.    
     
125.     if (distance > maxDistance) {
     
126.         const nx = dx / distance;
     
127.         const ny = dy / distance;
     
128.         
     
129.         // 位置修正
     
130.         ball.x = centerX + nx * maxDistance;
     
131.         ball.y = centerY + ny * maxDistance;
     
132.         
     
133.         // 速度反射
     
134.         const dot = ball.vx * nx + ball.vy * ny;
     
135.         ball.vx = (ball.vx - 2 * dot * nx) * physics.boundaryDampening;
     
136.         ball.vy = (ball.vy - 2 * dot * ny) * physics.boundaryDampening;
     
137.     }
     
138. }
     
139. 
     
140. // 速度限制
     
141. function clampSpeed(ball) {
     
142.     const speed = Math.sqrt(ball.vx*ball.vx + ball.vy*ball.vy);
     
143.     if (speed > physics.maxSpeed) {
     
144.         ball.vx = ball.vx / speed * physics.maxSpeed;
     
145.         ball.vy = ball.vy / speed * physics.maxSpeed;
     
146.     }
     
147. }
     
148. 
     
149. // 动画循环
     
150. function animate() {
     
151.     // 更新位置
     
152.     balls.forEach(ball => {
     
153.         ball.x += ball.vx;
     
154.         ball.y += ball.vy;
     
155.     });
     
156.    
     
157.     // 检测小球碰撞（双重循环优化版）
     
158.     for (let i = 0; i < balls.length; i++) {
     
159.         const b1 = balls[i];
     
160.         
     
161.         // 先检测边界碰撞
     
162.         checkBoundary(b1);
     
163.         
     
164.         // 检测与其他小球的碰撞
     
165.         for (let j = i + 1; j < balls.length; j++) {
     
166.             const b2 = balls[j];
     
167.             
     
168.             // 快速距离平方检测
     
169.             const dx = b2.x - b1.x;
     
170.             const dy = b2.y - b1.y;
     
171.             const distSq = dx*dx + dy*dy;
     
172.             
     
173.             if (distSq < physics.repelDistance*physics.repelDistance) {
     
174.                 handleCollision(b1, b2);
     
175.             }
     
176.         }
     
177.         
     
178.         // 限制最大速度
     
179.         clampSpeed(b1);
     
180.         
     
181.         // 更新显示
     
182.         balls.forEach(b => {
     
183.             b.element.setAttribute('cx', b.x);
     
184.             b.element.setAttribute('cy', b.y);
     
185.         });
     
186.     }
     
187.    
     
188.     // 条件请求动画帧
     
189.     if (isAnimating) {
     
190.         animationFrameId = requestAnimationFrame(animate);
     
191.     }
     
192. }
     
193. 
     
194. // 初始化启动动画
     
195. animate();
     
196. 
     
197. // 添加控制事件监听
     
198. document.getElementById('pauseBtn').addEventListener('click', () => {
     
199.     isAnimating = false;
     
200.     cancelAnimationFrame(animationFrameId); // 立即停止当前帧
     
201. });
     
202. 
     
203. document.getElementById('resumeBtn').addEventListener('click', () => {
     
204.     if (!isAnimating) {
     
205.         isAnimating = true;
     
206.         animate(); // 重新启动动画循环
     
207.     }
     
208. });
     
209. </script>

复制代码

马黑黑

第 159 行，在论坛发布时，原始代码需要写成：

const b1 = balls[ i ];

不然会被论坛相关程序写成：

const b1 = balls<i>;

浏览器会报错，脚本不能运行。

马黑黑

这组代码，我一问二追问再整合而得，实际上如果设计好问题、一次性给出完整任务，DeepSeek会一次性给出答案。

一问：用svg生成50个小球，让它们在一个大球里移动，不能跑出来

        DS思考后生成的代码立马可以在线运行。它在分析过程中提到了小球彼此间碰撞问题，说用户没有问道所以忽略了。于是我追问：

二问：处理小球碰撞问题

        DS很快给出答案，也能在线运行。

三问：加入暂停、继续机制

        这回DS给出的代码有点偷懒，只给改变和添加的部分，需要讲两组代码（二问和三问所得的代码）整合一下，然后就得出二楼的代码和一楼的效果。

梦江南

老师又出新作！辛苦了！

花飞飞

高手和高手的碰撞，一个会问，一个会答。。。产生的作品完美。。

花飞飞

二楼的说明是白老师自己优化组合之后加上的吧。。。小白最需要了。。
这DS给的代码体量足够。。二百多行
感觉之前老师自己写的小球运动的并没有这么多。。

花飞飞

粒子之间互相碰撞并不反方向运行，而是擦肩，继续向前。。对方向的影响不大。。
跑得速度有点快。看着还有白色的残影。。
颜色漂亮，花花绿绿跟糖果似的

红影

记得黑黑说过可以让DS写代码，这个就是实例了呢。DS强大，黑黑能把它给的代码重新加工并能使用到论坛中，这个也需要本事呢

红影

这个代码够长的，DS没遵守最简洁的潜规则啊，只是按需求给答案呢

红影

让代码组成的软件去写代码，这感觉很奇妙

马黑黑

红影 发表于 2025-2-26 19:17
让代码组成的软件去写代码，这感觉很奇妙

是不是啊？

上海有一个AI搜索，如果用户的搜索量不太高（一天100次），完全可以用它来做搜索引擎，叫秘塔AI搜索，网址 https://metaso.cn/，去年上线。它也可以写代码，现在还引入了DeepSeek。要它写代码和做网络搜索一样都占日次数。

此外，阿里的通义千问可能更强大，性能和速度有保障。目前我还不太了解它是否收费，也没有深入试用过，检测性的试用感觉良好。

几乎所有的AI可能都应该注册，秘塔可以用微信注册，通义都可以用支付宝和淘宝注册。

马黑黑

红影 发表于 2025-2-26 19:16
这个代码够长的，DS没遵守最简洁的潜规则啊，只是按需求给答案呢

这可能也是必须的吧，毕竟功能太多

马黑黑

红影 发表于 2025-2-26 19:15
记得黑黑说过可以让DS写代码，这个就是实例了呢。DS强大，黑黑能把它给的代码重新加工并能使用到论坛中，这 ...

不懂代码的或不太懂代码的，也完全可以通过DS做APP或网页之类的

马黑黑

梦江南 发表于 2025-2-26 16:44
老师又出新作！辛苦了！

这是人工智能生成的代码

马黑黑

花飞飞 发表于 2025-2-26 18:47
粒子之间互相碰撞并不反方向运行，而是擦肩，继续向前。。对方向的影响不大。。
跑得速度有点快。看着还有 ...

整个原理和我们之前做的差不多，差别是它考虑的更多。比如方向，它是根据碰撞角度改变方向的。至于残影，那可能是你的显示设备（显卡和显示器分辨率、刷新率）达不到要求造成的，理论上应该非常流畅。

马黑黑

花飞飞 发表于 2025-2-26 18:41
二楼的说明是白老师自己优化组合之后加上的吧。。。小白最需要了。。
这DS给的代码体量足够。。 ...

它的功能更齐全，所以代码量会大一些

马黑黑

花飞飞 发表于 2025-2-26 18:36
高手和高手的碰撞，一个会问，一个会答。。。产生的作品完美。。

果酱果酱

红影

马黑黑 发表于 2025-2-26 19:25
是不是啊？

上海有一个AI搜索，如果用户的搜索量不太高（一天100次），完全可以用它来做搜索引擎，叫 ...

现在这么多的好软件啊，谢谢黑黑推荐

红影

马黑黑 发表于 2025-2-26 19:26
这可能也是必须的吧，毕竟功能太多

对它来说可能还感觉不长，我们跟着黑黑玩的都是最最简洁的，才感觉它长