ae模板教程-如何用AE创建简单的UI动效

如题所述

AE模版如何替换其中出现的文字

AE模版替换其中出现的文字步骤如下:

1、打开某AE模板,重链接好脱机素材文件,时间线指针移到相应位置,就能看到编辑预览窗口上显示的内容对应时间线的某图层。

2、在相对应的图层上双击,一层层查找,找到最终修改文字的那一层。双击文字层,在编辑预览窗口就能看到这些字成了选中状态,此时,我们就可以改字了。

3、双击文字层改字,可以在文字面板里修改字体和调整大小。

4、回到【总合成】。

5、查看图层,会发现有一个MP4格式的成品素材,预渲染好的内容,放在了最上面,挡住了我们改后的内容。

6、把【预渲染的成品视频】“遮挡物”的小眼睛关掉,就能看到自己修改过的内容了。

7、其它文字的修改方法与上面相同,修改完所有需要修改的内容后,回到主合层,然后渲染输出。

AE模板中怎么把时间缩短而且不影响特效啊

1、首先,我们将AE软件打开进入软件主界面打开素材。

2、然后我们点击素材,右击选择-时间-时间伸缩选项。

3、也可以在上面的工具栏中选择:时间伸缩。

4、在已经打开的时间伸缩对话框中,系统默认比率是100。

5、当比率调整到小于100时,表示

加速度

6、当比率调整到大于100时,就意味着放慢速度,播放视频。

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

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

动态GIF展现UI作品,优点在于:

1.展示实际工作流程

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

3.便于网络分享。

工具

AfterEffectsCS6orCC

PhotoshopCS6orCC

设计流程

AfterEffects

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

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

3.导出

Photoshop

4.优化GIF图像

素材

伦敦背景图一张

手机透视效果模板一张

一、基本构建

创建转场效果合成

步骤1

打开AE,合成>新建合成(Cmd+N),尺寸为640*1136,帧数29,持续6s

步骤2.

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

步骤3

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

步骤4

用钢笔勾勒出云朵和6片雪花空心圆(勾勒的略水,见谅)

步骤5

保存一下

展示合成

步骤1

创建合成2

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

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

步骤3

把合成1拖到合成2里面,那么合成2里面应该是这样:(p.s,我加了一层背景层)

步骤4.

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

-----------------------------------------------以上为基本构建部分-------------------------------------------------------------------

二、动效制作

下面,我们来分解一下动画:

1.3个蓝色方框变长,不同时的落下

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

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

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

5.Snowy文字出现。

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

处理过程

首先推荐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(文件>导入>视频帧到图层)

3.Cmd+Shift+S或者文件>储存为Web可用格式

备注:

1.循环选项选择永远

2.图像大小可以设置

3.注意选择Gif格式

方法2:LiceCap

如果你不想用PS的话,可以先调节AE中画布大小,再使用LiceCap这款录屏为Gif的小软件录制,很方便,堪称最好用的GIF录制软件。(有多平台版本)

录制效果:

CocoaChina是全球最大的苹果开发中文社区,官方微信每日定时推送各种精彩的研发教程资源和工具,介绍app推广营销经验,最新企业招聘和外包信息,以及Cocos2d引擎、CocosStudio开发工具包的最新动态及培训信息。关注微信可以第一时间了解最新产品和服务动态,微信在手,天下我有!

温馨提示:答案为网友推荐,仅供参考
相似回答