【交流】AE常见APP界面动画效果制作解析_霄云AE后期学习吧吧_直线网

霄云AE后期学习吧
已关注 | 取消 +关注
关注：121
帖子：785

签到

05月06日
尚未签到

看帖图片精品视频

共有回帖数 0 个

【交流】AE常见APP界面动画效果制作解析
取消只看楼主收藏回复

李小主任
等级：
版权申明：本文原创作者Chiunear，感谢Chiunear的原创经验分享！
我们在进行交互设计的时候，大部分时间是基于界面和功能逻辑的考虑，也适当的进行了交互效果的考虑，那么我们如何把交互的效果直观的表现出来呢，除了用axure做出交互的动态效果，ps绘制GIF图，代码设计动效外，还可使用一个非常容易上手的工具，那就是Adobe 的AE，AE是一款强大的后期软件，同时也可以用来制作不少直观的动效预览效果。

常见的动效有：缩放，渐变，透明度变化，旋转，左右滑进，左右滑出，跳动，颜色变化等。1.首先安装完AE后打开，界面默认居中是预览，左边是素材窗口，下方是时间轴和图层。

我们可以右键导入素材，或者在AE里面直接用上方的工具进行绘制来制作想要的效果。素材拖动到图层去，上方的预览区就可以看到我们放进去的素材了。2.因为比较简单的效果，这里我是直接在AE里面绘制一些简单图形，放到图层窗口中，我们先做一个位移的效果，举一反三很快就能上手了。点击三角符号展开图层的各种效果属性，打开变换，右侧调节时间，我们是从0s开始所以把指针拖到00s，点击位置前面的类似闹钟的图标，开始记录关键的帧数。

用上面的矩形画两个大小为560*210（宽高合适也行，不一定要这个）的矩形，填充一些不同的颜色，拖动到画布

5.效果做好后可以预览一下，没问题就可以合成了，合成快捷键OSX （shift+command+M),WIN(Ctrl+M）因为我们要导出GIF图，所以就渲染为图片的序列帧，然后倒入PS储存为WEB格式就可以了。渲染的参数设置为JPEG序列或者png序列都可以，考虑到大小所以选择JPEG格式。

7.因为动效涉及到物理学，所以我们可以观察一些基本事物的运动特征，可以通过运动曲线来调节动效，才能在交互设计中起到一些锦上添花的效果，同时UI和交互或者产品不一定要非常专业的来制作动效，学习一些简单的小技能，在工作起到一定的作用就算是可以了，毕竟还有专业的动效设计师在嘛。8.最后放张做了2个小时的效果图，拙劣之处还望大神们不吝赐教

楼主 2016-05-09 13:36 回复