马黑黑 发表于 2024-9-16 23:09
一般也不会有什么难度。做法流程：先构思好自己想要的结果，然后写JS代码生成svg代码。JS里用到的只是也 ...
黑黑说的这个流程十分清楚，只是对JS语句不熟悉啊{:4_173:}
红影 发表于 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是有些难，但是玩这么久了，应该可以自己写写几句了
一直有畏难情绪，没学透啊{:4_173:}
马黑黑 发表于 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
一般都这么做
还需要多比较几次，才知道那种效果最好{:4_173:}
马黑黑 发表于 2024-9-17 11:47
不可能学透，但学到了什么，就应该是会了，不能老丢给老师
不分会点仍然拼凑不出来，需要的也得会，那就不知道能遇上什么需要的情形了。
马黑黑 发表于 2024-9-17 11:48
但是这是拼接字串最简洁的方法
简洁是简洁，多了也就复杂了。
马黑黑 发表于 2024-9-17 11:50
分三批抛出，按被三、二整除的方式分派，没有刻意设计一圈多少个，一切看总数的情况
做个均匀的练习<br>
<div style="margin:32px auto;text-align:center;">
<svg version="1.1" width="400" height="400" viewBox="0 0 400 400" >
</svg>
<script>
letidx = 0;
let svgObj = document.querySelector('svg');
for(idx = 0 ; idx < 60; idx++){
let gidx = parseInt(idx / 20);
let crObj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
crObj.setAttribute('cx', 200);
crObj.setAttribute('cy', 200);
crObj.setAttribute('r', 7.5);
crObj.setAttribute('fill', "#" + Math.random().toString(16).substring(2,8));
let ang = idx < 20 ? idx * 18 : idx < 40 ? (idx - 20) * 18 : (idx - 40) * 18;
crObj.setAttribute('transform', `rotate(${ang}, 200, 200)`);
let aObj = document.createElementNS("http://www.w3.org/2000/svg", "animate");
aObj.setAttribute('id', "a"+idx);
aObj.setAttribute('attributeName', "cy");
aObj.setAttribute('from', 200);
aObj.setAttribute('to', 700);
aObj.setAttribute('dur', "6s");
let bt = gidx == 0 ? '0;a40.begin+1' : gidx == 1 ? 'a0.begin+1' : 'a20.begin+1';
aObj.setAttribute('begin', bt);
crObj.appendChild(aObj)
svgObj.appendChild(crObj);
}
</script>
</div>
<svg version="1.1" width="400" height="400" viewBox="0 0 400 400" >
</svg>
<script>
letidx = 0;
let svgObj = document.querySelector('svg');
for(idx = 0 ; idx < 60; idx++){
let gidx = parseInt(idx / 20);
let crObj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
crObj.setAttribute('cx', 200);
crObj.setAttribute('cy', 200);
crObj.setAttribute('r', 7.5);
crObj.setAttribute('fill', "#" + Math.random().toString(16).substring(2,8));
let ang = idx < 20 ? idx * 18 : idx < 40 ? (idx - 20) * 18 : (idx - 40) * 18;
crObj.setAttribute('transform', `rotate(${ang}, 200, 200)`);
let aObj = document.createElementNS("http://www.w3.org/2000/svg", "animate");
aObj.setAttribute('id', "a"+idx);
aObj.setAttribute('attributeName', "cy");
aObj.setAttribute('from', 200);
aObj.setAttribute('to', 700);
aObj.setAttribute('dur', "6s");
let bt = gidx == 0 ? '0;a40.begin+1' : gidx == 1 ? 'a0.begin+1' : 'a20.begin+1';
aObj.setAttribute('begin', bt);
crObj.appendChild(aObj)
svgObj.appendChild(crObj);
}
</script>
起个网名好难 发表于 2024-9-17 15:55
做个均匀的练习
{:4_199:}
起个网名好难 发表于 2024-9-17 15:51
简洁是简洁，多了也就复杂了。
不见得吧？如果拼接较复杂的字串，一系列的加号引号才更容易看花眼
红影 发表于 2024-9-17 12:04
不分会点仍然拼凑不出来，需要的也得会，那就不知道能遇上什么需要的情形了。
其实真去做了，弄不来的就会其查资料，然后做出来了，知识与技能就是自己的了