如何用AE创建简单的UI动效

在dribbble和behance上，你们可能见过很多用gif来表达设计理念的ui作品。很多人都想知道怎么来制作，怎样更好、更高效的表达自己的理念。很明显，动态的展现比静态的更形象，在这片文章中，我将教大家如何“动态化”自己的设计作品。

动态gif展现ui作品，优点在于：

1展示实际工作流程

2利用转场，来展示应用不同状态时的效果

3便于网络分享。

aftereffectscs6orcc

photoshopcs6orcc

aftereffects

1在一个合成中创建转场效果

2另外一个合成中创建展示效果

photoshop

4优化gif图像

伦敦背景图一张

手机透视效果模板一张

一、基本构建

创建转场效果合成

打开ae，合成>新建合成(cmd+n)，尺寸为6401136，帧数29，持续6s

导入伦敦背景图像，将图像丢入合成1，调整背景图像尺寸，使其适合画布

创建3个蓝色框（用形状图层），这些蓝色框将从屏幕上方下落到屏幕底部，宽度213、214、213px。三个方框上方的方框宽度640px,输入相应文本。

用钢笔勾勒出云朵和6片雪花空心圆（勾勒的略水，见谅）

创建合成2

尺寸1280x720帧数29，时间6s

步骤2导入iphone背景,调整尺寸。

把合成1拖到合成2里面，那么合成2里面应该是这样：（ps，我加了一层背景层）

选中合成1，效果>扭曲>边角定位，让合成1的4个角对上模板中屏幕的4个角。

二、动效制作

下面，我们来分解一下动画：

13个蓝色方框变长，不同时的落下

2透明框从底部往上移动，自始至终宽度不变。

34个框抵达目的地后，文字开始出现，蓝色框文字是比例扩大+从不透明变透明，透明框中得文字是从不透明变透明。

4云朵图标，同时伴随雪花。

5snowy文字出现。

形状图层中，可以控制的属性有比例、位置、不透明度、描边等等，本文的动效中，就充分利用了这些属性随时间的变化，打造出动画效果。

首先推荐2个脚本插件easeandwizz和repostionanchorpoint

一个方便做运动曲线，一个方便设置锚点位置。

三个蓝色框

打开合成1，选中三个蓝色框，设置如下

1最左面和最右面的蓝色框锚点在上方（利用anchorpoint插件设置）

2比例从0-100%

3利用easeandwizz选中关键帧，可以很方便的调节运动曲线。

透明框的运动，开始以很快的速度移动了大部分位移，后来速度减慢，缓缓移动到原位，设置如下

备注：easeandwizz中设置quad+out运动效果比较平滑。

1三个蓝色框，当蓝色框触及到底部时，文字快速弹出，不透明度从0->100%,比例从0->100%

2透明框中的文字随透明框一起运动（位置设置可以参考透明框），但是，左侧的文字先到，右侧的-4度后到，注意时间轴中得设置。

当透明框的文本开始出现时，云朵出现，先是透明度从0-100%。

而比例开始时是60%，当透明度到了100%时，从60%->100%

雪花小圆点

当云朵动效完成后，雪花小圆点开始逐个出现。

1注意小圆点会错落的向右移动，然后弹回，注意运动顺序的调节

2此次也建议用quad+out

3注意小圆点逐个出现，因此透明度的变化要在时间轴上依次设置。

snowy文字效果

这里运用了蒙版运动，来打造snowy文本逐渐出现的效果，注意snowy不透明度也要变化（蒙版的不透明度变化是多余，请勿模仿）

方法1：ae+ps

1保存后，ae中合成>添加到渲染队列

完成设置后，点渲染

