AE 的 Animation Composer 描边动效玩法 + 极简 MG 制作流程(含示例)

Composer 本身没有"描边动效"这个功能模块------所有描边动画都是靠路径关键帧 + 透明度/缩放/位移组合模拟出来的视觉效果,不是调用 stroke-dasharray 或 SVG 动画。

为什么不能直接做描边进度动画

Composer 不解析 SVG 路径的 stroke-dasharraystroke-dashoffset,也不支持 CSS 或 AE 风格的描边绘制控制。你导入的任何矢量线条(比如从 Illustrator 导入的 .ai 路径),在 Composer 里都降级为静态几何体或光栅图层,无法绑定描边长度参数。

常见错误现象:描边突然整条闪现线条末端跳变拉伸时粗细不均。根本原因是试图对标注或自由形状直接加缩放关键帧,而没拆解端点运动逻辑。

  • 标注(Annotation)对象只记录起点/终点坐标,不记录路径段数或曲率,插值是线性的,无法模拟手绘节奏
  • 导入的 SVG 路径会被转成贝塞尔样条,但 Composer 不暴露控制点动画接口,只能整体移动或隐藏
  • 所谓"描边动效",实际是用路径(Path)+ 关键帧拖动终点,再配合 Opacity 从 0→100% 模拟"浮现感"

用 Path 节点实现可控描边延伸

这是目前最稳定、可微调的方案:用 Path 替代标注,手动控制顶点位置与可见性。

  • 插入 Path → 用三点画一条带箭头的折线(起点锚定特征点,终点悬空)
  • 在 0s 帧,选中终点 → 右键 设置位置关键帧;此时终点和起点重合,线条不可见
  • 拖到 1.5s,把终点拖到目标位置(如从电机中心拉到接线端子),再打一次关键帧
  • 给整个 PathOpacity 关键帧:0s=0%,0.3s=0%,0.8s=100%,避免"瞬显"
  • 若需强调起笔/收笔,删掉中间控制点,只留起点+终点;再在 0.2s 处给起点加轻微 Scale 缩放(110%→100%)模拟按压感

极简 MG 风格怎么落地

MG(Motion Graphics)强调节奏、留白、信息密度。Composer 做不出 After Effects 那种粒子描边,但能靠克制的节点组合达成近似观感:

  • 颜色必须极简:主色 ≤ 3 种,描边统一用 #2563EB(蓝)或 #DC2626(红),禁用渐变描边
  • 路径宽度固定为 2px,导出前统一检查所有 Path 的线宽属性,别混用 1.5 / 2.5 / 3
  • 所有动效持续时间卡在 0.8--1.4s 区间,超 1.6s 就显拖沓;用贝塞尔插值,禁用线性
  • 文字标签不随描边同步出现------等线条完全拉出后,再延时 0.2sText 节点 Opacity 从 0→100%
  • 避免多层描边叠加:一个部件只配一条指引线,多余线条用 Composite 调低不透明度(70%)作辅助参考线

常用预设清单(直接套用)

描边类

  • Grow / Write On:生长 / 手写
  • Pulse / Flicker:呼吸 / 闪烁
  • Offset Flow:流动偏移
  • Dash Move:虚线跑动

极简 MG 常用

  • Scale → Bounce In:弹跳入场
  • Position → Slide In(Left/Right/Up/Down) :滑动入场
  • Opacity → Fade In/Out:淡入淡出
  • Rotate → Spin:旋转
相关推荐
BingoGo2 天前
PHP 泛型之殇 泛型 RFC 提案被拒绝
后端·php
JaguarJack2 天前
PHP 泛型之殇 泛型 RFC 提案被拒绝
后端·php
用户3074596982073 天前
PHP 扩展——从入门到理解
php
鹏仔先生3 天前
拷贝漫画APP下载页PHP程序,后台带免费AI写作
php
云水一下4 天前
从零开始学 PHP 系列(一):PHP 的前世今生与开发环境搭建
开发语言·php
xingpanvip4 天前
星盘接口开发文档:本命盘接口指南
android·开发语言·css·php·lua
酉鬼女又兒4 天前
零基础入门计算机网络运输层:端到端通信核心作用、端口号分类规则、复用分用工作机制及UDP与TCP协议全方位对比详解
网络·网络协议·tcp/ip·计算机网络·考研·udp·php
dog2504 天前
不要再继续优化 TCP
网络协议·tcp/ip·php
Channing Lewis4 天前
PHP 解析 Excel 的那些坑:一次“行号错位”引发的数据丢失
开发语言·php·excel
Cheng小攸4 天前
渗透行为分析与检测
开发语言·php