AE设计之输出交互动画



如何输出交互动画并加以说明


打开上节课的课程文件,可以看到整个交互大概是5秒钟,这个速度不现实,因为一般情况下的响应时常是400毫秒以内。所以修改一下交互动画的速度。


1.png


完成了交互动画,下面进行输出,点击:合成、渲染前。然后如图选择分辨率“完整”,点击确定。


2.png


然后最佳设置选择“草图”,点击确定。点击开始渲染,听到声音之后,就已经渲染成功了。那么交互动画就已经完成了。


3.png


从网上搜索iPhone6展示模板,然后用Photoshop打开,然后把刚刚效果拖进来。


4.png


然后点回车,在PS的“窗口”把时间轴打开,改成“创建视频时间轴”,这里视频还和之前一样能够进行展示。现在把它的角度进行拖动,把效果额四个边与手机图片贴齐,并调整好细节。


5.png


把多余的部分调一下,去掉多余的部分。添加光效,用钢笔工具新建一个形状,把形状打成白色,给它一个模板,大概如图效果。


6.png


下面导出GIF图片,点击文件、导出、存储为Web所用格式。


7.png


然后如图改为GIF文件,“循环选择”选择“永远”。


8.png


展示如下图,就是交互动画。把这个文件存一下,叫做“第一个交互动画展示”。


9.png



动画标注


动画标注是告诉动画研发团队整个动画的响应速度、每个元件的不透明度、大小缩放、位置等一系列的变换。这里打开一个标注软件“Mark Man”,把我们之前的设计稿拿出来“第一个交互动画”,把已经确定的缩放的位置导出来,叫做“动画标注”,传到桌面上。然后打开“动画标注”这个图,如图先把尺寸量出来,510,尽量设置为偶数,即这个动画整个宽度为510。然后在这里标注“动画位移宽度”,在下面标注“动画响应时长400毫秒”,也就是整个动画的速度是400毫秒。


90.png


然后需要告诉整个背景变暗的地方,如图标出来这部分,背景是不用标的,这里有一个不透明度的变化和大小位置的变化,所以在这里标明“不透明度40%—100%,向右位移宽度452,缩放效果60%—100%”。


91.png


再标“背景不透明度变化30%—100%”,同样这些参数值告诉给程序研发。


92.png


如图运动曲线的值也给程序员看。


93.png


然后把这块导出,导出为动画标注。


94.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

麦子大聚惠,豪华礼包你领了吗?

客服热线 400-862-8862

回到顶部