本次给大家分享一个教程：使用Joysticks’n Sliders插件做一个3D-UI界面。

效果如下：

动效

插件介绍

本次3D-UI小动画主要用到的插件是：AE scripts Joystick‘n Sliders脚本：是一个二维动画绑定的插件，是通过创建控制杆或滑块来实现复杂的图形动画脚本。在图层上可以即时创建动画，只需在开始和结束位置设置关键帧，即可生成过渡动画，还可使用滑块来控制动画的任意位置，对于许多卡通角色制作，MG动画制作，等其他特殊动画制作，此脚本都可以提供高效的制作方案。

Joysticks’n Sliders插件的安装：

插件安装

  1. 复制Joysticks_n_Sliders.jsxbin文件到AE脚本目录：
  2. Mac：应用程序\Adobe After Effects CC\Scripts\ScriptUI Panels\
  3. 打开AE软件设置，勾选上*允许脚本读写和访问网络

附上 Joysticks’n Sliders的下载地址：https://www.lookae.com/joysticks-171/

插件使用方法

以下是插件中各个功能按钮的具体释义；

插件的Joysticks部分功能看似很多，但大部分情况只需要创建控制器按钮就足够了；

插件翻译

3D-UI动画教程

第一步：完成UI素材

先在sketch里完成我们的UI设计稿；

新建一个800*600px的画布为背景层，然后设置大背景色值为：#EBF0F3；UI矩形大小为：374x450px，border-radius：50px；阴影参数分别如下：

阴影1：#D1D9E6 x and y：18px 模糊：30px

阴影2：#FFFFFF x and y：-18px 模糊：30px

接下来就完成文字层、卡片层、按钮层的相关UI，最终效果如下；

教程效果图-静态

接下来做好命名和分组，分别导出背景层、文字层、卡片层、按钮层；或者我们直接将sketch文件通过插件导入到AE中；

再回忆一下将sketch文件导入到AE中的步骤：

  • 首先在Sketch中将所有需要运动的图层打组，然后在组命名前加上“#”，意味着该组属于一个图层不可编辑；
  • 然后选中所有需要导出的组，在插件中找到“Sketch2AE”，然后执行生成导出切片命令，此时可以看到每个组下方都会出现一个名为“Slice To AE”的新图层；
  • 然后再找到插件中的“Sketch2AE”，执行“导出画板命令”，然后在弹出的面板里设置合成时长和帧速率，并选择需要导出的画板，点击确定，同时给文件命名，然后选择导出的存放路径导出文件，此时在对应的路径下会自动生成一个.jsx的脚本文件和slice文件夹。
  • 打开AE后，在菜单栏选择文件-脚本-运行脚本文件，选择刚才导出的.jsx文件，这就算导入成功了。

第二步：动效合成设置导入素材

在AE中，我们需要新建合成，参数如下：

合成名称：3D-UI；宽高：800x600px；帧速率：30帧/秒；持续时间：3秒；

新建合成

接下来就是导入我们的设计素材，按照设计稿效果调整素材的位置；并新建一个纯色图层；

步骤二：导入素材

第三步：调整属性，开启摄像机

选中四个图层，ctrl+D复制一层，此操作是需要副本，作为位置尺寸的参考；

选中复制出来的四个图层，并打开3D开关，按快捷键P，打开位置属性，分别对文字、卡片、按钮位置属性中的Z轴设置：-50、-30、-30的参数。因为近大远小的原因，元素的位置、缩放参数都会发生改变，这时候我们再选中之前复制出来的四个图层，按快捷键shift+S，调出素材的缩放属性，根据原有位置调整素材大小，然后删掉复制前的素材文件。

第三步：调整属性

第四步：绑定插件

绑定插件之前，我们先需要新建一个摄像机图层，然后按快捷键：P，打开摄像机的位置属性，我们需要在第0帧打上关键帧参数不变；然后在第1帧打上关键帧：参数x=0，y=300；然后在第2帧打上关键帧：参数x=300，y=800；然后在第3帧打上关键帧：参数x=400，y=700；然后在第4帧打上关键帧：参数x=400，y=-100；

需要注意的是：是第1帧（01f）、第2帧（02f）…而不是1s、2s

第四步-新建摄像机

打好关键帧以后，我们选中摄像机图层，找到插件中的生成按钮，然后命名：3D-UI，点击按钮之后会自动生成一个控制器和控制区域，我们可以在效果控件中，将控制区域放大；然后拖动控制器，界面就产生了立体互动的效果；

调整控制器