一圈圈抛出的svg粒子

红影

马黑黑 发表于 2024-9-16 23:09
一般也不会有什么难度。做法流程：先构思好自己想要的结果，然后写JS代码生成svg代码。JS里用到的只是也 ...

黑黑说的这个流程十分清楚，只是对JS语句不熟悉啊

马黑黑

红影 发表于 2024-9-17 10:45
黑黑说的这个流程十分清楚，只是对JS语句不熟悉啊

js是有些难，但是玩这么久了，应该可以自己写写几句了

马黑黑

红影 发表于 2024-9-17 10:44
这个移出半径大点反倒更好看点，其实五六百就够移出了，但散开的效果貌似不太相同。

所以一切需要取舍

马黑黑

红影 发表于 2024-9-17 10:41
点开来的代码和你3楼给出的不一样啊。

你可能混淆了一些东东。

一楼的按钮名称看清楚，是要显示 svg 代码，意思是程序生成的内容。后面给出的是程序源码。

红影

马黑黑 发表于 2024-9-17 11:36
js是有些难，但是玩这么久了，应该可以自己写写几句了

一直有畏难情绪，没学透啊

红影

马黑黑 发表于 2024-9-17 11:37
所以一切需要取舍

嗯嗯，按效果来定数值。

红影

马黑黑 发表于 2024-9-17 11:38
你可能混淆了一些东东。

一楼的按钮名称看清楚，是要显示 svg 代码，意思是程序生成的内容。后面给出 ...

嗯，我是说一般看到svg图片，打开的就是生成的内容吧，能看到源码么？

马黑黑

红影 发表于 2024-9-17 11:42
嗯，我是说一般看到svg图片，打开的就是生成的内容吧，能看到源码么？

.svg图片可以像查看页面源码那样查看到它的源码

马黑黑

红影 发表于 2024-9-17 11:41
嗯嗯，按效果来定数值。

一般都这么做

马黑黑

红影 发表于 2024-9-17 11:40
一直有畏难情绪，没学透啊

不可能学透，但学到了什么，就应该是会了，不能老丢给老师

马黑黑

起个网名好难 发表于 2024-9-17 09:51
${}有点多看得头晕

但是这是拼接字串最简洁的方法

马黑黑

起个网名好难 发表于 2024-9-17 09:42
似乎粒子分布并非均匀的，有意为之？

分三批抛出，按被三、二整除的方式分派，没有刻意设计一圈多少个，一切看总数的情况

红影

马黑黑 发表于 2024-9-17 11:46
.svg图片可以像查看页面源码那样查看到它的源码

原来是这样，反倒是显示代码让它体现出了计算后的结果呢。

红影

马黑黑 发表于 2024-9-17 11:46
一般都这么做

还需要多比较几次，才知道那种效果最好

红影

马黑黑 发表于 2024-9-17 11:47
不可能学透，但学到了什么，就应该是会了，不能老丢给老师

不分会点仍然拼凑不出来，需要的也得会，那就不知道能遇上什么需要的情形了。

起个网名好难

马黑黑 发表于 2024-9-17 11:48
但是这是拼接字串最简洁的方法

简洁是简洁，多了也就复杂了。

起个网名好难

马黑黑 发表于 2024-9-17 11:50 分三批抛出，按被三、二整除的方式分派，没有刻意设计一圈多少个，一切看总数的情况

做个均匀的练习

1. <svg version="1.1" width="400" height="400" viewBox="0 0 400 400" >
2. </svg>
3. <script>
4. let idx = 0;
5. let svgObj = document.querySelector('svg');
6. for(idx = 0 ; idx < 60; idx++) {
7. let gidx = parseInt(idx / 20);
8. let crObj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
9. crObj.setAttribute('cx', 200);
10. crObj.setAttribute('cy', 200);
11. crObj.setAttribute('r', 7.5);
12. crObj.setAttribute('fill', "#" + Math.random().toString(16).substring(2,8));
13. let ang = idx < 20 ? idx * 18 : idx < 40 ? (idx - 20) * 18 : (idx - 40) * 18;
14. crObj.setAttribute('transform', `rotate(${ang}, 200, 200)`);
16. let aObj = document.createElementNS("http://www.w3.org/2000/svg", "animate");
17. aObj.setAttribute('id', "a"+idx);
18. aObj.setAttribute('attributeName', "cy");
19. aObj.setAttribute('from', 200);
20. aObj.setAttribute('to', 700);
21. aObj.setAttribute('dur', "6s");
22. let bt = gidx == 0 ? '0;a40.begin+1' : gidx == 1 ? 'a0.begin+1' : 'a20.begin+1';
23. aObj.setAttribute('begin', bt);
25. crObj.appendChild(aObj)
26. svgObj.appendChild(crObj);
27. }
28. </script>

复制代码

马黑黑

起个网名好难 发表于 2024-9-17 15:55
做个均匀的练习

马黑黑

起个网名好难 发表于 2024-9-17 15:51
简洁是简洁，多了也就复杂了。

不见得吧？如果拼接较复杂的字串，一系列的加号引号才更容易看花眼

马黑黑

红影 发表于 2024-9-17 12:04
不分会点仍然拼凑不出来，需要的也得会，那就不知道能遇上什么需要的情形了。

其实真去做了，弄不来的就会其查资料，然后做出来了，知识与技能就是自己的了