恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UI动效教程|一个优美的翻页
7.7°
原创文章 / 教程 / / 举报
1019 18 13 1

2021-12-28

Hello~小伙伴们

这次我们来做一个翻页的动画

用到的工具是PS和AE



 效果预览 





  •  教程步骤 


01.  双击左侧空白区域导入psd文件


02.  双击导入的文件,使psd的内容呈现在下方面板


03.  在「图1」下方拉一个距离12px(标尺上有刻度可参照)的参考线(Ctrl+R调出参考线)


04. 「图2」缩小至90%,不透明度改为30,放置于此参考线处


05.  同理,「图3」放于「图2」下方,缩小至80%,不透明度为20


06.  先隐藏「图4」,选中「图1」,点击“效果”-“扭曲”-“CC Page Turn(翻页效果)


07.  “Controls”是控制翻页方向,选择“Bottom Right Corner(右下角)”,并把控制锚点放在右下角


08.  时间线放在初始处,点击“Fold Position”的码表,打上一个关键帧(按快捷键U,可看到打在图1图层上的关键帧)


09.  在第15帧处(按键盘+、—可以看到具体的帧数),拖着控制锚点,至画面外侧,打上第二个关键帧


10.  “Fold Radius(折叠半径)”控制纸张折叠的弧度,改大一些,让纸张更柔和自然


11.  “Light Direction(光源方向)”控制光的方向,可以根据需要调成高光或者阴影(这里我们用阴影)


12.  “Render(渲染)”是展示纸张的“正面”、“反面”或“正面和反面”,这里选择“Front & Back Page(正面和反面)


13.  “Back Page(反面)”控制纸张反面的图像,选择哪个图层,就是把哪个图层的画面叠加到纸张的反面,也可以选择无图像。当然也可以自己做一个别的图像


14.  “Back Opacity(反面不透明度)”控制反面的不透明度


15.  “Paper Color(纸张颜色)”控制反面颜色,当“Back Page”选择“无”,可以给反面添加任何颜色


16.  选择「图2」,时间线放在初始位置,把“不透明度”打上关键帧


17.  在15帧处,把“不透明度”改为100,打上第二个关键帧


18.  在初始处,“缩放”打上关键帧;在15帧处,“缩放”为100


19.  在初始处,“位置”打上关键帧;15帧处,改变“位置”Y轴数值,把「图2」放在原「图1」位置


20.  同理,「图3」在初始处,“不透明度”“缩放”“位置”打上关键帧;在15帧处,“不透明度”为30,“缩放”为90,“位置”位于原「图2」的位置


21. 「图4」在初始位置,“不透明度”改为0,点击码表打上一关键帧,“缩放”为80;在第15帧处,“不透明度”改为20;放置在原「图3」的位置


22.  选中所有关键帧,右击关键帧-关键帧辅助-缓动(让运动更自然)


到这里就结束了

这是翻一次页的动画

如果要做翻好多次页,也是同样的步骤


素材和源文件可在下方“原文链接”里获取

原文链接


Powered by Froala Editor

UI动效动效设计AE翻页动画

创建于:2021-12-28
收藏

18人已收藏

  • 13

    作品

  • 366

    粉丝

  • 4

    关注

  • 动效教程|以二维线条,做三维空间
  • [动效教程]  液里液气的~标签栏
  • [AE教程] TabBar动效,上手就会
  • 【AE教程】怎样简单实现翻书小动画

猜你喜欢

    韩小雪呀

    韩小雪呀

    活雷锋
    • 366

      粉丝

    • 234.6

      人气

    • 4114

      颜值

    作品

      韩小雪呀

      点赞:13

      收藏:18

      评论:1

      UI动效教程|一个优美的翻页

      你确定要举报UI动效教程|一个优美的翻页

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年12月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录

      可云端编辑的专业级UI设计工具

      立即体验