Hello！各位小伙伴大家好！这里是设计师爱动效，这篇文章我们来详细探讨下如何在Ae中进行角色头部控制器绑定，并实现头部转动的伪3D效果。我们看到教学案例中，角色的所有头部转动和五官状态，都可以直接通过调整控制器来直接完成，是不是感觉非常简单呢？

文章结构

在正式开始前欢迎大家关注我的微信公众号“设计师爱动效”，微信号中回复“Ae头部绑定”即可拿到本次案例的角色文件。好了，话不多说，我们直接开始吧！

软件及插件介绍与准备

这次案例需要用到两个软件和三个插件，我们用Ai来绘制角色，在Ae中做角色动效，overlord插件就是一个连接Ai和Ae的桥梁，能让我们将Ai中的对象直接导入Ae中。Duilk和Joysticks_n_Sliders这两个插件都能辅助我们做控制器绑定，具体的工作原理我们稍后分析。

01 Ai文件导入Ae的两种方式

下面来介绍下Ai文件导入Ae的两种方式：第一种方式就是常规的导入方法，直接将保存好的Ai源文件导入Ae之中；第二种就是用overlord插件直接导入。

我们来简单演示下这两种导入方式。大多数情况下，我们在Ai中绘制的角色都在同一个图层里面。

而Ai中的图层与Ae中的图层是对应的，如果你的角色都绘制在同一个图层里面，导入ae后你也是只有一个图层，所以为了方便后面的动效绑定，我们需要在Ai中对角色进行图层整理，不同的元素要放在不同的图层并且命好名字。

整理完成后，我们将Ai源文件拖入Ae中，导入类型选为合成。

选中所有的图层，右键，从矢量图层生创建图形，然后将原来的文件删除，这样就正确的导入到Ae中了。

第二种方法就是使用overlord插件直接导入，在Ae中新建一个与Ai画布大小相同的合成。

在Ai中选中要导入的元素，点击导出按钮，选中的元素就就像复制粘贴一样导入到Ae之中了，而且图层名称和位置都不会发生改变。

02 Duilk 和Joysticks_n_Sliders插件的绑定原理

下面我们来介绍下Duilk和Joysticks_n_Sliders这两个插件，duilk是一个功能非常全面的角色绑定插件，里面有骨骼Ik，控制器很多好用的功能，最关键的一点，这个插件是免费的，大家可以去官网下载最新版本；Joysticks_n_Sliders这个插件是专门做控制器帮定的小插件，使用起来简单高效，就是价格有点小贵。

 

要弄清楚这两个插件的工作原理，首先要来了解下二维控制器，控制器中间的小圆点是控制滑块，拖动滑块来控制绑定对象的运动，外边的方框是控制器的外边框，用来限制中间滑块的运动范围。

我们以控制器中心为原点画一个二维坐标，坐标每个轴向分别与控制器产生两个交点，包括原点在内一共五个点，也就是说我们在用二维控制器进行绑定的时候，至少需要设置好这五个点的姿态，然后我们拖动滑块的时候就可以在这五个点的姿态间自由切换，并且通过不同的两个点之间的姿态强度叠加，来产生新的姿态。

那下面我们看看这两个插件的绑定流程有什么不同，JS插件的绑定非常简单，我们在时间轴上直接设置五个连续的关键帧，分别代表控制器的原点、右、左、上、下五个点，设置完成后，就可以直接绑定了。

而Duilk插件的绑定相对复杂，但是灵活性较高。duilk插件控制器是将X轴和Y轴分开绑定的，我们需要先设置好三个点分别带表原点、左、右位置，将其绑定到x轴向上；然后再设置三个点，分别代表原点、上、下三个位置，再将其绑定的y轴向上。

这样单纯讲概念非常抽象，下面我们在Ae中实际来演示下。

我们分别用两个插件来绑定下小球的位置属性，首先我们打开JS插件，打开小球的位置属性，从第零帧开始依次设置五个位置关键帧，第零帧是原点位置，也就是初始状态，后面四帧分别代表右、左、上、下四个位置。

五个关键帧设置好后，点击创建控制。JS插件会根据我们设置的五个关键帧自动生成控制器。

拖动控制器滑块，小球位置就成功绑定到了控制器上。

下面我们用Duilk来做同样的绑定，Duilk绑定是将x轴和y轴分开的，所以在绑定之前，我们打开小球的位属性，右键，选择单独属性，将x轴和y轴分开，在duilk中点击归零器，将坐标位置归零，方便后面进行参数话的调整。

