怎么用UI制作左右划动交互动效
作者:暂无发布时间:暂无

1.【打开】AE,将素材【拖入】到AE中,【双击】素材合成打开,再把“手指滑动”【拖入】合成中,放在最顶端,按【Ctrl+S】保存。

2.【选择】“手指滑动”按【S】缩放设置为80%,在第2帧位置,按【P】位置并添加【关键帧】,在第10帧位置,调整【位置】到左下方,调整路径,按【T】打开不透明度并【添加关键帧】,在第10帧位置,调整【不透明度】为50%,在下一帧,调整【不透明度】为0%。

3.按【U】显示关键帧,再【选择】位置后面的关键帧,按【F9】缓动,再点击【图表编辑器】,调整曲线,打开【运动模糊】按钮。

4.【选择】“card2”按【S】缩放为94%,将【时间轴】向后移动7帧的距离,调整【缩放】为100%,【选择】“card3”按【S】缩放,打开【计时器】调整为从88%到94%,【选择】“card4”按【S】缩放,打开【计时器】调整为从82%到88%,【选择】“card2”、“card3”、“card4”按【U】折叠关键帧。

5.按【P】位置,【选择】“card2”调整【位置】为375,506并添加【关键帧】,在第12帧调整【位置】为375,544,【选择】“card3”调整【位置】为375,471并添加【关键帧】,【选择】“card4”调整【位置】为375,438并添加【关键帧】,在第12帧位置,【选择】“card3”的第一个【关键帧】按【Ctrl+C】复制,在“card4”第二个【关键帧】按【Ctrl+V】粘贴,同样操作“card3”的第二个【关键帧】。

6.【选择】“card1”到“card4”按【Ctrl+C】复制再按【Ctrl+V】粘贴,调整图层顺序并按顺序【重命名】,【选择】“card1”按【P】打开位置,打开【计时器】,在第12帧位置向左下方拉动,再按【R】打开旋转并添加【关键帧】,在第12帧调整【旋转】为-18°,调整【位置】路径的滑杆。

7.【选择】位置最右边的【关键帧】按【F9】设置缓动,打开【图表编辑器】调整曲线,【选择】“card1”到“card4”按【U】显示关键帧,再【框选】所有的关键帧向后移动,【选择】“card2”【右击】-【图层样式】-【颜色叠加】,【颜色】调整为白色,将【不透明度】添加【关键帧】,在19帧调整【不透明度】为0%。

8.【选择】“card3”【右击】-【图层样式】-【颜色叠加】,【颜色】调整为白色,将【不透明度】添加【关键帧】,向后移动【时间轴】调整【不透明度】为0%,【选择】“card4”【右击】-【图层样式】-【颜色叠加】,【颜色】调整为白色,将【不透明度】添加【关键帧】,向后移动【时间轴】调整【不透明度】为0%,【选择】“card4”按【T】不透明度为0%并【添加关键帧】,在第20帧调整【不透明度】为50%,【选择】“card3”按【T】不透明度为50%并【添加关键帧】,移动【时间轴】调整【不透明度】为100%

9.将光标【移到】1秒06帧位置,添加一个【标记】,【选择】“手指滑动”按【Ctrl+C】复制再按【Ctrl+V】粘贴,【拖动】合成向后移动,按【U】显示关键帧,调整【关键帧】从左到右的滑动效果。

10.【选择】“card2”按【P】打开位置并【添加关键帧】,在第1秒14帧,向右下方调整【位置】,其余操作和第一次滑动相同,【位置】发生变化,【角度】也要发生变化,调整【滑杆】让路径有弧度,对后面的【位置】关键帧按【F9】设置缓动,再打开【图表编辑器】调整曲线,其他卡片相同操作。

11.四次滑动全部调整完成后,将【工作区域】缩短,再预览效果,【选择】“card7”【右击】-【图层样式】-【颜色叠加】,调整【颜色】为白色。

12.将【光标】调整到第一次滑动的位置,【选择】图层序列“5”,按【S】打开缩放调整【缩放】为80%,向后移动【时间轴】调整【缩放】为100%,再向后移动【时间轴】调整【缩放】为80%,【选中】后面两个【关键帧】按【F9】缓动,再打开【图表编辑器】调整曲线。

13.【打开】抖动表达式进行【复制】,【选择】图层序列“5”打开【缩放】,按【Alt】+点击【计时器】添加表达式,将表达式【粘贴】进输入框里面,【框选】它的【缩放】关键帧【复制】,【粘贴】到图层序列“6”的【缩放】上,多【粘贴】几个【关键帧】,预览效果。

14.最终效果如图所示。


点击观看视频教程
UI-左右划动交互动效
初级练习11691人已学视频时长:26:36
立即学习
特别声明:以上文章内容仅代表作者本人观点,不代表虎课网观点或立场。如有关于作品内容、版权或其它问题请与虎课网联系。
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
虎课
积分
免费学习90000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了39,978
并提交了225份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 90000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证