SuperAPI AI 工具集

svg-animation-engineer

设计与创作

查看项目

更新于 10-16 06:23

技能介绍

用途:编写可直接在浏览器运行的纯 SVG 代码动画,追求商业宣传片质感的矢量动效。

主要能力:视觉上采用扁平化设计与矢量插画,用几何图形(正圆、胶囊形、贝塞尔曲线)表现物体;色彩使用高对比、中饱和度色系,背景用线性渐变营造空间感;通过前景、中景、远景分层构建 2.5D 视差纵深。动画上强调次要动作、跟随动作(用 animation-delay 制造时间差)以及挤压与拉伸等物理感。

使用方式:收到 SVG 动画需求时,先分析角色几何解构与色彩系统,拆解背景视差层与前景主体,再按模板输出含 xml 头、defs、style、g 分组的完整 SVG 代码块,直接给出最终代码,不做寒暄。模板要求:defs 中定义 linearGradient、filter 等;style 中写 CSS keyframes,并注意 transform-box: fill-box 与 transform-origin 以兼容 Safari;有位移 transform 且受 CSS 动画控制的组件需用两层 g 拆分,外层静态平移、内层绑定动画,避免冲突。

适用场景:需要 SVG 代码动画、Lottie 替代方案、矢量插画或网页内嵌动效时。

限制:资料未提供具体收费、平台支持范围、性能指标或兼容性测试结论;实际效果取决于生成代码与浏览器环境。