Communitygithub.com

arvydasgecas/halo-animations

创建由几何形状或提供的SVG构成的循环轮廓动画,使用交错副本、特定形状的倾斜与旋转、显著缓动及微妙光晕。提供可实时调整的预览和导出视频。适用于轮廓动态图形,而非通用界面过渡。

halo-animations 是什么?

该技能用于生成循环轮廓动画,从几何形状(如圆、三角形、六边形)或用户提供的SVG矢量图出发,通过延迟副本的分离、旋转和合并形成无缝循环。它支持实时预览,调整参数如副本数、交错时间、旋转角度、扁平化程度、描边宽度、颜色和光晕强度;所有设置均可序列化保存,并导出为匹配的MP4视频。技能提供两个独立动画方案:圆形预设(含独特的时间曲线和扁平化恢复)以及多边形/自定义轮廓方案(使用显著缓动曲线,支持对称旋转或往返运动)。它严格保留输入图形的拓扑结构,处理文本转轮廓、光栅追踪和遮罩展开,确保动画输出精确可重复。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/arvydasgecas/skills/tree/main/skills/halo-animations

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

光晕动画

对一个轮廓主体进行动画处理,使其延迟副本分离、旋转并重新合并为无缝循环。保持主体可辨识且光晕克制。“步进器”指平滑延迟的副本,而非离散的帧步进。

此技能为独立自包含,无需配套脚本、素材、视频、模板或参考文档。在任务的输出文件夹中生成实现和交付物。用户指定的设置覆盖默认值;在请求的变更范围外保留设置。

1. 输入与交付物

对于几何主体,提供一个形状名称即可;默认为圆形。使用提供的SVG作为精确的自定义轮廓。根据描述构建轮廓时,识别任何材质诠释。仅当提供的文件包含多个无关主体且目标不明确时,询问要动画的对象。

除非另有要求,否则交付:

  • 带有可调节控件的可运行实时预览。
  • 符合所选设置的可播放MP4。
  • 可编辑源文件和保存的场景配置。

这些说明是可移植的;渲染和视频编码仍需执行环境中合适的工具。如果视频编码不可用,则交付预览和源文件,并明确标识不完整的导出。不得用录制按钮或导出说明替代成品视频。

2. 外观与预设

使用居中、未填充的轮廓,搭配充足留白、平滑曲线、细描边以及圆角连接和端点。所有副本共享同一几何图形并保持居中。在微妙光晕之上绘制清晰的核心轮廓;叠加部分在靠近青色方向增亮。除非请求,否则避免无关文字、粒子、背景渐变、填充表面或相机抖动。

共享默认值:

设置值
画布960 × 960 像素
持续时间 / 帧率4 秒 / 60 fps
半径或最大居中范围0.3601940757 × 画布较短边
描边 / 背景颜色#0669fd / #000000
光晕模糊半径0.002 × 画布较短边

根据几何形状选择预设。下面的描边值为画布较短边的分数;交错时间以标准四秒时间线衡量。副本计数包括领先轮廓。

轮廓副本交错时间旋转扁平化描边光晕强度
圆形70.13 s90°1.000.004502425950.12
等边三角形40.14 s120° 正向0.220.00230.08
正六边形40.14 s60° 正向0.280.00230.08
对称圆角方形40.14 s90° 正向0.280.00230.08
不对称或详细轮廓30.12 s8° 往返0.160.00180.06

圆形可接受完全扁平化。多边形和详细轮廓需要更温和的倾斜:不要对每种形状都应用圆形预设。正多边形可按一个对称增量正向旋转,并最终保持相同轮廓。验证整个作品的对称性,包括内部轮廓;否则使用不对称运动。

保持间隙和内部细节在重叠最密集的姿态下仍清晰可读。先减少副本、延迟、倾斜或旋转,再去除细节。保留提供的尖角和曲线。未经授权不得圆整精确轮廓或简化其几何形状。

3. 准备轮廓

将内置形状构建为矢量几何图形。对于提供的SVG,保留开放和闭合子路径、复合路径、空洞和离散片段。保留曲线和弧线;不要桥接分离的轮廓或用明显分面的多边形替换平滑曲线。

