如若把安卓比作成皇宫，那么产品必然就是皇帝。权利至高无上，一切都得向它服务。视觉设计自然比作贵妃，负责打扮的貌美如花；交互则是文臣；开发必是武将。自古文死谏,武死战，所以两人天生就是敌对，整天斗得乌眼鸡似的。相对来说讨论国事最无话语权的就是太监了，UI动态就是那个太监，而我刚好就是那个太监！（捂脸痛哭三分钟）。

我们这帮孙子都得变着法伺候产品这个皇帝。伺候的好，用户增加，流量变现。皇帝各种奖赏发下来，大家都乐呵呵。伺候不好，文臣武将都会被骂得狗血淋头，低着头瑟瑟发抖。当然UI动态设计这个太监也将受到牵连，端个茶手都会颤抖。 整个安卓宫延，UI动效也不好混，他得伺候所有人，必须十八般武艺样样精通（本文后面有说修练秘技），做到面面俱到，会处理各种疑难杂症，反正就是见人说人语见鬼说鬼语哈哈哈哈哈哈哈哈！

UI动效有时处境相当不好过，看看历史已发生的惨案！ 在2018年，本宫接到皇帝秘召，要搞一个叫指纹解锁的东东，对付华强北的一帮土财主，皇帝强调只有一个要求就：炫酷。我一时被皇权恐吓到智商降低到了接近0的极限值，以致于忘记了平生所学，脑子中只有一个概念就是要炫酷，于是开始闭关，花废了两天，终于搞出了一个惊天地泣鬼神花里花哨的玩艺，效果呵呵！我水平有限怪我咯…

土财主却很满意，立马下令按此开发 。当武将接到此政令时，深深的吸了一口气，缓缓地吐了出来，再平平的念了一句“嗯 ！看起来很是炫酷”，但最终还是按奈不住自己内心的一团火，突然间爆跳如雷：“我草泥妈！这啥玩艺？我搞不出来！~~”

我瞬间短路，动效落地的东东全忘了干净，竟然直接用AE特效from来设计，没有考虑矢量动画，没有考虑方案的落地。

好吧，这个坑得想办法来填呀！只能用最低级的方式 “帧动画”，于是刷刷的输出了很多图片，丢给了开发，打完收工！！我乐呵呵的！开发也乐呵呵 ！

很快出了本版，一看不行，图片数量太多，图片因为降了质量在屏上看起来毛毛糙糙的，低端点手机也跑不动 ，图片数量不够就会不流畅呀，还有分辨率适配也是一个坑。减图，调试压缩搞了一个星期，最终还是被否掉，这是一个很悲伤的故事。更加悲伤的是故事还没有完…

帧动画否定后，大家打算拼死一博，配合武将打算用OpenGL硬写，可动画复杂，开发他也找不到数学函数变化，问我要规律，我突然才感觉到数学几何不够用，研究了很久点的组合，最终开发他也写不了点的紊乱变化，只能完成个基本的如下：

最终的结果就是太简单了，耗时2个月，一切都是白费工，我仰头长天大笑三声，哈哈哈，差点就饮恨而终，惨案再次教育了我，动效设计不光是特效，不管什么情况下必须考虑地落性。我对天起誓，永远都不能忘记这次惨痛。浪费别人及自己时间等于谋财害命...

毋庸置疑，UI动效要在皇宫混得好，得会揣摩上意懂得产品思维；知道自身的作用，去帮助产品体验。UI动效可以帮助视觉及交互层面达不到的设计目的，可以帮助交待元素的来龙去脉，让层级关系更加清淅。还可以使用动态酝含着情感去诱导用户行为。当年和绅就把伺候亁隆伺候的很到位。知道亁隆喜欢美女就给他美女，知道亁隆好大喜功，就能变着花样来满足亁隆无底洞的需求，亁隆的私欲他都能满足，和绅虽是一个大贪官也却是一位运筹帷幄的能臣，在古代这叫权术，在设计界我称之为设计“阴谋”，当然 “阴谋”是贬义词，但我觉得用阴谋更能体现设计巧妙之处，在设计时植入了产品的欲望，引导或“骗取”用户按照我们所设的套路进行，当然我们自然是出于善意的，自然可以美其名曰的称“以用户为中心的设计“，哈哈哈哈!

