Markdy：类似 Mermaid 图表，但用于动画

# Markdy — 开源动画DSL引擎 来源：https://markdy.com/ ## 主要功能 📦 ### 零依赖 纯 TypeScript 解析器 — 无需 DOM，无运行时依赖。 🌐 ### 网页原生渲染器 Web Animations API + CSS transforms。无需 Canvas，无需 GSAP。 🤖 ### AI 代理友好 结构化 DSL，大语言模型可以生成、验证并迭代。 🧩 ### 框架无关 可在任何地方运行。包含 Astro 岛组件。 编辑器 Ctrl+Space 自动补全 · Cmd+Enter 运行 每个动画都由定义画布开始。这必须是 `.markdy` 文件的第一行。 `` scene width=800 height=400 fps=30 bg=#fafafa `` 属性默认值描述`width``800`画布宽度（像素）`height``400`画布高度（像素）`fps``30`渲染引擎的帧率`bg``white`任何 CSS 颜色值（如 `#1a1a2e`）`duration`*自动*覆盖总时长（秒） 角色是场景中的对象。使用 `at (x, y)` 放置，并可添加可选修饰符。 `` actor a = figure(#c68642, m, 😎) at (100, 200) scale 1.2 actor b = text("Hello World") at (50, 50) size 24 actor c = box() at (300, 200) `` 类型参数描述`text``"加引号的字符串"`纯文本标签。可用 `size` 自定义。`box`—100x100 实心盒。适合快速原型。`figure`皮肤颜色, 性别, 表情带有关节肢体可运动的小人。`sprite`资源名称渲染图片或图标资源。**修饰符：**`opacity`（0–1），`scale`，`rotate`，`size`（仅限文本），`z`（层叠顺序）。 在时间轴上用 `@时间: actor.动作()` 安排动作。时间以十进制秒为单位。 `` @0.5: a.enter(from=left, dur=0.8) @1.5: a.move(to=(400, 200), dur=1.0, ease=out) @3.0: a.fade_out(dur=0.5) `` 动作参数作用`enter`from, dur从画布边缘滑入`move`to, dur, ease平移到目标坐标`fade\_in` / `fade\_out`dur动画透明度`scale` / `rotate`to, dur变换角色**缓动函数：**`linear`，`in`，`out`，`inout` 让角色用漫画对话气泡说话，并添加抖动等动态效果。 `` @1.0: a.say("Hello! 👋", dur=1.5) @2.5: a.shake(intensity=8, dur=0.4) `` 动作参数作用`say`"文本", dur显示锚定的对话气泡`shake`intensity, dur在 X 轴上振荡`throw`asset, to, dur在角色之间发射弹射物 `figure` 角色拥有可独立控制关节肢体，用于表现丰富的动画。 `` @1.0: a.face("😵") @1.5: a.rotate_part(part=arm_right, to=130, dur=0.4) @2.0: a.punch(side=right, dur=0.2) @2.5: a.kick(side=left, dur=0.3) `` 动作参数`face`"emoji" — 即时表情切换`rotate\_part`part, to（度数）, dur`punch`/`kick`side（left | right）, dur**身体部位：**`head`，`face`，`body`，`arm\_left`，`arm\_right`，`leg\_left`，`leg\_right` 内置手势省去你链接 `rotate\_part` 调用的麻烦。`pose` 可同时设置多个部位。 `` @1.0: a.wave(side=right, dur=0.8) @2.0: a.nod(dur=0.4) @3.0: a.pose(arm_left=70, arm_right=-70, dur=0.4) @4.0: a.jump(height=25, dur=0.5) @4.5: a.bounce(intensity=12, count=3, dur=0.5) `` 动作参数作用`wave`side, dur挥手手势 — 手臂上抬，摆动，收回`nod`dur点头 — 上下两次`pose`arm_left, arm_right, leg_left, leg_right, head, body, dur一次设置多个部位`jump`height, dur跳跃，带有挤压/拉伸效果`bounce`intensity, count, dur衰减的垂直弹跳 加载外部图片和矢量图标作为资源，然后以 `sprite` 角色渲染。 `` # 先声明资源 asset cat = image("https://example.com/cat.gif") asset fire = icon("lucide:flame") # 渲染成角色 actor meme = sprite(cat) at (400, 200) scale 0.5 actor icon = sprite(fire) at (100, 100) scale 2.0 `` `image("URL")`加载图片、GIF、照片 — 任何 URL 或本地路径。`icon("集合:名称")`从 Iconify 加载 SVG 图标。缩放时永不模糊。 使用 `var` 定义值，`def` 定义可复用的角色模板，避免重复。 `` var accent_skin = #fad4c0 def char(skin, face) { figure($${skin}, f, $${face}) } actor lily = char($${accent_skin}, 😊) at (100, 200) `` `var` 替换值（对 `#hex` 颜色很可靠）。`def` 创建角色工厂模板 — 无需任何 JavaScript 即可构建角色系统。 将复杂的多步编排打包成可复用的 `seq` 块。终极能力。 `` seq wave(arm, angle) { @+0.0: $.rotate_part(part=$${arm}, to=$${angle}, dur=0.3) @+0.3: $.rotate_part(part=$${arm}, to=25, dur=0.3) } @2.0: lily.play(wave, arm=arm_left, angle=-80) `` `$` 引用调用该序列的角色。`@+` 的时间是相对于 `.play()` 触发时刻的偏移。 ### 工作原理 1. **将你的 AI 指向文档**分享 AGENT.md（https://github.com/HoangYell/markdy-com/blob/main/docs/AGENT.md）——一份包含语法、动作、模式和示例的完整参考。 2. **用简单英语描述你的场景**告诉 AI 你想可视化什么——角色、动作、情感、时间。 3. **获取有效的 MarkdyScript 脚本**AI 会生成语法正确的代码。将其粘贴到 playground 或你的应用中。 ### 示例提示 > 使用 `https://github.com/HoangYell/markdy-com/blob/main/docs/AGENT.md` 作为完整参考（语法、动作、模式、示例），然后编写一个 Markdy 场景：*“一个拿着咖啡杯的家伙走进来，被石头绊倒，咖啡杯掉了。杯子飞出去摔碎。他看起来很伤心。”* AI 会阅读文档，理解语法，并输出一个完整的 `.markdy` 场景，包含角色、时间线事件和表情——准备好被渲染。