- 1、本文档共7页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
Document number【AA80KGB-AA98YT-AAT8CB-2A6UT-A18GG】
Document number【AA80KGB-AA98YT-AAT8CB-2A6UT-A18GG】
如何用AE制作简单的UI动效教程
如何用AE创建简单的UI动效
天气应用gif(据观测,小圆点弹的过了,各位制作的时候修改一下吧)
文末提供源文件下载
在Dribbble和Behance上,你们可能见过很多用Gif来表达设计理念的UI作品。很多人都想知道怎么来制作,怎样更好、更高效的表达自己的理念。很明显,动态的展现比静态的更形象,在这片文章中,我将教大家如何“动态化”自己的设计作品。
动态GIF展现UI作品,优点在于:
1.展示实际工作流程
2.利用转场,来展示应用不同状态时的效果
3.便于网络分享。
工具
1.After Effects CS6 or CC
2.Photoshop CS6 or CC
设计流程
After Effects
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
尺寸1280 x 720帧数29,时间6s
步骤 2.导入iPhone背景,调整尺寸。
步骤3
把合成1拖到合成2里面,那么合成2里面应该是这样:(p.s,我加了一层背景层)
步骤4.
选中合成1,效果扭曲边角定位,让合成1的4个角对上模板中屏幕的4个角。
-----------------------------------------------以上为基本构建部分-------------------------------------------------------------------
二、动效制作
下面,我们来分解一下动画
1.3个蓝色方框变长,不同时的落下
2.透明框从底部往上移动,自始至终宽度不变。
3.4个框抵达目的地后,文字开始出现,蓝色框文字是比例扩大+从不透明变透明,透明框中得文字是从不透明变透明。
4. 云朵图标,同时伴随雪花。
5. Snowy文字出现。
形状图层中,可以控制的属性有比例、位置、不透明度、描边等等,本文的动效中,就充分利用了这些属性随时间的变化,打造出动画效果。
处理过程
首先推荐2个脚本插件Ease and wizz和Repostion Anchor Point
一个方便做运动曲线,一个方便设置锚点位置。
三个蓝色框
打开合成1,选中三个蓝色框,设置如下
备注
1.最左面和最右面的蓝色框锚点在上方(利用Anchor Point插件设置)
2.比例从0-100%
3.利用Ease and wizz选中关键帧,可以很方便的调节运动曲线。
透明框
透明框的运动,开始以很快的速度移动了大部分位移,后来速度减慢,缓缓移动到原位,设置如下
备注:Ease and Wizz中设置Quad+out 运动效果比较平滑。
底部文字
备注:
1.三个蓝色框,当蓝色框触及到底部时,文字快速弹出,不透明度从0-100%,比例从0-100%
2.透明框中的文字随透明框一起运动(位置设置可以参考透明框),但是,左侧的文字先到,右侧的-4度后到,注意时间轴中得设置。
云朵
当透明框的文本开始出现时,云朵出现,先是透明度从0-100%。
而比例开始时是60%,当透明度到了100%时,从60%-100%
雪花小圆点
当云朵动效完成后,雪花小圆点开始逐个出现。
备注:
1.注意小圆点会错落的向右移动,然后弹回,注意运动顺序的调节
2.此次也建议用Quad+Out
3.注意小圆点逐个出现,因此透明度的变化要在时间轴上依次设置。
Snowy文字效果
这里运用了蒙版运动,来打造Snowy文本逐渐出现的效果,注意Snowy不透明度也要变化(蒙版的不透明度变化是多余,请勿模仿)
效果:
原作者的做法:
效果:
结果:
----------------------------------------------------以上为动画制作部分-------------
您可能关注的文档
- 如何有效地为你公司进行融资修订稿.docx
- 如何有效地投放小班区域材料修订稿.docx
- 如何来评价一个玉米品种的优劣修订稿.docx
- 如何树立和落实科学发展观修订稿.docx
- 如何正确维护青少的合法权益修订稿.docx
- 如何策划微薄营销活动p修订稿.docx
- 如何管理年纪大的员工修订稿.docx
- 如何管理微信群修订稿.docx
- 如何经营影城卖品部修订稿.docx
- 如何经营素菜馆修订稿.docx
- 部分可观测性下组合任务运动一种基于优化方法camille phiquepal 1153.pdf
- pcf2测量报告全尺寸part.pdf
- 画猫男孩级读者剧场剧本根据民间故事改编由kitty the boy who drew cats.pdf
- 文本说明二阶段-2x1000mw1acfc.pdf
- 批准hcki534d 544d-绕组技术数据表hcki5d 17 td en rev.pdf
- uu24m6-检测按键灯网口等.pdf
- 文案技术数据表2007technical datasheet.pdf
- 3g sleep mode application note睡眠模式应用程序说明.pdf
- 芯驿电子科技教程302 petalinux安装.pdf
- 案例shapemonkey用户指南2017 dan ebberts orrin user.pdf
文档评论(0)