粉丝8.1万获赞23.6万

hello, 大家好,我是太阳,这是新年的第一期教程,大家这个春节过得怎么样呢?本期我们来学习华为鸿蒙系统的开机动画在一中的实现方法,这是很多同学强烈要求的案例, 它的难度并不高,但是其中的技巧非常的实用,加上难度再出去左右。 ok, 我们现在开始吧。首先我们分析一下原动画,可以看到红门的开机动画呢,整体的结构其实并不复杂,基本上可以分解为位移以及缩放的效果,但是在动画运行中呢,还存在着诸多的细节,比如最开始的字母介入的效果, 以及欧字母缓缓升起,并且伴随着下半部分的模糊效果,多种效果相互配合呢,就给了这个原本简单的动画结构一种很丰富的感觉。这里我们要做的就是一项一项的去将其中的效果完美的实现出来,这里具体的制作过程我将会一一讲解。 ok, 我们现在开始制作。 首先我在 a 中已经准备好了红蒙的 logo 路径,这里我们可以利用 olo 的插件将他们导入到 ae 之中。导入完成之后,这里我们先按照字母的从左往右的顺序去排列一下图层的位置,同时呢再修改一下图层的名称,这样做的好处就是可以让我们之后方便辨认,这里我们快速处理一下。 ok, 完成之后呢,接下来就可以开始去制作整体 logo 的动画了,这里我们选中所有图层,然后给他们添加一个统一的负极空对象,直接使用某选脚本添加即可。完成之后,这里我们再选择负极空对象,使用 y 键去修改一下他的某点位置,因为我们缩放和位移动画呢, 基本上是以 logo 中的 o 字母为中心的,所以这里我们需要将空对象的锚点位置放在 o 的中心,但是如果放不准确呢,这里也可以利用 ctrl 加 r 开启辅助线,将锚点的位置准确的放在中心,可以看到就是我这个样子的。完成之后接下来就可以制作动画了, 这里我们来到三秒四十七针,给空洞圈的位置和缩放属性打上关键针,然后再来到二秒四十一针,将缩放改为二百三十七,位置改为 o 对齐视图中心参数大家可以参考我的。之后再来到三十针,将缩放继续放大,差不多在三百左右,播放动画就是这个样子的,这样基本的运动呢我们就设置好了, 不过目前的动画有点太过深硬了,所以还需要给他们添加缓动,这里我们将位置的第一个针的缓动改为四十,第二个改为一百,接着选择缩放的第二个针,使用 ctrl shift 加 k 呢,打开关键转速度面板, 因为这个针呢需要起到一个衔接的作用,所以这里我们需要调整其中的关键针速度,也就是其中的这个每秒百分比的参数,这里我们将这个参数呢都改为负四十,然后输入的影响改为三十五,输出的影响改为四十即可。这样这个关键针的缓动我们就设置完成了,接着再选择最后一个关键针, 将它的缓动改为九十,这样的话我们的关键帧的缓动就全部设置好了,这里开启关键帧速度图表去观察呢,就可以看到是这样的效果,可以看到其中的运动过度都是非常丝滑的,同时播放动画则可以看到就是我这样的状态。 整体的 logo 动画呢,就非常接近运动化的效果了, ok, 非常棒。这样的话,我们的 logo 基础的运动效果我们就做的差不多了。不过正如我们最开始分析的 这个位移和缩放的动画呢,只是整个动画的基础结构,在其中还包含着很多的细节,所以接下来我们还需要继续往动画中填充细节。动画这里我们选择欧字母下方的横杠元素,在缩放的过程中呢,他会逐渐的展开,所以这里我们直接打开他的缩放属性,在三秒零六针到三秒三十六针之间, 让很杠的 x 轴由零变为一百即可。这里第二个关键针,我们给它加上七十的缓动,播放动画就是这样的效果了,看下 还不错。接着我们再来制作字母的出场效果,这里我们观察一下远动画,可以看到在动画一开始的时候呢,整个 logo 的字母并不是在一开始就存在的,它是随着 o 字母的出现从中心向外扩散出现的。这种效果需要如何制作呢?非常简单,这里我们并不能利用透明度属性去制作他们的出场动画, 因为这样的方式并不能将其中的层次感完全实现。想要完美实现这个效果,我们需要利用到灯光元素,也就是利用照明的亮度呢,将字母从中心照亮,最后形成一种入场的感觉。 想要使用灯光和字母交互呢,我们首先需要将字母图层转化为三 d 图层,所以这里我们将需要入场的字母层全部选中,然后点击三 d 图层按钮,将它们转变为三 d 图层。接着在图层窗口中点击右键新建一个点光源,这里我们将光源的强度改为三百,衰键改为平滑即可,然后点击确定,此时就可以看到, 由于灯光的影响呢,目前灯光周围的字母就有一个渐变的亮度过度了,不过目前的状态还不是我们想要的完美效果,这里我们还需要调整一下灯光的位置,首先我们将灯光设定为顶部空对象的子级, 可以让灯光跟随着动画一起移动,同时再打开灯光的位置属性,将灯光调整到欧字母的前方一些的位置参数,大家可以参考我的。然后再打开灯光属性,这里我们调整其中的半径属性,就可以看到字母的亮度过度就可以被完美的控制了, 我们这里可以给其中的强度半径和栓减距离打上关键针,将他们放在三秒三十针的位置,然后再在二秒四十四针呢将灯光强度减弱一些,让他只照亮周围的两三个字母,同时在三十针 将灯光完全关闭。这里大家可以根据原动画自由的设置,也可以参考太阳的关键针位置以及混动参数,我们快速处理一下。 ok, 完成之后播放动画就可以看 此时的字母入场动画呢就非常的自然了,由于灯光的照射呢,在字母的范围内,整体的渐变过度也显得非常的自然,基本上和原动画是一模一样的,看起来非常棒,不过这里再仔细观察原动画就可以发现,字母在入场的时候呢,整体是有一个亮的倒角边的效果的,看起来就像是有厚度一样, 目前我们的效果呢并没有这个亮边,所以接下来我们需要将它制作出来,制作这个边也非常的简单,只需要给他添加一个鞋面与浮雕效果即可。这里我们首先选择左侧的 y 字母,直接点击右键,选择其中的图层样式,添加一个鞋面与浮雕,这样就可以看到我们的字母此时就出现了立体的感觉了。 然后再来到图层样式的详细属性中,调整一下其中的参数,首先将方向改为向下,然后将角度改为一百六十,高光模式改为柔光,高光不透明度改为一百,眼影不透明度改为七十,这样就 看到此时 y 字母的风格呢,基本上就和原动画中相同了。接着我们再给高光和阴影不透明度分别打上关键针,在二秒四十二针到三秒十一针之间呢,让这个立体的样式逐渐消失,这样的话呢, y 字母的立体效果我们就做好了, 其他的字母流程也是一模一样的,这里我们再来处理一下右边的 s 字母以及 y 字母,左侧的 n 字母,同样的都是给他们添加鞋面与浮雕图层样式,然后设置一下角度即可,最后再创建关键针,让效果逐渐的消失, 这里我们快速处理一下。 ok, 完成之后播放动画就可以看到此时的字母立体感呢就非常的强烈了,整体的层次感也变得非常的丰富,看起来也和原动画差不多,这样的话呢,字母这一块的效果我们就全部制作完成了,接下来呢,我们再来制作整个动画中最出彩的部分,也就是中间 o 字母的出现效果。


