tzMaker中级教程一

马黑黑 · 发表于 2025-11-7 20:07

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

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

x

音画帖的制作无非就是往帖子容器里合理添加各种元素，令之有机结合起来营造美好的观赏体验。tzMaker基于此做帖理念，封装了必要的指令，使用者在熟悉指令的基础上就可以像搭积木一样简单便捷地搭建自己的音画帖。所有指令中，add() 指令是核心，它甚至在模块内部也会被反复调用。本教程将围绕它展开，配套使用其它音画帖关键指令，结合 style()、playmps() 等后补指令在帖子容器中创建所需元素：

音频是音画帖的核心，因此，我们做帖的第一步是加入音频，即 audio 标签，使用 add() 指令实现：

/** 本文所有代码都假设帖子容器 id="pa" class="pa"

并导入 tz.min.css 和 tz.v2.js 且 tz 为制帖对象

*/ tz.add('audio', '', '', { src: '音频地址' });

这里，add() 指令添加了一个 audio 标签（参数一），无需id（参数二），无需class（参数三），但必须得有音频地址，所以在参数三 {} 里配置了一个键值对，键名 src，键值音频地址。指令产生的效果是在帖子容器中创建了一个audio标签，生成的HTML代码代码大致如下：

<audio src="音频地址" autoplay="true" loop="true"></audio>

如有必要，接着可以继续使用 add() 指令加入视频，代码结构和音频差不多，标签名为 video，id可以不要，但我们需要指明class（第三个参数）以便使用CSS样式来定制视频的尺寸等相关设置。

紧接着，应该是一个播放控制器，俗称小播，它可以是一个图片标签，也可以是div标签，甚至可以是一个复合体，这里以图片为例，看看如何创建小播：

tz.add('img', '', 'ma', { src: '图片地址', style: 'bottom: 45px' }).playmp3();

每一个标签都可以拥有一些 attributes 属性，add() 指令的最后一个参数是写在 {} 里的配置参数，上例创建小播代码中，src 键名和前例一样都是地址参数，这里多出的 style 键名则是行内CSS样式，它是HTML标签的 style 属性，例中设置了img标签的位置，它结合标签的class="ma" 中的 ma 选择器能达成定位，因为 .ma 选择器有 position: absolute; 的设置。后补指令 playmp3() 以链式方式加载 add() 指令完成之后，有了它，所创建的图片或其它元素才具备控制音频的播放、暂停并借助模块集成的功能联动同步管理视频、CSS关键帧动画的播放、暂停的能力。

tzMaker模块支持多个播放控制器，可以使用类似上述的方式多做几个小播，既可以点缀帖子给帖子增色，又能充当音频播放暂停控制按钮。顺便提一下，模块支持 Alt+X 组合键替代按钮的点击操作，只要页面处于活动状态，该组合键可以快捷操作音频的播放与暂停。

或许，你不满足于使用图片做小播，那么，lzRot() 指令可能如你所愿：先创建一个小播容器，再使用 lzRot() 指令创建若干个路径剪裁或简单到仅由图片背景构成的图案，指令会原地旋转图案，形成漂亮的复合图形。以下是路径裁剪做的播放控制器：

小播容器：.ma 选择器设置了动画 tz.add('div', 'player', 'ma', {style: 'bottom: 20px; left: 20px'}).playmp3(); /* 设为小播 */; // 创建符合旋转图案 tz.lzRot(3, 'player', { className: 'petal', // 使用 .petal 选择器样式 tag: 'div', // 标签名（可缺省） cc: true // 启用 --cc 随机颜色机制 }) // 附：.petal 选择器CSS代码 .petal { width: 100%; height: 50%; top: 0; background: radial-gradient(red, var(--cc)); clip-path: polygon(50% 100%, 30% 0, 50% 30%, 70% 0, 50% 100%); transform-origin: 50% 100%; }

如你所见，这是一个不很简单但也不算复太杂的实现机制，既有CSS的设置，又有模块的配置，彼此配套可以创建出精彩纷呈的靓丽小播效果。小播还可以做成粒子形态的，使用转圈圈粒子指令 lzRing() 实现：

// 同样的需要一个容器 tz.add('div', 'player', 'ma').style('bottom: 30px').playmp3(); // 创建N个粒子 tz.lzRing(10, 'player', { tag: 'div', width: 40, height: 40, 'border-radius': '0 100%', // 键名有短横线需要引号包裹 background: 'linear-gradient(var(--cc), white)', cc: true, animation: 'rot 4s linear infinite var(--state)', // 粒子运行 rot 动画 delay: -4 // 差异性延时边界值 });

和前例相比，上例的粒子圈圈小播没有捆绑class选择器，一切CSS配置在配置参数中完成。这是允许的，只要愿意同时不怕JS代码变得更多。这里，粒子使用div标签做成，宽高各40px（你还真的可以写成 width: '40px'，尊重你的CSS代码书写习惯，唯一得注意的是，这里的配置是JS对象配置，40px 在CSS中不需要引号包裹，这里需要，因为它是字符串），形状为橄榄状，线性渐变背景（其中一个颜色随机），每个粒子都延时（实际上是提前）运行自己的动画(--state 变量会使之得到联动控制)，小播 player 也运行CSS动画，效果迷人。从本例中我们知道：包含前例在内，即使不专门设置CSS选择器，仅通过 {} 配置，也同样可以达到设置效果——tzMaker模块 {} 配置项或 style() 指令设置行内CSS样式。

或许你还需要播放进度指示条，以及全屏按钮，这些都是用一个指令就能解决的问题，当然，配套使用 style() 指令，可以轻轻松松对进度条和全屏按钮进行快速定位、做其它相关设置：

// 进度条和全屏按钮都使用 color 配色 tz.bgprog().style('color: pink; left: 200px; bottom: 20px'); tz.fs().style('color: lightgreen; top: 20px; right: 20px');

本节所讨论的指令时用tzMaker做音画帖最常用到的指令，我们通过对其逐一介绍，大致讲明了它们的使用方法，不过，我们没有全面、深入讨论每一个指令的相关细节，这类内容可以通过查阅 tzMaker指令速览和 tzMaker文档加以学习、消化。