秋天是一幅画 秋天是一首歌
<!---->
js 生成SVG动画的尝试
<script type="text/javascript">
var pics = [
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164649y19cncnowq7ocn0v.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164649lkkki6y0vkoirkfk.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164649wlv8allg75a7vl7g.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164650big115oboife51qe.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164650lx292kbcun7ustki.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164650n5l5ie75cy0u7cre.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164650dv54htqt96o4owv1.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164651cw3v7qik3rqb3urb.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164651mzz92tyr4vva2rmh.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164652qx11nwdxllc5dxu8.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164652vm7d8t1wwx83f3g7.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164652ankw9w9kbd4kk66k.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164653q935zkhh79ax2txj.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164653ekx0u0kfzzhxh2gw.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164653f19mezxoddx8x4yx.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164653yd4hbv4333n30903.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164654tzvcs3ig3vv81vpc.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164654gbgirlzy2qlgycby.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164654agbwgbugmt23k8mk.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164655b8v003flf0bb06mr.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164655dt7qsbnvl4bntz3v.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164655r164wpl44u11qqp4.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164656a2clxjxx114lfkc5.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164656pmmtggrztv7bkaqi.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164656vji46bz3h2244y4i.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164657zxpp93mhi5hwpj38.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164657z2wacwartvrlsazc.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164657renzxmsndxnb6s6i.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164657cldpol11j1vldpkl.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164658vul2qlujzr1tg1sj.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164658awzbnpkkn83lodbn.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164658no26s6suezau5r5m.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164659ulpeuwpvu0u7lr4w.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164659rayhzflr6zj6qqz2.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164659mhvieymatw05xy6c.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164659s9c9c86xx5z6t9ca.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164700r8g3sd7x5pud8fe2.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164700qo2tumh6u1jzh86t.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164700tmn5kk5ki2cmvgcu.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164701yj9v481288ojb8bx.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164701nmhmsp8wls0vqhga.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164701olylz6cqrlww46wt.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164702my00yq65g2fqdq27.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164702hiekom9ujfku69im.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164702ywz59np4z0w55d5x.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164702mmx9103739prj0im.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164703gc1rikipikgizif6.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164703ag9h1dwxwe798ev8.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164705wmhkd2ut2ktl81zc.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164707c0hl510j677p1p1i.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164710awqzgqrpqvnzgar7.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164710yxj44jdu8xu3d7xd.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164710c055w006ph5vyf31.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164710kdyb3vdbsyh36m6m.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164710s9mh2gi22pocm92y.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164711qb65bfk4stis78p4.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164711e74tx2509gx92g2x.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164711fk2w60jz8joscshr.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164711b5mrccimqtgm89gc.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164711u8ombm8egptfbfzq.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164712jlbalqnkot52khgq.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164712vhsw4wnkyntz4ky9.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164712f0yjowr5tuwoorsz.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164713zmg2thtbapb4zb0a.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164713cs142zf4n2bctj4s.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164713bdidd04le0lcvc2y.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164713zud566du56dof8tf.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164713oq1kinxg8xmgkivm.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164714mwkalfldg3zlsull.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164714t1fk3b633ke2fciq.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164714zmozmpqotn8fvw9w.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164714xkjv1awqfv1k2kwj.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164715dtbr9zw44iifhym9.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164715zy5j2ssvesqyym5v.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164715cq9e59zjlci3dedz.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164715t494w9otrgtoa40g.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164715uoiu07499iuz7dr6.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164716vi78opn7bpwtowf7.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164716nqnyijpyup802nyj.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164716vkirrrdiiyottr6u.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164716xwe3wuuu78u3d7fg.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164717h74uhyvyof2ffeov.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164717jxt4etgegnkdzktr.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164717t29ffldzxg2fnw19.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164718m67qy674m3d4bb13.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164718nw1w55fwbw5bzsn5.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164718s2rndditnye3053z.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164719lgqutfcvautlzqut.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164719ws842o0c54g26j8l.jpg",
"http://www.yinhuabbs.cn/data/attachment/forum/202109/30/164719w95ryythtc99odyx.jpg"];
var inHtm = '<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" ';
inHtm += ' version=\"1.1\" viewBox=\"0 0 1024 768\" style=\"overflow:hidden;';
inHtm += 'clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 0 20%);';
inHtm += 'background-color:#eee8aa;\">\n<g transform=\"translate(512, 384)\">\n';
for(n = 0; n < pics.length; n++) {
inHtm += '<image xlink:href=\"'+pics+'\" opacity=\"0\" x=\"0\" y=\"0\" width=\"0\" height=\"0\" preserveAspectRatio=\"none\">\n';
inHtm += '<animate id=\"bpic' + n + '\" attributename=\"opacity\" from=\"0\" to=\"1\" begin=\"';
if(n==0)
inHtm +="0;epic" + (pics.length-1) + ".end-2";
else
inHtm +="epic" + (n-1) + ".end-2";
inHtm += '\" dur=\"2s\" fill=\"freeze\"\/>\n';
inHtm += '<animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 0 0;360 0 0\" dur=\"3\" begin="bpic' + n + '.begin\" \/>\n';
inHtm += '<animate attributeName=\"width\" from=\"0\" to=\"1024\" begin=\"bpic' + n + '.begin\" dur=\"3s\" fill=\"freeze\" \/>\n';
inHtm += '<animate attributeName=\"height\" from=\"0\" to=\"768\" begin=\"bpic' + n + '.begin\" dur=\"3s\" fill=\"freeze\" \/>\n';
inHtm += '<animate attributeName=\"x\" from=\"0\" to=\"-512\" begin=\"bpic' + n + '.begin\" dur=\"3s\" fill=\"freeze\" \/>\n';
inHtm += '<animate attributeName=\"y\" from=\"0\" to=\"-384\" begin=\"bpic' + n + '.begin\" dur=\"3s\" fill=\"freeze\" \/>\n\n';
inHtm += '<animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 0 0;-360 0 0\" dur=\"3\" begin="bpic' + n + '.begin+7\" \/>\n';
inHtm += '<animate attributeName=\"width\" from=\"1024\" to=\"0\" begin=\"bpic' + n + '.begin+7\" dur=\"3s\" fill=\"freeze\" \/>\n';
inHtm += '<animate attributeName=\"height\" from=\"768\" to=\"0\" begin=\"bpic' + n + '.begin+7\" dur=\"3s\" fill=\"freeze\" \/>\n';
inHtm += '<animate attributeName=\"x\" from=\"-512\" to=\"0\" begin=\"bpic' + n + '.begin+7\" dur=\"3s\" fill=\"freeze\" \/>\n';
inHtm += '<animate attributeName=\"y\" from=\"-384\" to=\"0\" begin=\"bpic' + n + '.begin+7\" dur=\"3s\" fill=\"freeze\" \/>\n';
inHtm += '<animate id=\"epic' + n + '\" attributename=\"opacity\" from=\"1\" to=\"0\" begin=\"bpic' + n +
'.begin+8\" dur=\"2s\" fill=\"freeze\"\/>\n<\/image>\n';
}
//inHtm += '<animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 384 384;360 384 384\" dur=\"256\" repeatCount=\"indefinite\" begin="0" \/>';
inHtm += '<\/g><\/svg>\n';
inHtm += '<audio src=\"https://link.hhtjim.com/kw/3142996.mp3\" autoplay loop id=\"mphs\"><\/audio>';
console.log(inHtm)
document.write(inHtm);
</script> 欣赏老师的秋天是一幅画 秋天是一首歌js 生成SVG动画的尝试 ！ 这帖看到了。 静竹. 发表于 2021-10-1 09:19
欣赏老师的秋天是一幅画 秋天是一首歌js 生成SVG动画的尝试 ！
http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084215njp5lwls4o0j7pno.gif
静竹. 发表于 2021-10-1 09:19
这帖看到了。
这帖的图片就存在帖子里，有90幅之多。 195400 发表于 2021-10-1 09:24
这帖的图片就存在帖子里，有90幅之多。
看到了，看到了老师的耐心。辛苦了！国庆节快乐！ 静竹. 发表于 2021-10-1 09:32
看到了，看到了老师的耐心。辛苦了！国庆节快乐！
不是有耐心，而是没耐心敲代码，编个js脚本让它自动生成动画帖子:lol 195400 发表于 2021-10-1 09:53
不是有耐心，而是没耐心敲代码，编个js脚本让它自动生成动画帖子
老师厉害，又换了特效。这SVG代码的动画功能强大，FLASH不及它了。 静竹. 发表于 2021-10-1 10:45
老师厉害，又换了特效。这SVG代码的动画功能强大，FLASH不及它了。
不能这么说，是各有长处，只是flash会逐渐消亡。 欣赏您的精美佳作，赞一个！
页:
[1]
2