全方位科普手册：产品的动效设计(7)

如何书写动效设计文档？

怎么书写动效说明文档呢？ 或者说我们怎么向开发具象的陈述我们的动效设计呢？我做了一张表，简单描述了一下动效说明文档的输出的基本流程（见下图）

书写动效说明文档流程图

举个例子：

以下示例为之前在某滴专车事业部所做实际项目。

转场动效

动效基本参数：

• 动 画 尺 寸: 750*1334(px)

• 帧   速   率: 25f/s(帧/秒)

• 动 画 时 长: 1.0s(秒)

动效详细说明：

（1）0f – 6f 接机顶部栏从屏幕上边缘移入其对应位置；Y轴位移: 128px；动画速率: 先快后慢。

速度曲线:(截图中时间帧不做参考)

（2）3f – 8f 背景色#edeff0，做渐显动画；透明度: 0%-100%；动画速率: 匀速运动。

（3）0f – 6f 表单下方「叫车按钮」背景图渐显出现；透明度：0%-100%；动画速率: 匀速运动。

（编辑：ASP站长网）