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

在设计中，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试试~
文章名称：成都网站设计教你制作动态UI翻转3D字幕
当前URL：http://cxhlcq.com/article/eidggd.html