如何书写动效设计文档?怎么书写动效说明文档呢?

卖贝商城 2017-11-26 13:33:56 212

　　我们怎么向开发具象的陈述我们的动效设计呢?我做了一张表，简单描述了一下动效说明文档的输出的基本流程(见下图)

　　书写动效说明文档流程图

　　举个例子：

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

　　转场动效

　　动效基本参数：

　　动画尺寸: 750*1334(px)

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

　　动画时长: 1.0s(秒)

　　动效详细说明：

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

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

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

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

　　(4)2f – 8f 表单下方「叫车按钮」整体做从下至上位移和渐显动画;Y轴位移：20px;透明度：0%-100%;动画速率: 先做短暂加速运动，后做减速运动。

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

　　(5)15f – 23f 接机表单卡片从距离屏幕上边缘268px的位置向上;移动，至距离屏幕上边缘148px的位置(设计图中最终位置);透明度：0%-100%;动画速率: 先做短暂加速运动，后做减速运动。

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

　　(6)17f – 25f 车型选择卡片从距离屏幕上边缘852px的位置向上;移动，至距离屏幕上边缘732px的位置(设计图中最终位置);透明度：0%-100%;动画速率: 先做短暂加速运动，后做减速运动。

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

　　我们输出动效说明文档的原因是：传递更清晰具象，效果更可控，降低沟通成本，提高配合默契度，保证设计还原度。