Big Schelepp（tz.e SVG旋转图案演示）

马黑黑 · 发表于 2025-10-21 12:11

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-10-21 12:11

帖子代码

<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>

复制代码

马黑黑 · 发表于 2025-10-21 12:22

核心代码：

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 12:31

本帖最后由马黑黑于 2025-10-21 18:17 编辑

这就是 tzMaker.e 版本了，基本定型。它可以：

· 发纯音帖；
· 发花潮歌词帖；
· 发纯音专辑；
· 发花朝歌词专辑。

小播层面提供HTML、SVG复合图案实现方式；进度条同样提供两套实现机制：HTML标签线性背景和SVG基本图形（含路径）。

它实际上还具备粒子系统，但是静态的，需要挖掘才能令其工作。