2用ps打开渲染出来的mov(文件>导入>视频帧到图层）

3cmd+shift+s或者文件>储存为web可用格式

1循环选项选择永远

2图像大小可以设置

3注意选择gif格式

方法2：licecap

如果你不想用ps的话，可以先调节ae中画布大小，再使用licecap这款录屏为gif的小软件录制，很方便，堪称最好用的gif录制软件。（有多平台版本）

录制效果：

cocoachina是全球最大的苹果开发中文社区，官方微信每日定时推送各种精彩的研发教程资源和工具，介绍app推广营销经验，最新企业招聘和外包信息，以及cocos2d引擎、cocosstudio开发工具包的最新动态及培训信息。关注微信可以第一时间了解最新产品和服务动态，微信在手，天下我有！Ps、Flash、Ae都可以，用在交互动效中flash就可以AE是纯粹的视觉特效软件虽然定位是影视后期，但是网页也有使用，作为UI设计师用AE只能说你很新潮很厉害，AE也有自己基于JavaScript语言的表达式来实现高级动画控制，目前来看AE现在用的最多的领域是CG、多媒体行业的领域。

Flash给大多数人的印象，这是一个矢量动画软件，但是容易忽略的一点就是动画并非是Flash的全部，它并不像AE一样纯粹的构建视觉特效它还可以做游戏、做网站开发，能做很多东西一个明显的特征就是“交互性”，比如玩游戏就是一种交互。

作为UI设计师flash用于做动效就可以，毕竟AE做出来的东西更适合看。

1994年**《大话西游》

周星驰饰演的至尊宝对朱茵饰演的紫霞仙子表白：

“曾经有一份真挚的爱情放在我面前，我没有珍惜，等我失去的时候，我才后悔莫及，人间最痛苦的事情莫过于此。你的剑在我的咽喉上割下去吧！不用再犹豫了！如果上天能给我一次再来一次的机会，我会对那个女孩子说三个字：我爱你，如果非要在这份爱上加一个期限，我希望是……一万年。”

1997年**《半生缘》

吴倩莲饰演的顾曼桢对黎明饰演的沈世钧表白：

“我要你知道，这个世界上有一个人会永远等着你。无论什么时候，无论你在什么地方，反正你知道总会有这样一个人。”

1999年**《星愿》

任贤齐饰演的洋葱头去世后，张柏芝饰演的虞秋男对其表白：

“我刚刚真的以为洋葱头又回到我身边了，以前一直以为自己可怜他，但是当他死了之后，我才发现没有了他，是多么的痛苦。原来我一直都喜欢他，明明喜欢他，为什么不跟他说；明明希望他知道，希望吹萨克斯风的人就是他，为什么不问清楚；明明第二愿望，是想要和他在一起，为什么不说出来？现在不行了，可不可以从头再来？这样回忆又有什么用嘛？”

2000年**《花样年华》

梁朝伟饰演的周慕云对张曼玉饰演的苏丽珍表白：

“是我，如果有多一张船票，你会不会跟我一起走？”

2008年**《海角七号》

范逸臣饰演的阿嘉对田中千绘饰演的友子表白：

“留下来……或者我跟你走！”

外国爱情**中的经典告白：

1942年**《卡萨布兰卡》

亨弗莱·鲍嘉饰演的里克·布莱恩对英格丽·褒曼饰演的伊莉莎·伦德表白：

“世界上有那么多的城镇，城镇中有那么多的酒馆，她却走进了我的。”

1997年**《泰坦尼克号》

莱昂纳多·迪卡普里奥饰演的杰克对凯特·温斯莱特饰演的罗丝表白：

“你跳，我也跳。”

1998年**《天使之城》

尼古拉斯·凯奇饰演的天使塞斯对梅格·瑞安饰演的玛吉表白：

“我闻到过她的秀发在空气中的飘香，我亲吻过她柔软的双唇，我曾触碰到她温暖的手——我宁愿要这些短暂的时刻，也不愿意要没有这些的孤独的永生。”

1999年**《诺丁山》

休·格兰特饰演的威廉·萨克对茱莉亚·罗伯茨饰演的安娜·斯科特表白：

萨克：“我只是想知道，如果……萨克先生意识到自己是个……跪在你面前……并且请求你重新考虑，你会怎么做？会不会……重新考虑？”

安娜：“是的，我相信我会。”

记者：“安娜，你打算在英国呆多久？”

安娜：“无限期。”

2003年**《真爱至上》

安德鲁·林肯饰演的马克向凯拉·奈特莉饰演的朱丽叶表白：

“现在我只想向你表白，我并没有任何期望，但是今天是圣诞夜，圣诞夜一定要说实话，对我来说，你很完美，我将爱你到永远……”

有关520我爱你的表白句子

幸福的日子，是有你相伴，烦恼永不在线；甜蜜的时光，是与你手牵，幸福天天碰面。520我爱你，愿你天天“眉眼弯弯”，幸福日日来连线！爱你永远！

NO2有些人注定要消失在岁月里，有些事注定要埋藏在记忆里，有些情注定要沉浸在蜂蜜里，有些爱注定要表白在嘴里。520网络情人节，爱你的心在我这里。

NO3老婆大人我最爱，你的笑容暖心怀。自从来到我身边，幸福生活不离开。孝顺父母慰心怀，教育子女你承担。一心一意无别念，为了家庭付一切。520我爱你，爱你生生世世也不厌！

NO4我爱你日祝福你，一见钟情喜欢你，二话不说拥抱你，三生甜言幸福你，四季健康平安你，五路吉祥笼罩你，六六大顺如意你，520我爱你，爱你不离不弃，愿你开心每一天。

NO5灾情超越亲情，险情就是命令，照顾灾民冷暖，奔波临时帐篷，铭记党的职责，情系黎民百姓，走过自家门口，奔向相亲弟兄。向支援灾区的基层干部致敬，是你们谱写新时代的公仆形象，阐释的赤诚，520，我爱你们。

NO6今天520，表白我的爱：我爱你清澈明亮的眸子，我爱你笑如春花的样子，我爱你温柔娴静的步子，我爱你任性可爱的性子。亲爱的，让我宠你一辈子，疼你一辈子，爱你一辈子！

NO7不管刮风下雨，都有我的怀抱保护你；不管斗转星移，都有我的心守卫你；不管岁月更替，都有我的爱不离不弃，520我爱你，宝贝我爱你爱的很彻底，愿你幸福！

NO8爱你没有时间限制，一年三百六十五天；爱你没有地域边限，天涯海角爱你永远；爱你不需要隐瞒，我要让所有的人看见我们爱情的甜蜜。520我爱你，让我们的爱天长地久。

NO9我爱你三个字，说出来只要三秒钟，解释要三小时，证明却要一辈子。520我爱你，我心甘情愿死心塌地无怨无悔爱你一生一世！

0虽然你不喜欢做家务，虽然你爱买漂亮衣服，即使你天天唠叨无数，哪怕你再爱莫名吃醋，有一句话还是难以忍住，谁让你是我的媳妇，逗逗你让爱更稳固。520我爱你，今生今世我们一定要甜蜜幸福！

篇二

送你一枚真情钻戒，愿你套住幸福永远在身边；送你一束甜蜜玫瑰花，愿你爱情浪漫真情留身边；送你一只好运小帆船，愿爱情一帆风顺真爱永不变，520我爱你，给你一生一世的快乐和幸福。

NO2一束玫瑰不足代表我的爱意，一盒巧克力不足代表我的诚意，一个千纸鹤不足代表我的心意，为你这么做只让你知道我的真意：我是真的很喜欢你！

NO3开垦一片土壤，亲手为你种下一棵幸福，铺出一条道路，两边种满快乐之花，勾勒一幅蓝图，上面满是甜蜜，诉说一句浪漫，全部都是我爱你，520我爱你，爱你一生，宠你一世！

NO4地震残境触目观，人民队伍奔现场。奋勇援救继夜战，解救百姓视战场。时间就是生命关，手刨肩扛忙忘餐。顶风冒雨不惧险，抢险精英本色显。520我爱你：队伍百姓鱼水情，感谢人民子弟兵。

NO5你是一本书，我读了就不想再放下；你是一片美丽的风景，我看了就不想再离开；你是一个瑰丽的梦，让我永远不想醒来。520我爱你，想读你一生，恋你一生，为了爱梦一生！

NO6我找到了快乐，甜蜜却离我而去；我找到了浪漫，温馨却离我而去；我找到了开心，幸福却离我而去；我找到了你，却惊喜地发现：它们都和你在一起。520我爱你，愿与你常相守，长相依！

NO7我爱你，一句话儿告诉你，二话不说爱上你，三生有幸认识你，四海为家都陪你，五湖四海都护你，六神无主只为你，七事八事都听你，“九十”一生爱着你！

NO8你心里柔和谦卑，你胸怀恩爱怜悯，与你同在无限甜蜜，在“520”来临之际，祝愿我们的爱情常青不败！

NO9回忆青年时期的流转时光，天真浪漫潇洒无虑。我们一起在春光艳阳的季节里荡漾，相拥想吻载歌蹈舞，花前月下牵手共度。光阴似箭催人老，今昔已是白发头。夕阳天年相依靠，永远相爱度晚年。520我爱你一生一世永远。

0一束玫瑰不足代表我的爱意，一盒巧克力不足代表我的诚意，一个千纸鹤不足代表我的心意，为你这么做只让你知道我的真意：我是真的很喜欢你！在“520我爱你”的日子里，愿你能够接受我的爱意！

经典**中的台词

1、《大鼻子情圣》：我的心分成两半，一半因为责任留给我的妻子，另一半留在新桥底下，用此一生来思念你。

2、《大鼻子情圣》：人生那个东西，也许只是在一段刻骨铭心之后才算是真正的开始，但有时候想想，徒留遗憾罢了。

3、《阿甘正传》：生活就像一盒巧克力，你永远不知道你会得到什么。

4、《爱玛》：世界上总有一半人不理解另一半人的快乐。

5、《四根羽毛》：上帝会把我们身边的东西拿走，以提醒我们得到的太多!

6、《男人四十》好多东西都没了，就象是遗失在风中的烟花，让我来不及说声再见就已经消逝不见。

7、《阿飞正传》：我听别人说这世界上有一种鸟是没有脚的，它只能一直飞呀飞呀，飞累了就在风里面睡觉，这种鸟一辈子只能下地一次，那边一次就是它死亡的时候。

8、《停不了的爱》：“小时候，看着满天的星斗，当流星飞过的时候，却总是来不及许愿，长大了，遇见了自己真正喜欢的人，却还是来不及。”

9、《新不了情》：我觉得生命是最重要的，所以在我心里，没有事情是解决不了的。不是每一个人都可以幸运的过自己理想中的生活，有楼有车当然好了，没有难道哭吗所以呢，我们一定要享受我们所过的生活。

10、《英雄本色》：有信心不一定会成功，没信心一定不会成功。

11、《笑傲江湖之东方不败》：有人就有恩怨，有恩怨就有江湖。人就是江湖，你怎么退出

12、《堕落天使》：当你年轻时，以为什么都有答案，可是老了的时候，你可能又觉得其实人生并没有所谓的答案。

13、《东邪西毒》：最了解你的人不是你的朋友，而是你的敌人。

14、《2046》：爱情这东西，时间很关键，认识得太早或太晚，都不行。

15、《左走向右走》：生命中充满了巧合，两条平行线也会有相交的一天。

16、《玻璃之城》：我手上的爱情线、生命线和事业线，都是你的名字拼成的。

17、《半生缘》：我要你知道，这个世界上有一个人会永远等着你。无论是在什么时候，无论你在什么地方，反正你知道总会有这样一个人!

18、《春光乍泄》：当我站在瀑布前，觉得非常的难过，我总觉得，应该是两个人站在这里。

19、《开往春天的地铁》：我一直怀疑27岁是否还会有一见钟情的倾心。我不知道该说什么，我只是突然在那一刻很想念她。

20、《情人》：我以经老了，在人来人往的大厅，有一位老人他向我走来，他说我认识你，那时的你还很年轻，美丽，你的身边有许许多多的追求者，不过跟那时相比，我更喜欢现在你这经历了沧桑的容颜

经典**中的精彩语录

1You knoething inside ,that they can't get to , that they can't touch That's yours

那是一种内在的东西, 他们到达不了,也无法触及的,那是你的。

3Hope is a good thing and maybe the best of things And no good thing ever dies

希望是一个好东西,也许是最好的,好东西是不会消亡的。

4Jenny and I me please

求你离开我。

7If you are ever in trouble, don't try to be brave, just run, just run aething we're all destined to do

死亡是生命的一部分，是我们注定要做的一件事。

10I was messed up for a long time

这些年我一塌糊涂。

AE的基本操作快捷键如下：

1、全选。

Windows系统下是Ctrl+A，Mac OS系统下是Command+A。

2、全部取消选择。

Windows系统下是F2 或 Ctrl+Shift+A，Mac OS系统下是F2 或 Command+Shift+A。

3、重命名选中的图层、合成、文件夹、效果、组或蒙版。

Windows系统下是主键盘上的 Enter，Mac OS系统下是返回键。

4、打开选中的图层、合成或素材项。

Windows系统下是数字小键盘上的 Enter，Mac OS系统下是数字小键盘上的 Enter。

5、退出。

Windows系统下是Ctrl+Q，Mac OS系统下是Command+Q。

6、撤消。

Windows系统下是Ctrl+Z，Mac OS系统下是Command+Z。

7、重做。

Windows系统下是Ctrl+Shift+Z，Mac OS系统下是Command+Shift+Z。

8、新建项目。

Windows系统下是Ctrl+Alt+N，Mac OS系统下是Command+Option+N。

9、打开项目。

Windows系统下是Ctrl+O，Mac OS系统下是Command+O。

10、打开“项目设置”对话框。

Windows系统下是Ctrl+Alt+Shift+K，Mac OS系统下是Command+Option+Shift+K。

11、打开“首选项”对话框。

Windows系统下是Ctrl+Alt+;（分号），Mac OS系统下是Command+Option+;（分号）。

12、新建合成。

Windows系统下是Ctrl+N，Mac OS系统下是Command+N。

扩展资料：

AE中快捷键的使用说明：

在AE中使用的快捷键，除了包括AE程序中已经默认的快捷键外，用户还可以根据自己的需要，运用自己常用的键盘符号来定义快捷键。

但是需要注意的是，以上所列举的快捷键属于应用程序级热键，就是说这些快捷键只能在AE程序运行中起作用。当AE程序不活动或者是在后台运行时，这些快捷键就失效了。

除了应用程序热键外，AE程序中还可以使用系统级快捷键。因为系统级快捷键是可以全局响应的，不论运行的什么程序，或者是否在运行程序，这些快捷键都能起作用。

——AE

1、AE是 After Effects的简称，是一款图形视频处理软件，AE是Adobe公司的一款软件。

2、AE是可以用于图形与视频设计与处理，在动画制作公司、海报宣传视频设计公司等经常用，属于后期处理软件。

3、在使用AE时，我们可以用AE进行多种影像的合成，制作动画效果、制作出优美的视觉效果。

1、将鼠标指针拖动到另一个合成的时间轴面板上，放置在你想要的位置上。如果需要调整图层的位置，可以按住Shift键并拖动图层，这样可以确保图层仍然与原始位置对齐。

2、首先在打开的ae软件中，点击第一个图层。然后按住shift键选中最后一个图层，接着按住ctrl+shift+c键，如下图所示。会看到有一个预合成的对话窗口，点击确定选项即可，如下图所示。

3、合成里面有一个素材01和素材02，素材01上面有效果控件和缩放位移动画，而02上面没有任何效果和动画，现在想把01里面的效果和动画复制到02上面，在时间线上Ctrl+D复制一个01图层。

4、建立完一个合成后就会保存在素材库内，直接拖到另一个合成中即可。

一、隐藏图层时间轴

  在出现图层过多现实较为混乱时而且不方便把图层进行预合成，这里就可以用到面板上的一个开关“隐藏图层”，先把不需要显示的图层，把那个长得像骷髅头的按钮关闭，把需要的打开，

在搜索行的右边也有一个骷髅头，再去点击它就可以只显示打开开关的图层

二、预合成的复制

  通常一个预合成做了效果，而这个效果你在后续还需要复制出来制作另一种不同的效果时，一般情况下我们会出现在左下方图层表里进行复制，然后再进去预合成更改里面的内容，而导致之前做的内容也被更改了的这样一个情况。那么解决方法很简单，就是把项目列表里的预合成进行复制再拉到图层列表里，这时候进行更改就不会出现以上的问题。

二、基础动画的快捷键

基础动画的快捷键分别是:位置“P”、旋转“R”、缩放“S”、透明度“T”，这些快捷键都是可以调出对应的效果，然后再对应的打上关键帧或者是调节所需的值。

在缩放、位置、旋转都打上了关键帧时候，可以按“U”键把这个图层所以的关键帧调出来。

还有一种方法，就是在打开了第一个动作之后还想在不关闭第一个动作的前提下打开第二个动作，这个时候就需要在原本的单个快捷键上加一个“shift”。

1、首先在如图位置，用鼠标右击。点击新建合成组。

2、在弹出的面板中，设置下面的持续时间为三秒，点击确定。

3、然后在下面的面板中，鼠标右击，点击新建，选择固态层。

4、在弹出的固态层设置中，设置宽高为200px,选择颜色为**,点击确定。

5、下面我们已经建了一个固态层,点击键盘上的p键,调出位置功能。

6、如图，就是该固态层的位置功能。

7、点击位置前面的秒表。

8、然后拖动时间轴，在拖动上面的**方块。

9、这样一个简单的动画就做好了，点击右上角预览控制台中的播放按钮，就可以看见一个运动的**方块了。