动效这个太监必要时还得拍视觉贵妃的马屁，这叫设计沟通；为了能达成一致的目的，会减少很多没有必要的麻烦。平时还得翻翻孙子兵法，学些开发的知识，更加与武将交流，才能把智商拉到同一水平线上，进行有效沟通。

为上帮忙更多的小学僧能达到高级太监，本宫总结一下太监修练日常，当然小朋友不要模仿自宫，本宫概不负责。

一级秘技（基础级）——After Effects

身为太监，本宫多年修练，早期修得FLASH为先，2010年才修得一级秘技的必杀技After Effects 简称AE,这是动效设计师必备的基础技能，在宫延中也只能给皇帝挠挠痒，要想止痒还得再配合着C4D绝技。才能做出像样点的特效动画，但这两种技能只限于视频展示，在UI动效界还不同于影视特效，它加多了可落地性及用户体验这两大因素，因此并不是做出来好看就行，所以在UI这个范畴内，这技能只能是基础级 。

二级秘技修练（提升级） ——C4D

二级的必杀技就是C4D，做为一名UI动态设计师必须会些C4D，不求精通，但常用的动态图形，粒子系统，动力学，得会。要不拍不上产品这个皇帝的马屁，全让贵妃这艳妖给抢了风头。虽然说此技能在UI动效落地上还没有好的插件可以转化，可是还是得会些，要不B格也不够高，学会了走路都带风。

可以用它做些炫酷的动态视效，结合着一些点线组合算法的模拟还是不错的。下面是本宫用粒子系统配合力场做的基础级效果：

有了一、二级的基础技能修练，也算是一名小太监了，已经可以服伺一下东宫日常打扮，对外渲讲。但要满足产品皇帝的重托还不够，在UI动效界虽已经具备了条件，但如果没有开发相关的经验来支撑是不够的，只能做一个视频演示给武将开发看看，武将看了视频还是不能行军打仗，就会叫你提供相关的参数给他，估计你也会一脸萌逼，不知道提供什么给他！也不知道怎么与他交流，这就有必要进行三级秘技修练了。

三级秘技——落地开发知识

有二层需要修练

第一层：如果武将用类似于ScaleAnimation安桌封装工具，或 Canvas开发整个动效的话，你需要把曲线、元素动作，运动的规律，时间节点等数值给到开发，自然你需要懂些安卓的曲线插值器，安卓原生有自己常用的插值器，此外另我们自己可以定义的贝塞尔曲线插值器，可以AE曲线插件FLOW的用法，里面预置了很多不错的曲线类型。

也可以到网上一个贝赛尔曲线工具：cubic-bezier.com,非常好用

第二层： 需要修练Lottie 动画库，可以用插件bodymovin来输出josn文件给开发，开发通过第三方的库把 josn这个矢量动画加载进来，这个方式能100%的还原设计方案，也是目前比较流行的动画开发技术， 并且它是矢量动画，文件特别小可以无限放大很好的解决了分辨率适配问题！

当然它对动画视觉元素设计时要比较讲究，一般情况下最好使用SKetch来进行元素的设计，当然如果你纯在AE中用矢量图来画就另当别论了，在SKetch画完元素后，需要借用SKetch插件AEUX直接导入AE，在导入前，要先对SKetch中的图层整理，要把用了层图遮罩的进行路径合并，要不在导到AE中样式会出错。在AE中动画设计完成时，如果在图层中有渐变的话需要把当前图层中所有的样式名字修改成英文，输出josn时才不会有错误，要不输出josn彩色的渐变就变成了黑白的颜色了。

