本篇针对Unity_UI动效制作的问题整理，层级设置相关为重点，附一个场景示例。

汇总遇到的问题有：

①   如何在Icon前层、后层加特效效果

②   UI动效制作时，如何调整UI元素之间的层级

③   UI资源大小不一，都要放到二次幂的特效贴图中使用么？

正文开始:

制作流程如下可参照：

在场景大纲窗口（Hierarchy）右键创建，UI→Image

会生成Canvas下面挂着Image的基本UI组件，在Inspector扩展属性面板上找到Source Image，往上贴UI纹理资源。将资源对应摆好到基础的位置

如果资源贴不上，需要修改资源导入设置，选中图片纹理类型改为Sprite（2D and UI）

这里解释下问题③，UI资源需要设置上图格式，以便贴到UI Image Source资源内

如果是错误的贴图方式，在生硬的制作这个需求效果时，为了迁就粒子公告板或正常显示UI资源的原始比例时会很头痛。

当然也可以给出多余的空白像素，将UI资源放到二次幂的特效贴图中、以及轴心点调整，不使用UI组件，临时方案让你继续制作效果。但在项目中，这些有动效的UI资源会被合并到UI图集中，便于资源管理与优化。

我们直接使用UI资源的单图进行效果制作，当UI图集合成后，我们可以快速替换完成提交。

贴上了你的UI资源后，点击Set Native Size可以快速让尺寸适配到UI资源的像素大小。

跳过导入这些UI资源和对齐的过程，有个技巧，你可以拽入一张完整的效果图，去比着摆。

解释下问题②

同样的UI资源，靠下的层级在上，反之亦然。UI资源的层级不需要做过多干预，一般前端会完成拼界面的工作， 小策划也能干。

 摆好对齐基本的UI元素后，需要面对特效与UI层级的关系，

这里我们直接使用粒子系统制作特效部分的效果。需要解决粒子与UI的前后层级。

可能出现的情况有：*背景层UI界面;*后层特效；*中层UI面板Icon；*前层特效；

层级显示会先处理Sorting Layer，再比较Order in Layer，以及粒子中Sorting Fudge数值。

粒子特效我们有地方设置，那么UI呢？这里需要回到默认创建的Canvas节点，在Inspector扩展属性面板上找到Canvas RenderMode，把默认的Overlay改成ScreenSpace-Camera

得到新的参数设置，暴露出Sorting Layer及Order in Layer，这里不牵扯过于复杂，暂定Sorting Layer不变。

Order in Layer中，数值越大的越靠前，默认是0。

设置当前的CanvasOrder in Layer数值为1，当做前层UI，复制一个改成-1，当做背景层UI

这时，你创建的特效就在两层中间了（默认Order值为0）

同理，你需要的最高层特效Order值设置为2。满足基本需求的4层层级关系就搞定了。

附赠案例工程给大家理解，U3d工程版本5.6.6，

网盘地址：链接：https://pan.baidu.com/s/1Yvk3DZwdS86SQ8_xAgTDEg   提取码：sok8 

技巧拓展：

·轴心点的调整。效果示例对比，合适的轴心点调整会更好的增加冲击力。下图随便用资源举的例子。

·动效日常较多的就是弹动（Transform旋转位移缩放属性动画、透明度再加点粒子特效）

随便K了个盒子、弹动错帧。

项目中有用iTween等组件的动画库完成动作制作，不熟悉或者怎样，你自己用U3D的动画系统制作也是OK的，只是在程序接口调用上可能没那么方便，具体要跟程序大爷去碰，赶上大牛没准会提供个更好的工具给你。

最后整理：

·本篇层级通过调整Order in Layer进行设置，从哪个数字开始都可以（越大越靠前）

·材质（全局）也可以去修改材质的RenderQueue调整先后顺序（值越大越靠前）

·项目中的资源更复杂，预设的Layer设置会对应相机的渲染遮罩（Culling Mask）,根据不同项目需求进行设置（例如UI动效设置为UI层），以便UI层的相机进行单独渲染。

整理了下发出来，希望能帮到更多有需要的朋友。分享快乐。