SuperAPI AI 工具集

logo-animation

设计与创作

查看项目

更新于 10-15 22:16

技能介绍

用途:为品牌标志制作入场/退场动效、落地页主视觉揭示、App 启动闪屏或加载待机循环,并可对齐音效 logo 的节拍。

主要能力:提供描边绘制(stroke-dashoffset 1→0,配合 pathLength="1" 归一化)、遮罩擦除、逐件错峰搭建、图标与文字标形变(GSAP MorphSVG 或路径插值)、无缝待机循环、文字标逐字错峰等技法。交付目标包括网页内联 SVG + CSS/GSAP、Lottie(After Effects 经 Bodymovin 导出,用 lottie-web 或 @lottiefiles/dotlottie-web)、视频片头(Remotion 或 After Effects 渲染 ProRes/H.264,2 倍预渲染)。

使用方式:每个 logo 只选一种技法,揭示时长控制在 0.8–2.5 秒;不扭曲品牌几何,缩放与淡出相对安全,斜切与挤压通常不行;保持标志最小留白不被动效元素侵占;始终提供 prefers-reduced-motion 回退,直接显示最终标志。有音频时先确定峰值时间码,让最终定格帧精确落在音效重音上。可打包为单个可直接在浏览器打开的 HTML 文件,内联 SVG + 内联 style/script,只用一个动画驱动。

验证:使用冻结机制通过 URL 参数 ?t=N 暂停到指定时刻(CSS 动画、GSAP timeline、SMIL 或 Lottie 各有对应方式),再用 Playwright 截图检查起始、中间、结束帧,确认几何完整、留白干净、末帧为真实标志。仓库附带 scripts/seek-shot.sh 与 scripts/contact-sheet.sh 辅助截图与拼图复核。

限制:资料未提供该技能的具体安装方式、收费、价格、平台支持范围与性能数据;实际可用性取决于所用框架与导出工具链。