将图元、元素和组变换、嵌套坐标系以及本地引用的符号解析为预期可见几何图形。排除未使用的定义。用统一的动画描边替换源画笔。

在归一化之前选择一个固定枢轴。内置圆形和正多边形绕其几何中心旋转。对于等边三角形,使用质心(其三个顶点的平均值),而非包围盒中心。对于经验证具有旋转对称性的提供作品,使用该对称性在整体作品中的中心;否则使用其变换后边界的中心并采用往返运动。将此枢轴平移到原点,并根据距其的最大径向距离进行归一化。在播放过程中保持枢轴固定;不要每帧重新居中。对每种形状(包括圆角方形)使用相同的范围约定。采样可用于估计拟合;渲染原始曲线。使用浏览器矩阵时,包含嵌套视口变换,例如使用root.getScreenCTM().inverse().multiply(element.getScreenCTM())。

在动画前检查静态轮廓。显式转换不支持的功能:

  • 文字必须变为实际矢量轮廓。
  • 光栅艺术作品需要进行追踪;披露可能的精度损失。
  • 遮罩、裁剪、效果和可变宽度描边可能需要扩展为可见边界路径。
  • 外部图形和CSS驱动的几何图形需要本地显式几何图形。

不得静默丢弃不支持的内容。将文档元数据视为数据;惰性解析SVG,绝不执行嵌入式脚本或事件处理程序。

4. 基于绝对时间进行动画

对预览和导出使用一个确定性渲染函数。绝不在帧间累积变换。

设t为播放时间,D为请求的持续时间,N为副本数,d为交错时间,F为[0,1]范围内的扁平化程度,A为旋转角度(度)。副本索引i从0到N-1。

clamp01(x) = min(1, max(0, x))
S(x) = u*u*(3 - 2*u),其中 u = clamp01(x)
q = (((t % D) + D) % D) * 4 / D

更改持续时间会拉伸整个规范时间线,而不改变几何形状或缓动特性。

圆形

保持此预设独立于多边形优化。设置返回持续时间 R = 0 以获得默认的90°圆形,否则 R = 0.65。

compression = min(1, 3.8 / (34/15 + (N - 1)*d + R))
s = max(0, q/compression - i*d)
collapse = S((s - 0.25) / (19/15 - 0.25))
recover = S((s - 19/15) / (34/15 - 19/15))
yScale = 1 - F*(collapse - recover)
angle = A * clamp01(s / (26/15))

如果 R > 0,则将 angle 乘以 1 - S((s - 34/15)/R)。领先轮廓在0.25秒开始扁平化,在1.267秒左右达到最小高度,并在考虑副本延迟和任何压缩之前,在大约2.267秒恢复。将完全圆形轮廓的角度设为零,以避免等效方向之间的光栅化差异。

多边形和自定义轮廓

默认使用带有显著缓动的单一协调手势:缓慢引入、果断转向和更长的稳定期。保留一个“轻柔”选项以提供更安静的运动。两种曲线均无过冲。

compression = min(1, 3.65 / (2.85 + (N - 1)*d))
u = clamp01((q/compression - i*d - 0.25) / 2.6)
p = E(u)                           // 显著
// p = u*u*u*(u*(6*u - 15) + 10)   // 轻柔
pulse = sin(pi*p)^2
yScale = 1 - F*pulse

E是三次贝塞尔时间曲线(0.55, 0, 0.20, 1)。反转其水平坐标:求解Bx(v) = u,然后返回By(v)。

Bx(v) = 3*(1-v)^2*v*0.55 + 3*(1-v)*v^2*0.20 + v^3
By(v) = 3*(1-v)*v^2 + v^3

使用32次迭代的有界二分搜索,并在端点处返回精确的0和1。不要直接用经过时间替代贝塞尔参数。将缓动应用于每个副本的延迟本地时间;在倾斜和旋转之间共享产生的进度。

