svg动画：自己触发自己
本帖最后由 马黑黑 于 2024-9-13 20:10 编辑 <br /><br /><style>.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px / 26px sans-serif; }
.artbox mark { color: black; background: lightblue; padding: 2px 4px; }
.textRed { color: red; }
.textMid { text-align: center; }
.showDiv { position: relative; display: grid; place-items: center; }
.artbox mark { background: lightblue; padding: 0 6px; }
#codebox { display: none; }
#text { width: 98%; height: 360px; padding: 8px; font-size: 16px; border: 3px solid lightblue; border-radius: 6px; resize: none; tab-size: 4; }
</style>
<div class="artbox">
<p>以下代码在svg里绘制一个圆，<mark><circle></mark>标签里包含一个<span class="textRed">animate</span>动画，该动画会令其父元素按动画标签所描述的方式运动。下面是代码和效果演示：</p>
<div class="hE"><pre id="code">
<svg width="600" height="150" style="border:1px solid gray;fill:steelblue;stroke: none">
<circle cx="50" cy="75" r="30">
<animate
attributename="cx"
values="50;550;50"
dur="6s"
begin="0s;m1.end"
id="m1"
/>
</circle>
</svg>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></div>
<p>动画代码解释：3~9行代码我们分行写以便可以更好地观察理解。下面是动画代码说明——</p>
<p>第4行：指定 animate 动画要改变的 circle 标签属性 cx，即圆心水平方向位置；<br>第5行：values 属性可以替代 from 和 to/by 属性，值至少包含两组用于描述运动的数值，各组数值间用分号隔开。这里，令圆心 cx 坐标从50（像素）出发，移动到550，再移动到原点50；<br>第6行：一个运动周期的时长，6秒；<br>第7行：begin 属性用来触发动画，支持多值，值间用分号隔开。0s 表示0秒开始运行动画，即页面一打开就运行，m1.end 表示，id="m1" 的动画结束（end）时触发；<br>第8行：给 animate 动画标签赋予 id 标识。这里请特别留意第7行代码的动画触发条件之一：自身运行结束。</p>
<p>本例没有设置<mark>repeatCount="indefinite"</mark>却能永动运行动画，关键点在代码7、8行。</p>
</div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
var runCodes = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
btn1.onclick = () => {
runCodes(code.innerText, sbox1);
btn1.disabled = true;
}
</script>
设置了6秒结束时就是开始时，所以就永动了 代码在白老师手里就是出神入化，总有无限多的创意 SVG知 识点多多。。{:4_173:} 它的出发条件是m1.end，而它自身又是m1 ，所以变成永动了？ 这个其实并不是很好理解，但它就那么实实在在地实现了{:4_173:} style="border:1px solid gray;fill:steelblue;stroke: none"
这个也挺奇怪，边框是给svg的，颜色是给里面的圆的。 红影 发表于 2024-9-13 20:54
style="border:1px solid gray;fill:steelblue;stroke: none"
这个也挺奇怪，边框是给svg的，颜色是给里面 ...
svg很多属性可以用在CSS里面，stroke，fill等，这点比canvas画布强。 花飞飞 发表于 2024-9-13 20:24
设置了6秒结束时就是开始时，所以就永动了
严格讲不是6秒，是自己的动画结束再触发，你设计3秒0.5秒都一样 红影 发表于 2024-9-13 20:50
这个其实并不是很好理解，但它就那么实实在在地实现了
应该是好理解的：自己动画结束了再次触发动画 花飞飞 发表于 2024-9-13 20:25
代码在白老师手里就是出神入化，总有无限多的创意
果酱了 花飞飞 发表于 2024-9-13 20:25
SVG知 识点多多。。
svg琐碎，但它的知识体系是简洁的 不懂~~~就先看看代码 小辣椒 发表于 2024-9-13 22:00
不懂~~~就先看看代码
svg有自己的一整套标签和标签属性 马黑黑 发表于 2024-9-13 21:29
svg很多属性可以用在CSS里面，stroke，fill等，这点比canvas画布强。
哦，这个倒是方便了呢。 马黑黑 发表于 2024-9-13 21:30
应该是好理解的：自己动画结束了再次触发动画
跟小猫抓自己尾巴似的呗{:4_173:} 加分分。肯定成果！ 樵歌 发表于 2024-9-14 07:10
加分分。肯定成果！
{:4_190:} 红影 发表于 2024-9-13 23:00
跟小猫抓自己尾巴似的呗
嗯，很像 马黑黑 发表于 2024-9-13 22:51
svg有自己的一整套标签和标签属性
还有一整套，那我都不懂的了
页:
[1]
2