哈喽,好久不见,我是肌肉吃什么肉。这期教程呢,我们来讲一讲华为鸿蒙的开机动画怎么制作。首先来看看原版的开机动画, 拆解发现后呢,我们可以看出主要包括文字的缩放运动、位于运动蒙版运动光效和从立体到扁平的过路动画。下面我们一起来动手制作吧。节目开始之前呢,嗯,你们懂的, 因为华为这六个字母的缩放位移变化是错开的,所以呢,这里我们将其拆分成单个字母单个图层的方式来制作。 我们以最先出现的字母 a 为例,右键添加鞋面与浮雕效果,并在阴影不透明度上打下关键针。这里大概是两秒到三秒左右的剑舞动画, 数值是从百分之七十五到百分之零,具体的参数可以根据你们想要的实际效果去调整。 这个步骤呢,是让它产生从立体到扁平的过渡动画。当然呢,这里是为立体的效果。选中文字图层,用椭圆工具绘制蒙版适当羽化,并 在蒙版扩展上打下关键针。这里大概让他有一秒左右的运动,让字母从右下到左上慢慢出现。 注意,听讲隐藏的知识点来了这里呢,我们还要给字母在电话选项卡里面添加一个不透明度的关键针,别问我为什么,问就是不添加。他来配合蒙版运动的话,字母等一下会出现的很突兀,感兴趣的同学可以试一下。把字母 a 的锚点按住 ctrl 键拖动吸附到字母中心,再给 a 添加个有小渐大的缩放运动。其他字母也是类似的操作步骤,只不过比 a 多了个位于运动蒙版的扩展方向不同以及出现的先后顺序这里就不赘数了。 华为六个字母的动画全都做好之后呢?将其愈合成右键,愈合成图层样式,添加渐变叠加给字母以金属材质。这里的混合模式我试了之后选择的 是柔光,再在愈合成末尾添加个不透明度的关键针,让他最后在四秒处左右完全消失。
