怎样用UI设计红包动效
作者:暂无发布时间:暂无

1. 打开【PS】,制作红包动效素材;【框选】“盖子”“A面”“B面”图层按【Ctrl+T】自由变换缩小,调整图层顺序;【关闭】PS


15204961883528.jpg

2. 将红包动效素材【拖拽】到AE中打开;【右键】打开【合成设置】,将【合成名称】改为“L10课堂”、【帧速率】30、【持续时间】420;【双击】打开“L10课堂”,再按【Ctrl+S】保存;把“触摸反馈”素材【拖入】到AE中,将“手指滑动”合成【拖拽】到“L10课堂”中,放到最顶层,调整到合适的位置。


15204961932427.jpg

3. “盖子”“B面”层的【父子级】链接到“A面”上,打开“A面”的【位置】向下调整Y轴到合适位置;【选择】“手指滑动”按【S】缩放为80,80%并【添加关键帧】,向后移动【时间线】调整【缩放】为60,60%,再向后移动【时间线】调整【缩放】为80,80%,再调整【关键帧】之间的间距;按【T】不透明度并【添加关键帧】,向后移动【时间线】调整【不透明度】为0%,调整【关键帧】的位置。


15204961996416.jpg

4. 在第14帧处按【*】标记时间轴,【选择】“A面”按【S】缩放并【添加关键帧】,移动【时间线】到第19帧调整【缩放】11,11%,回到第14帧,按【P】打开位置并【添加关键帧】,在第19帧处向上移动位置调整到画面的中心;【选择】“输入界面”层使用同样操作制作效果;将“输入界面”“盖子”图层顺序移动到“A面”下层;【选择】“A面”按【U】显示关键帧,将后面的两个关键帧向前移动,按【F9】添加缓动,打开【图表编辑器】查看速度曲线。


15204962047452.jpg

5. 选择输入界面按【U】显示关键帧,将后面的两个关键帧移动调整,按【F9】添加缓动,打开【图表编辑器】查看速度曲线;【选择】“黑色蒙版”层按【T】不透明度并【添加关键帧】,向前移动【时间线】调整【不透明度】为0%;在第21帧处按【*】标记时间轴;在第110帧处【选择】“输入界面”将【位置】沿Y轴向下移动。


1520496210755.jpg

6. 【选择】A面”按【U】显示关键帧,移动【时间线】到第113帧,将【位置】沿Y轴向下移动,在第22帧处将前面的关键帧按【Ctrl+C】复制【Ctrl+V】粘贴过来;在“输入界面”层【右键】选择【蒙版】-【新建蒙版】,点击【蒙版路径】计时器【添加关键帧】,在第113帧处使用【钢笔工具】按【Ctrl】在空白区域点击一下,按【Shift】同时选择下面两个锚点,向上移动锚点。


15204962167180.jpg

7. 【选择】“盖子”层按【Ctrl+D】复制一层,将“盖子2”的【父子级】链接到“A面”;【选择】“盖子”在第106帧按【Alt+]】断开时间轴,【选择】“盖子2”按【Alt+[】断开时间轴;【选择】“盖子2”按【S】缩放在起点【添加关键帧】,使用【Motion v2】插件调整中心点到下方,在第113帧调整【缩放】为100,-100%;将图层移动到“A面上面”;【选择】“盖子2”第2个关键帧按【F9】添加缓动,打开【图表编辑器】查看速度曲线。


15204962219780.jpg

8. “盖子2”【右键】选择【图层样式】-【颜色叠加】,在选项里将【颜色】改为黑色,【不透明度】为0%并【添加关键帧】,在第106帧处调整【不透明度】30%,向后移动【时间线】调整【不透明度】为0%;【选择】“金币”层调整到合适的【位置】,将它的【时间轴】向后移动,按【S】打开缩放在111帧【添加关键帧】,在起点调整【缩放】为200,200%;按【P】打开位置,在后面先【添加关键帧】,移动【时间线】到108帧将【位置】沿Y轴向下移动。


15204962252118.jpg

9. 【选择】“金币”层按【T】不透明度并【添加关键帧】,向后移动时间线为【不透明度】添加【关键帧】,将第一个关键帧调整为0%,将它的【父子级】链接到“A面”;【选择】“红包气泡”层按【P】打开位置,在第122帧【添加关键帧】,在第115帧将【位置】沿Y轴向下移动;按【T】打开不透明度调整为0%100%的变化,选择【位置】最右边的关键帧按【F9】添加缓动,打开【图表编辑器】调整速度曲线。


15204962314889.jpg

10. 在第110帧处,【选择】“输入界面”按【Alt+]】断开时间轴;【选择】“A面”按【P】打开位置,在第115帧添加关键帧,在第122帧处调整【位置】为220,775.5,调整关键帧路径成圆弧形,【选择】最后一个关键帧,打开【图表编辑器】调整速度曲线。