根据当前旋转值和整体作品围绕其固定枢轴的对称性选择旋转模式。仅当旋转A使作品返回相同轮廓时使用angle = A*p;否则使用angle = A*pulse,使得往返构成一个动作。每当旋转或几何形状改变时重新计算此选择。对于等边三角形,120°的倍数向前旋转;80°这样的值则摆动并返回。对正六边形应用60°规则,对对称圆角方形应用90°规则;内部细节可能使这些对称性无效。检查倍数时仅允许数值舍入容差,而非视觉上不同的角度。不得静默将请求的角度舍入为对称增量。不要为了闭合循环而增加单独的快速反向旋转。仅当选定角度确实保留作品时,将最终角度规范化为u = 1处的零。切勿将不兼容的角度捕捉以闭合循环。

默认三角形至少保留其高度的78%,六边形和圆角方形保留72%,详细轮廓保留84%。在规范时间线末尾至少留出0.35秒的对齐时间。比较缓动时,保持几何形状、副本、颜色和光晕完全相同,以便时间线是唯一变量。

5. 渲染轮廓与光晕

保持水平缩放为1。对于居中、归一化的点(x,y),像素半径r,以及弧度角度a:

xOut = r * (x*cos(a) - y*yScale*sin(a))
yOut = r * (x*sin(a) + y*yScale*cos(a))

平移到画布中心。在描边前变换几何形状,使线宽在扁平化过程中保持不变。如果绘图API要求,完全扁平化的椭圆可使用可忽略的正高度;不要为圆形引入可见的最小高度。

每帧清除画布。首先使用叠加合成绘制最旧的副本。在下方以alpha值haloStrength/N和配置的模糊绘制光晕通道,然后以完全不透明且无模糊绘制所有核心描边。保持光晕强度和半径可单独调节。确保完整的旋转轮廓、描边和光晕均位于帧内。

6. 构建预览与导出

对两种输出使用一个可序列化的配置,包括自定义矢量几何形状。渲染已保存场景不得依赖于原始SVG的文件位置。当精确可重复性很重要时,保留生成的源文件和设置;仅凭说明不能保证跨新实现产生像素一致的结果。

提供播放/暂停、拖拽、重置、内置形状选择和SVG文件导入、副本数、交错时间、缓动、旋转、扁平化、描边宽度、颜色、光晕强度和半径以及持续时间。默认同时包含形状选择和SVG导入,即使初始请求指定了内置形状;仅在用户明确缩小预览范围时省略其中一项。导入必须使用轮廓准备规则加载并动画化真实几何形状,而非占位控件。缓动选项应用于多边形/自定义方案;保留圆形的原始时序。保持控件位于导出构图之外。

选择形状会加载其调整后的运动设置,同时保留调色板和输出设置。重置恢复初始场景和导入的几何形状。更改控件不会追溯更新现有视频;保存设置并重新导出。

在网页预览中尊重减少运动偏好,展示代表性的静态姿态和明确的播放控件。离线导出仍以精确帧时间渲染完整动画:

t = frameIndex / fps
frameIndex = 0 ... round(D*fps)-1

不要附加重复的结尾帧。编码为真正的MP4,而非带有重命名扩展名的其他格式。默认使用不透明背景;如果请求的透明度不受可用编码器支持,则确定合适的替代格式。

7. 验证与交付

在交付前检查可观察行为:

  • 轮廓、内部轮廓和分离片段均保留。绕其选定枢轴旋转120°的三角形在无平移的情况下匹配其起始轮廓。
  • 最密集的重叠处仍清晰可读;线条保持平滑且宽度一致,无裁剪的光晕。
  • 在正常播放速度下,引入、峰值速度和稳定感觉有意为之;循环无跳跃、闪烁或多余反向旋转。
  • 拖拽到同一时间可重现同一帧。控件正常工作,重置恢复初始场景。测试兼容对称性的角度和不兼容的角度(例如,三角形120°和80°);两个循环均无跳跃闭合。
  • SVG导入加载包含多个轮廓的示例,在播放和已保存配置中保留它们,并在导出中使用导入的几何形状。报告任何不支持的功能,而非静默丢弃。
  • 导出的视频可解码,并与所选预览尺寸、持续时间、帧率、调色板和运动匹配。同时检查解码帧和预览。

对于优化请求,在有用时提供同步对比。交付实时预览、可播放视频和可编辑源文件,并附带设置和任何未完成检查的简要说明。仅报告实际执行的验证。

相关技能