一个动效从构思到上线的完整流程👇
📌 第一步:明确动效的目的 问自己:这个动效是为了什么?
引导用户注意力?
给操作反馈?
表达品牌个性?
解释状态变化?
没有目的的动效就是纯炫技
📌 第二步:定义动效参数 在动手做之前先确定:
持续时间(duration)
缓动曲线(easing)
延迟时间(delay)
变化属性(位移/透明度/缩放/旋转)
📌 第三步:低保真原型验证 不要上来就打开 AE。先用 Figma 的 Smart Animate 或 Principle 做一个快速原型。在手机上看看节奏对不对、方向感好不好
📌 第四步:高保真制作 确认方向后再用 AE / Lottie / Rive 精细制作。注意文件体积和性能
📌 第五步:开发对接 交付内容:
Lottie JSON 文件(复杂动效)
动效参数文档(简单动效):时长、曲线、属性、触发条件
参考视频/GIF(辅助理解)
📌 第六步:真机验证 在真机上跑一遍。模拟器上看起来流畅的动效,在低端机上可能卡顿
每一步都不能省。省了就是设计和上线效果不一致🔄