15204962362060.jpg

11. 在第115帧处,【选择】“黑色蒙版”按【T】不透明度添加【关键帧】,向后移动【时间线】调整为0%;将红包这几个图层的【运动模糊】打开;预览效果。


15204962415211.jpg

12. 在项目面板【右键】选择【新建合成】,调整【合成名称】为“红包飘落”;将“小红包”素材【拖到】“红包飘落”合成中,按【P】打开位置,在起始位置【添加关键帧】,在第116帧处将它向下移动,拖动【操纵杆】拉出抛物线;【选择】右边的关键帧按【F9】添加缓动,在第7秒【添加关键帧】并将它的【图表编辑器】打开调整速度曲线;抛体运动速度曲线示意图如图。


15204962479179.jpg

13. 将【位置】关键帧的速度曲线按示意图进行调整;【选择】全部关键帧按【Alt】向后拉动,按【T】打开不透明度添加两个【关键帧】从100%0%变化;打开【3D图层开关】,打开属性为【X轴旋转】、【Y轴旋转】、【Z轴旋转】添加【关键帧】,并按【Alt】键点击【秒表】为它们分别添加表达式,点击【小三角】选择【Property-wiggle】,更改表达式为“wiggle2,90)”,【全选】表达式按【Ctrl+C】复制,再按【Ctrl+V】粘贴到其它表达式里面。


15204962516408.jpg

14. 【选择】小红包图层按【Ctrl+C】复制,再按【Ctrl+V】连续粘贴9次,将其它图层的每个关键帧【位置】、【关键帧操控杆】、【图表编辑器】的速度曲线进行调节;操作方法同上;再将它们【时间轴】错开,使得红包出现的时间有节奏。


15204962566559.jpg

15. 对每一个图层按【S】进行缩放,从上到下【缩放】值为66%70%60%80%90%80%90%60%56%80%;【进入】“L10课堂”,将“红包飘落”【拖入】到合成顶层,把【时间轴】向后移动到红包出现的位置,调整它的【位置】。


15204962615940.jpg

16. 【进入】“红包飘落”合成,将小红包所有层的【运动模糊】打开,预览效果;【选择】“L10课堂”合成,在菜单栏点击【合成】-【添加到渲染队列】,【渲染设置】默认值、【输出模块】-【格式】QuickTime、选择【输出位置】,点击【渲染】。


15204962676597.jpg

17. 将输出的视频【拖入】到PS中,在菜单栏选择【文件】-【导出】-【存储为Web所用格式】,【格式】为GIF、【循坏选项】为永远,点击【存储】。


15204962728037.jpg

18. 本课内容小结,如图所示。


15204962769293.jpg

19. 最终效果如图所示。


15204962819516.jpg


点击观看视频教程
UI-红包动效设计
初级练习45488人已学视频时长:55:19
立即学习
特别声明:以上文章内容仅代表作者本人观点,不代表虎课网观点或立场。如有关于作品内容、版权或其它问题请与虎课网联系。
500+精品图书
20G学习素材
10000+实用笔刷
持续更新设计模板
立即领取

下载虎课APP

随时随地学技能
APP更方便
每天免费学课程
下载虎课网APP
随时随地学海量会员教程
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了27,078
并提交了210份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证