josn虽是矢量动画但是它是可以把位图打包进josn中的，这个非常优秀，打包方式在输出josn时，把Enable compression 及Include in json 两项给勾选上就可以。

 除了josn文件，还有SVGA动画，它也是一种比较流行的动画，有GIF有些像，但文件非常小，主要制作软件可以用AE，也可以用adobe 公司的FLASH，但一样必须借助插件SVGAConverter_AE进行输出SVGA，合适用于APP中标签动画。也是目前APP中用得比较多的一种开发无成本的技术。

四级秘技——安卓原生可视化动画编辑器

安卓原生可视化动画编辑器Shape Shifter 这玩艺非常好用，主要是用于开发ICON动画，可以让动画代码化，动效设计师可以直接可视化编辑代码，我们编辑好了小动画直接可以生成有节点XML代码文件给开发，XML节点代码：

它与 安卓Canvas开发动画的绘制图像一致，通过Path点的坐标绘制曲线图形， 软件编辑画面：

用于通知栏的图标动画：

修练它需要了解些代码绘制画图的原理: 在Android中，我们将使用相对较新的VectorDrawable类来创建每个图标。VectorDrawables在概念上与网络上的SVG相似：它们使我们能够通过将每个图标表示为一系列称为paths 的线和形状来创建可扩展的，VectorDrawables 的优点之一是它们提供密度独立性，这意味着它们可以在任何设备上任意缩放而不会降低质量。这最终既方便又高效：开发人员不再需要为每个屏幕密度导出不同大小的PNG的繁琐过程，从而又可以减小APK的大小。更重要的是VectorDrawable对容器中的各个元素进行动画处理的能力非常强大。我们可以将path设置动画。非常合适在安卓上通知栏或导航栏上的小图标进行矢量动画设计输出XML（动态的SVG）给到开发。

五级秘技修练——小游戏特效

现如今互联网行业红利，各种英雄都是变着法来抢流量，小游戏自然越来越火热，不管是小程序中的小游戏还是独立小游戏，基本上都会用到一些引擎来开发，那么用AE做出来的动效自然很难跟这些引擎结合了，除了硬用帧动画，这用到大量图片造成APK太大，无法满中上线要求，如果只是做了演示让开发看看，那开发须重新开发，且并不一定有能力能自己开发，所以游戏特效将产生特定的软件与游戏引擎相互配合才能设计。

现在市面了的小游戏基本上是几大引擎来开发：

1、CocosCreator,这也是上半年来我公司开发用的最多的一个引擎，它里面本身就有动画设计能力，只是时间轨与动画分层不是那么灵活但基本的动画可以满足，复杂的动画则需要实用DragonBonesPro或spine来实现，CocosCreator,本身也有粒子系统，但是调节参数比较难用，我们会选用PTADIT DONGIN,来进行粒子特效编辑，再输出SPL格式，导入到CocosCreator进行最终的调整。

 2、第二引擎Egret Engine，这是白鹭的引擎，它的工作原理有点些FLASH，有FLASH基础的人合适用它，但Egret Engine有个不好的就是他们只能用白鹭 自己的粒子系统Egret Feather,这个非常单一，不是很好用。所以我一听我们的有些开发用了这个引擎给我下了需求，我就很头痛。

3、第三个引擎（3D引擎three.js)

three.js是JavaScript编写webGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，设计师可以http://www.myjscode.com/threejs/editor/index.html网页可视化编辑器，创建场景和贴图调试，是网页3D游戏。看欣赏一下库：https://threejs.org/当然如果你有能力及时间可以深圳修练一下Unity 3D

