恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
用ae制作动态UI第二番——翻转的3D字幕~
0.0°
2015-06-17 原创文章 教程 原作者: 原作者 举报 14806 85 111 23

本篇文章讲解3D翻转字幕,算是细节动画
欢迎来TinyHouse Q:78613948

开讲前,跟大家分享下我最近忽然领悟到的一些经验:

动态UI如果想抓住眼球,那么它就需要有趣,而让动态效果逼近现实是有趣的一种事半功倍的方式。

对的,简单来说就是你看到的动态效果能让你联想到现实的事物,你就会觉得有趣。并不是说UI的内容让你联想到现实,而是动态的方式让你联想到现实。

举个例子。看看下面的图

非常平常简单的移动动画,但是非常没有生气,没有节奏感,让人厌烦。

看看下面的对比。

这个有了节奏感,物体运行速度也是由快到慢,这种运行的形式让人联想到了现实中的阻力,物体运动因为阻力而速度减慢,最终到0,对比上个动画,他平添了一种真实感,引人联想,因此有趣。

再看下面的

这个类?我仿照真实物理系统的感觉制作的简单动画,这个小球让人联想到了皮球,很有趣啦~当然,没有哪个好哪个不好,只有具体情况和具体创意,不要千篇一律。

最后总结一句:让人联想的动效是好动效!你们自己体会,也可以看看别的作品参考参考~

OK言归正传,上篇文章讲了弹性按钮,这篇讲解3D翻转小字幕,能让人联想起小木块的翻转感觉。

首先添加字幕图层,打上你想做的字幕,然后转换为3D图层,如下图

接下来按下左视图按钮,这个步骤是关键步骤

按下后我们就什么都看不到了,那是因为我们是在左侧看的这个字幕,可以理解为字幕为一个片状的图层,我们在左侧看当然什么都看不到了,只有在正面和反面的时候才能看到,如下图

接下来,要调节字幕的定位点了,按下Y键切换定位点工具,然后把定位点沿着Z轴移动到如图所示的位置

然后切换回默认视图,这回试着调节X轴旋转,你如果发现字幕沿着新的定位点移动。那么证明你成功了,在这里我们设置X轴旋转的关键帧,首帧为0,过四帧后数值为-98 ,然后每隔4帧进行浮动,我的旋转数值设置为:0,-98,-84,-92,-89,-90可以直接吧数值套进去。

后面的步骤就相对简单了,涉及到的是绑定动画,我们再建立一个文字图层,依然转换成3D图层,然后放在上个文字图层翻转前的位置

然后绑定的时候到了,非常关键,我们把时间线移到第一个字母翻转的最后一帧,然后在这个时间点让第二个字幕去跟随第一个字幕

绑定成功,预览效果

我们会看到此时的动画在初始帧和翻转后上下有白色的边,这白边其实是翻转成90度的字幕,因此我们进行细节处理,在第一个字幕开始翻转前,第二个字幕不需要出现,而在第一个字幕翻转到90度左右的时候就可以消失了,因此做优化处理,如图

最后得到最终效果

联合昨天的内容放在一起看一下

OK,这一期相对简单一些,算是动画中的细节处理,一个比较有趣的动效,大家的学习也应该是由浅至深,自己有时间可以多做练习,比如用这样的方式去翻转UI试试~

有不会的地方可以留言提问,也可以进群TinyHouse:78613948 讨论群一起讨论,畅所欲言



祝大家学业有成,早日超神~并且附上下一季的内容哦


仅仅两张静态psd图就可以做出来~你们想知道怎么做的吗?下一季见咯~

更新:2015-06-17

收藏

85人已收藏

快乐快乐快乐

FeatMax!

  • 63

    作品

  • 2.7w

    粉丝

  • 60

    关注

  • 旋转的房子MG动画教程
  • TIME
  • AE制作卡通小鸡动画
  • AE教程——制作inbox邮箱欢迎动画

    猜你喜欢

      2015-06-17 原创文章 教程 原作者: 原作者 举报 14806 85 111 23

      用ae制作动态UI第二番——翻转的3D字幕~

      0.0°

      你确定要举报用ae制作动态UI第二番——翻转的3D字幕~

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2015年06月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      111
      85
      23

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

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

      登录

      手机号

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

      登录
      第三方账号登录