Big Schelepp（tz.e SVG旋转图案演示）
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/schlepp.webp') no-repeat center/cover; }
.gg { will-change: transform; animation: rotate 8s linear infinite var(--state); }
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=26694241'
});
tz.add('svg','isvg','', {
width: 150,
height: 150,
viewBox: '0 0 100 100',
style: 'bottom: 20px'
});
tz.svgsonsRot(5, 'isvg', 'path', {
d: 'M50 50 C10 -12, 90 -12, 50 50',
fill: 'lightgreen',
stroke: 'darkgreen',
'stroke-width': 2
}).playmp3();
tz.fs().style('right: 30px; bottom: 20px');
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
.pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/schlepp.webp') no-repeat center/cover; }
.gg { will-change: transform; animation: rotate 8s linear infinite var(--state); }
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=26694241'
});
tz.add('svg','isvg','', {
width: 150,
height: 150,
viewBox: '0 0 100 100',
style: 'bottom: 20px'
});
tz.svgsonsRot(5, 'isvg', 'path', {
d: 'M50 50 C10 -12, 90 -12, 50 50',
fill: 'lightgreen',
stroke: 'darkgreen',
'stroke-width': 2
}).playmp3();
tz.fs().style('right: 30px; bottom: 20px');
</script>
核心代码：
04行 ：为旋转构成的合成图形，小播，创建CSS动画方案，关键属性是 animation；
17~22行 ：创建SVG标签，它是svg小播赖以生存的环境；
24~29行 ：绘制 5 个 <path> 标签，通过 SVG 的 id（isvg） 找到自己的家，路径、填充、描边、描边厚度都设置在 {} 里，最后链式使用 playmp3() 将其升级为控制音频播放暂停的小播。
小结 ：
svgsongsRot() 指令在已有 svg 标签里画N个同样的图形，这些图形会自动旋转，构成最终合成图案。这和基于 HTML 标签的 lzRot() 所达成的效果时一个道理，不同的是基于SVG的形状的可塑性更好——支持显性的SVG基本图形，而图形中的路径标签 <path> 可设计行异常强大。
文档当下有 23 个公开指令：http://mhh.52qingyin.cn/api/tz/ 本帖最后由 马黑黑 于 2025-10-21 18:17 编辑
这就是 tzMaker.e 版本了，基本定型。它可以：
· 发纯音帖；
· 发花潮歌词帖；
· 发纯音专辑；
· 发花朝歌词专辑。
小播层面提供HTML、SVG复合图案实现方式；进度条同样提供两套实现机制：HTML标签线性背景和SVG基本图形（含路径）。
它实际上还具备粒子系统，但是静态的，需要挖掘才能令其工作。 热烈祝贺tzMaker.e 版本闪亮登场，马老师您辛苦了{:4_180:} 看到三次贝塞尔曲线绘制的图形，又有点迷糊了，想了半天它的三个点带来的图形为什么是这样的{:4_173:} 马黑黑 发表于 2025-10-21 12:31
这就是 tzMaker.e 版本了，基本定型。它可以：
❉ 发纯音帖；
这个 tzMaker.e 版本基本很完美了，该又的功能都有了，太好了{:4_199:} 谢谢黑黑老师精彩分享，辛苦了。 梦江南 发表于 2025-10-21 18:01
谢谢黑黑老师精彩分享，辛苦了。
{:4_190:} 红影 发表于 2025-10-21 15:47
看到三次贝塞尔曲线绘制的图形，又有点迷糊了，想了半天它的三个点带来的图形为什么是这样的
三次贝赛尔曲线，起点是上一次操作的点，中间是两个控制点，最后是终点。
我这个路径，起点由 M 指令提供，终点和起点重叠，中间的两个控制点相对SVG而言左右对称，得到的是尖尖朝下的小水滴 杨帆 发表于 2025-10-21 14:51
热烈祝贺tzMaker.e 版本闪亮登场，马老师您辛苦了
{:4_190:} 红影 发表于 2025-10-21 15:48
这个 tzMaker.e 版本基本很完美了，该又的功能都有了，太好了
所以说基本定型了，后续使用发现问题再修复、觉得有扩展必要再考虑 马黑黑 发表于 2025-10-21 18:20
三次贝赛尔曲线，起点是上一次操作的点，中间是两个控制点，最后是终点。
我这个路径，起点由 M 指令 ...
嗯嗯，很漂亮{:4_187:} 马黑黑 发表于 2025-10-21 18:21
所以说基本定型了，后续使用发现问题再修复、觉得有扩展必要再考虑
还要扩展什么呢，现在想想好像做帖子需要的都在了啊{:4_204:} 红影 发表于 2025-10-21 21:25
还要扩展什么呢，现在想想好像做帖子需要的都在了啊
到时再看看 红影 发表于 2025-10-21 21:25
嗯嗯，很漂亮
曲线、弧线路径就这么几个，由初中数学基础的，啃下来不是个事 马黑黑 发表于 2025-10-21 21:27
到时再看看
嗯嗯，说不定又想起什么。 马黑黑 发表于 2025-10-21 21:28
曲线、弧线路径就这么几个，由初中数学基础的，啃下来不是个事
只是当时看的时候知道，过后就想不起来了{:4_173:} 红影 发表于 2025-10-21 22:35
只是当时看的时候知道，过后就想不起来了
不过也是因为我们教和学数学的方式有问题，数学和应用基本联系不起来，所以，过去学到的东东基本都是稀里糊涂的，考完试就没啥印象了。现在偶尔会用到，研究一下还好，用过后还是那个样子。基础不牢的缘故。 红影 发表于 2025-10-21 22:34
嗯嗯，说不定又想起什么。
这个可能不是想起什么，而是什么有问题、什么需要去掉、什么需要增加
页:
[1]
2