• 做网站18609840880

大连网站设计教你制作动态UI翻转3D字幕

发布时间:2018-10-09

    在设计中,UI设计是一门很高深的艺术,也是一门精湛的技能。大连网站设计小编今天也与大家说说UI设计,其中翻转的3D字幕很棒的!动态UI如果想抓住眼球,那么它就需要有趣,而让动态效果逼近现实是有趣的一种事半功倍的方式。

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

    举个例子。看看下面的图

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

    看看下面的对比。

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

    再看下面的

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

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

    OK言归正传,现在小编讲解3D翻转小字幕,能让人联想起小木块的翻转感觉。

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

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

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

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

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

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

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

    绑定成功,预览效果

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

    后得到终效果

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

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

我们的优势

更多+

多年互联网服务经验
大连网站制作团队
中小型企业互联网供应商
服务行业领域超过70个
品牌传播与互联网技术并重

公司介绍

更多+

  网站建设、品牌推广品牌公司:大连新图闻科技有限公司是一家互联网服务提供商, 企业网络服务品牌,也是企业邮箱品牌“盈世”的大连地区代理商。公司成立于2007年, 致力于为企事业单位及个人提供互联网解决方案。公司服务项目包括网站建设、网络营销推广、 宣传册设计、商业摄影、企业邮箱等,帮助客户高速应用互联网技术,提高企业综合竞争能力。

联系我们

更多+
  • 咨询热线

    咨询热线:186-0984-0880

  • 市场部 : 8001@newtwowin.com 业务联系,业务需求请发到此邮箱.

  • QQ咨询

    QQ咨询: 94091176

  • 邮箱

    客服部:xxz@newtwowin.com

  • 地址

    地址:大连市沙河口区西安路罗斯福B座3109

我们的技术

更多+

  在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候,我们已经开始把数 字化品牌建设和网络传播进行了整合。只有通过整体的互联网品牌分析,帮助客户进行互联网品牌 建设,并传播企业品牌,并围绕品牌树立品牌价值,提升企业与用户的互相交流,与用户品牌交互,让 用户能找对的方法去解决问题。传播品牌,激起消费者品牌意识,在这过程中创造价值,这是我们成 功的秘诀,也是我们帮助用户成功的诀窍,更是成就好的品牌的一条直达线。

《中华人民共和国电信与信息服务业业务》工业和信息化部 辽ICP备09023418号-18
版权所有:大连新图闻科技有限公司