进入Duilk连接器模块，这里就是我们进行控制器绑定的主要功能区，第一步，新建一个二维控制，对控制器大小进行简单调节。

我们首先来绑定x轴运动，在第10帧对x坐标打关键帧，代表原点位置。左边第0帧向左移动小球，代表左边位置，右边向右移动小球代表控制器右边位置。

设置完成之后，选中设置好的关键帧，选择轴向为x，点击链接到属性。

左右拖动滑块，小球x轴就绑定到控制器上了。

我们继续来绑定y轴，同样在第10帧对y轴坐标打关键帧，左边第0帧向上移动小球，代表控制器上面的位置，右边第20帧向下移动小球，代表下边位置，选中设置好的关键帧。

选择轴向为y，点击链接到属性，拖动滑块，小球位置的绑定就完成了。

到这里两个插件的绑定原理就讲完了，其实绑定流程和原理都大同小异，两个插件也各有优劣，所以在本次的角色绑定案例中才会结合两个插件一起使用。

好了，第一部分的内容就讲完了，下面我们来讲解表情姿态分析和角色绘制技巧。

表情姿态分析及角色绘制技巧

上个视频简单介绍了需要用到的软件和插件，接下来讲解下表情姿态分析和角色绘制技巧，具体的角色绘制过程我这里不再解说了，相信大家Ai都用得比较熟练，我这里主要讲一下如何搜集角色表情参考，以及一些方便后期动效绑定的绘制技巧。

01 表情姿态参考的搜集与分析

我们在Ai中绘制角色的时候，需要找一些表情参考，我们直接搜索facial expression reference，会有很多表情姿态，根据自己需要的风格选择合适表情参考，分析这些不同的表情参考可以总结出不同情绪下五官的不同形态，有助于我们进行角色的绘制和后期绑定。

比如，不同情绪下嘴巴的状态，嘴巴会张大，合拢，表示消极的情绪时会向上弯，表示积极的情绪会向下弯，所以我们在绑定的时候尽量要能实现这些姿态，其他五官也需要经过类似的分析，后面做动效绑定的时候  才有方向，你还可以将不同的五官状态单独绘制出来，方便后面参考。

02 Ai角色绘制的隐藏技巧

我们在Ae中要模拟出角色头部转动的伪3D效果，第一个难点就是如何实现头发和胡子左右转动时的三维效果。

所以我们在绘制的时候需要使用一点小技巧，这里头发和胡子部分我分了好四个图层，最下面一层是头发的整体形状，脸部发际线部分呢我用了两个单独的形状图层来模拟，后面在Ae中通过添加合并路径来模拟头部左右转动时发际线的运动。最上面还有一个遮盖层，来遮住头发漏出来的描边。

胡子的绘制跟发际线一样的道理，  底部是胡子整体形状，然后用两个图层来模拟胡子与脸部交接的地方，最后用一个不带描边形状遮胡子漏出来的描边。

我们在Ae中简单演示下为什么这样绘制，我将头发和脸部图层导入到Ae中，将用来模拟发际线的两个图层合并为一个图层。点开合并后图层的下拉三角，选中内容，点击添加“合并路径”，点开合并路径。

模式改成相减，我们调换下上下顺序，这样发际线就简单模拟出来了。

打开减去部分的位置属性，左右拖动，就模拟出头部左右转动的效果了。

其他五官的绘制没有特别的技巧，按照平时的方法来绘制就可以。绘制完成后，对文件图层进行简单整理，下个部分我们就要正式开始绑定了！

正式开始绑定

上个部分中我们分析了表情姿态和角色的绘制技巧，接下来就要正式开始绑定了，这个部分会详细的演示头部转动和五官姿态的绑定。

开始前，我们先来看一下绑定的逻辑，这里用一个主控制器来控制头部整体的转动，也就是说，角色头部所有元素都要绑定到这个控制器上，而眼睛、嘴巴和其他五官我们再用另外的控制器单独进行绑定。

 

01 简单模拟头部旋转，头发胡子的绑定技巧

下面我们来演示下头发和胡子的绑定，我们将绘制好的角色导入到Ae之中，对图层整理命名，可以用颜色标签对图层进行分类整理。

我们首先来绑定发际线的部分。找到我们用来模拟发际线的两个图层，将其合并为一个图层，打开图层内容，添加合并路径，模式改为相减，调整图层顺序得倒正确的效果。

打开剪去部分的位置属性，我们需要通过剪去部分的左右移动来模拟头部左右转动的效果。