六级秘技修练——几何函数数学算法

       虽说现在流行的安卓Lottie 动画库，可以减轻了开发的算法，但是并不是所有的动画都合适用json文件，必竟Lottie是第三方库，加载都会占用内存，有些底层的动画不合适用，比如充电锁屏动画，指纹解锁动画。所以方案的设计初始还是得从点线面等元素的运动规律去构思，这样出来的设计方案才能容易用算法开发还原，这里就涉及到了几何函数、数学算法问题了，所以想达到六级的高级太监并不是只靠吹牛逼拍马屁就行，真的需要苦下功夫。关于此秘技的修练可以自己学些程序的原理计算画图，如果我们不会JS，我们可以用语言来写出效果，比如FLASH的ActionScript 3 ，在外国早期用它来写规律性动效，非常炫酷，开发可用性非常高，本宫因用flash出身，所以也学得了此秘技，虽算不上精通还能用，除了几何画图公式，一些规律性的点的组合，将会用到些等差数组等等，这块如何想学深，也是需要付出时间代价的，下面是18年失败案例后重新思考的方案，主要用点的算法来完成，先让36个点布到一个圆轨上，再用等差数半径组进行复制圆数理，角度错位而成，再通过控制圆的半径大小产生动态变化，不管方案如何，但至少开发能道实现

七级秘技修练——用户体验

      UI动效与影视特效的区别在于落地以及用户体验，用户体验这块修行没有任何直径可走，只能在UI这个行业浸泡三五个年头，慢慢把握了对产品的感受才能达到对体验的理解，当然这种体验感它包含了几种因素，比如曲线，这里的曲线指动画的快慢节奏，急加速，缓减速等节奏都会让用户产生不同的情绪，能满足用户主观情绪上愉悦的感受，动画曲线也是UI动效的重中之重，它会包含在用户操作的触感，细节的把握非常重要，通常我们都是用贝赛尔曲线来控制，贝赛尔曲线它主要是通过两个座标点来控制线的平及陡，反映了速度的快及慢，一般情况下都可以满足设

计师的需求，但有些极限的需求可能会用到三阶及四阶曲线。

      能影响用户体验的因素还有动画时间，动画时间的长短也能影响用户的情绪波动，根据实验研究UI动效的转场最合适的时间是300毫秒到450毫秒，时间的长短也要控制好欲望，不要一味只追求动画的细节表现而用过长时间的动画，原则是只要能达用此动画的作用即可，不要造成过度动画，动画本就在性能上都是有损耗的，不要因为动画而动画，如果没有意义的动画愿意不要动画。

在动效设计上，当然一般情况下只要遵循Google的Material Design中的动画规范几大原则，就能达到基础的用户体验，我规纳一下这大原则就是高效性、流畅性、物理性、趣味性、功能性。这也是这几年网上很多动效设计都抄过来的动画设计文章，但都人云亦云，个人领悟的干货很少，原因资深的动效设计师就知道，在设计过程中元素的编导至关重要，元素动态的编排不发会影响整个动态的美感，比如动态轨迹重叠一般都会有不好的美感。这种感觉会决定一个动效设计师做出来的动态是否具有美感，当然这其中也包括了动态设计师对动态图形的美感控制，这就决定了一个动态设计师的高度了。

八级秘技修练——全局设计理念思维

     站在理念顶端观望设计，统筹设计，所有的设计都能给出一个合理的理由，能统筹出一套系统的、具有说服力的规律。这就是设计更高层面的能力，这种能力除了必需要在设计界混个五六年以上经历外，还必须兼备设计师自身的修养，对文化的理解，对人文的解读，天文地理历史物理甚至各种奇门理论的知晓及爱好，或源于设计师对跨界知识整合的敏锐臭觉。也许可以理解成一种对生活的情怀，能够很好的影射在设计理念中，让所有用户都具有认同感。

    示意一下本宫，做过的动画引力场概念，由力的大小，方向是不同而产生不同的形态，运用到不同的设计意图上，这个逼装得有点贪婪了，哈哈！

本文粗俗，不合适文雅之人阅读，如有不适之感，后果自负。

（另部分配图源于网络，感谢原作者）

Powered by Froala Editor