AE基础动效快速入门秘籍

一个合格的UI设计师,动效必须会做。动效有啥用?让你的老板,团队,甚至客户,在产品未上线前知道它是怎么玩的,促进感情,友好沟通必备神技能。当然,用来装装B也很好。。

AE做动效,说实话 很方便,其实也对AE是大才小用了。

UI动效总结起来无非4种常态:位移、擦除、旋转、缩放

万法不离其宗,掌握了上面4种基础常态,做出其他吊炸天的效果只是知识补充和时间的问题了。

言归正传:

还没有用过AE的同学,它打开以后是下面这个样子的(方便大家阅读,我把窗口缩小了,重要窗口,已经标出):



我们用AE做UI动效前,需要在PS里面做好图形,这章主要介绍的是基础动效,所以我只画了简单的图形用来展示效果,看下面:



切记,需要做动效的图层一定要单独画,不能合并。还有最好把需要做动效的图层转换为“智能对象”或者保持形状图层,并且根据动效类型做好命名:



那么,如何把PSD导入到AE呢?看图吧:



选择导入后,会弹出一个窗口:



具体详细的介绍,可以看我之前录制的AE基础视频,里面有很详细的介绍和选择的注意事项,我就不罗嗦了,获取方式在文章末尾。

在这里,我们选择 合成 - 可编辑的图层样式 - 确定

导入后,我们在“项目”窗口下方会看到我们导入的资源,双击类型为“合成”的文件,打开时间轴,这样我们就可以开始做动效啦,duang~



时间轴展开是这个样子滴:



我们开始让它动起来吧!

在AE里面基础的动效 都是通过时间轴上面的关键帧来完成的,SO EASY!

AE“菜单”栏下方是一些常用的工具,



我们选择形状的实话 会出现“中心点” (这个很重要,所有动效都需要根据这个中心点来运动),但是默认情况下,中心点并不在形状的中心,咋整?看图:



所有图层 都按照此方法移动锚点,方便接下来的操作。

我们选择“旋转”图层,来做旋转动效

点开 “图层名称”左侧的小三角,选择“变换”,会看到第四个选择就是“旋转”



左侧的小时钟,就是用来添加 关键帧的点击,会出现第一个 关键帧,我们拖动时间轴到20S的位置,然后点击最左侧的菱形,添加第二个关键帧



在第二个关键帧出,我们设置旋转的角度,我先让他360°旋转 ,所以这里我设置数值为360,也就是旋转一周



效果如下:



其他类型的动效大同小异,方法是死的,灵活运用可以做出不同的效果组合

(0)

相关推荐

  • pr基础剪辑操作快速入门方法

    Pr是一款多功能软件,在视频编辑等方面都有很大的作用,现在有很多朋友都在使用这个软件,但是还是有一些新手对这个软件不是特别熟悉,今天的这篇就和大家聊一聊关于 pr基础剪辑操作快速入门方法的问题,希望可 ...

  • pr基础剪辑操作快速入门方法?

    pr是一款相对专业的剪辑软件,对于pr的基础剪辑操作,学会后,就可以剪辑出一部有逻辑有顺序的简单的作品了,入门之后再加以摸索就会有更好地效果. 操作方法 01 首先打开pr,点击新建项目,新建一个项目 ...

  • 如何准确的向工程师传达动效设计?

    小编:最近好像一直在分享设计师与别的部分的巧妙配合的技巧,那么依旧继续.今天给大家带来的是由CocoaChina分享的如何准确的向工程师传达动效设计?在UI设计中,动效的设计十分的重要,在你与我中传递 ...

  • App动效原理和应用设计

    时下对动效的追捧,疯狂至可以用一句话形容--"没有动效的APP,简直不是好的APP".优秀的动效设计在提升产品体验.用户粘性方面的积极作用有目共睹,已然成为现下Web.APP产品交 ...

  • 教UI系列教程 – 流动文字动效

    欢迎大家来到<看了也不会练>系列教程 看了很多文字类型的动效教程,使用的方法都差不多,用蒙版的形式去完成整体的动效,并且动效的实现难度比较容易,不过在完成基础动效后加上不同的细节还是能做出 ...

  • 新版MATERIAL DESIGN 官方动效指南(二)

    之前@平行煎餅发了新版Material Design官方动效指南的第一节:<新版MATERIAL DESIGN 官方动效指南(一)>,今天继续第二部分,从动效的速度.动态持续时间.通用持续 ...

  • 五笔快速入门

    根据个人的学习来谈一下五笔入门,不要被各种字根和拆分字所吓倒,五笔其实挺简单的. 操作方法 01 我推荐大家先买一本教材书,有什么心得体会可以记在上面,回头还可以复习巩固,也比较系统,比电子教材要好. ...

  • 无代码做动效神器HYPE3入门教程

    Hype这个关键词在百度上搜索都不一定知道它到底是什么,但自从我用上之后,就爱上它了,就像当年喜欢上Sketch一样 >>> 它适合哪些人? 用AE、Flash等动画视频工具做App ...

  • AE制作超炫路径动效教程

    这篇教程教AE特效学习者们,和APP界面动画制作学习者们使用AE制作超炫路径动效教程,教程非常实用.在APP的动效中算是非常酷炫的效果了,推荐过来和飞特网的朋友们一起分享一起学习,希望大家喜欢这篇教程 ...