前面我们分析过，Duilk的绑定是x轴和y轴分开的，而这里我们无法将图层的位置单独分开，所以我们需要新建一个空白图层，将其位置属性先绑定到空白图层上。新建一个空白对象，命名，打开空白对象的位置属性，右键，单独尺寸，点击归零器，将空白对象的位置坐标就归零。

我们需要把头发剪去部分的位置坐标绑定到空白对象上，这里会用到一个简单的表达式。按住alt键点击小秒表图标，英文输入法下，在右边的表达式编辑区中输入：var空格x空格=空格。

然后将左边的小蚊香图标拖动到，空白层的x位置上，然后用分号结束这句语法。

按Enter键换行，同样输入var空格y空格=空格，将左边的小蚊香图标拖动到空白图层y位置上，然后用分号结束。

按两次enter键分行，输入[x,y]，就完成表达式的绑定了。现在我们来拖动空白对象的位置就可以控制头发剪去部分的位置了，而且，x轴和y轴是分开的，这就方便我们用Duilk来进行绑定。

首先绑定X轴的运动，在第10帧对空白层的x位置打关键帧，在左边第0帧，向左移动发际线到合适的位置，在右边第20帧向右移动发际线到合适的位置。

进入Duilk连接器模块，点击控制器的滑块，点击选择控制器，选中刚刚设置好的三个关键帧，选择轴向为x轴，链接至属性，左右拖动控制器滑块，发际线就跟着一起运动了。

同样的原理，我们来做抬头和低头的绑定，在第10帧对空白层的y位置打关键帧，左边第0帧向上移动发际线到合适的位置，右边第20帧向下移动发际线到合适的位置。选中三个关键帧，选择轴向为y轴，点击链接至属性，发际线部分就绑定完成了。

我们继续绑定头发底部形状，头部左右转动的时候，鬓角的头发也会根据角度的变化改变形态，我们用同样的方法对头发鬓角做绑定。这里方法都是一样的，我就不详细解说了。

头发底部图层绑定完成后，还要对头发遮盖部分进行绑定，我们发现在某些角度下，脸部图层的描边会穿帮，所以我们要对头发遮盖的形状路径做绑定，让它匹配每一个角度。

到此头发还剩下上面的刘海没绑定了,方法原理都一摸一样，视频有详细的演示；胡子的绑定方法跟头发一摸一样，为了节约时间，我也不详细解说了！

头发和胡子的绑定是整个头部绑定复杂的部分了，需要大家多一些耐心，仔细调整，下个部分，我们来做其他五官的绑定。

02 其他五官的绑定

我们接着来做耳朵的绑定，头部在左右转动的时候耳朵也会一起转动，而且耳朵与头发之间还会产生前后的遮挡关系，那我们怎么实现这样的效果呢？

这里我们需要对耳朵的位置和透明度进行绑定，在第10帧，对耳朵位置和透明度打关键帧。在第0帧，头部向左转动，左耳向右移动，并逐渐被头部遮盖，所以位置向右移动，透明度为零。右耳则向左移动，并且从头发后面跑到前面来，透明度为100。

在右边第20帧的时候，头部向右转动，左耳从后面跑到前面来，右耳则移动到头部后面，并被头发遮挡，所以，左耳向右移动，透明度为100；右耳向左移动，透明度为零。

我们需要将耳朵复制一份，移动到最前面。来模拟耳朵在没有头部遮挡时的运动。选中透明度的关键帧，右键，切换定格关键帧。

拖动滑块，根据效果，再次调整前后耳朵不同位置透明度的数值，直到得倒正确的效果。

最后我来讲解下嘴巴的绑定。这里我们用joysticks_n_Sliders插件来做绑定，我们切换到钢笔工具，直接在Ae中进行绘制。

对上下牙齿添加设置遮罩，遮罩图层选择嘴巴填充，保证牙齿在嘴巴之内。

准备完成后，打开joysticks_n_Sliders插件，我们来开始绑定，joysticks_n_Sliders插件需要设置连续的五个关键帧来代表控制器的中右左上下五个位置。

调整完成之后点创建控制器，对控制器大小颜色进行简单调整，拖动控制器滑块，嘴巴的绑定就完成了。

总结

到这里整个Ae角色头部绑定就讲完，二维角色绑定头部绑定，相比c4d头部绑定要复杂一些，需要大家有足够的耐心慢慢调整，最总要的是要了解绑定的原理和方法，并运用到自己的角色设计上。好了！本期探讨到这里就结束了，如果文章有帮到你，请帮忙点赞鼓励下喔！这里是设计师爱动效，我们下篇文章见！拜拜！