占卜卡牌UI+动效制作

这次想要记录的是一个占卜动效的UI+动效实现过程，才疏学浅，还请各位大神多多指教。

（gif加载有点慢）

首先是接到需求的时候考虑页面设计，因为我们这个产品的用户群体大多数都是学生，学生对运势占卜这一类的东西还是比较感兴趣，就像最近网络上比较流行的陶白白，很多人还是很信这方面的东西。（这个星座运势的需求是我提出来的，很荣幸被产品采纳做了）

然后我的第一想法就是做成一个占卜屋，带有一些神秘色彩，本身也是以人物互动来做的app，这里就可以做成app主角提拉米苏变身成占卜师的做法来做。我们公司有很多插画师，分工还算比较明确，有插画需求需要配合的就需要和插画师沟通，所以找了一些想要感觉的参考给到插画师，微调了一下得到了最后的成品稿。

同时把卡牌结果的UI和样式按照这个风格自己画了出来，这里就略过了。

这里要说明一下设计前有效合理的沟通很重要！！避免无谓的返稿。

主要说说动效，在动效的实现上我们一般给到开发的动效形式师Lottie（频率最多）、gif（偶尔）、SVGA（偶尔）这三种形式，Lottie和SVGA大小都差不多，个人用习惯了Lottie。反正二者的限制都还蛮多，一般也就做一下缩放、位移、旋转、蒙版等这种基础属性的动画。像效果、表达式这种Lottie是不支持的，所以在做这种火焰啊，粒子的时候没办法支持的情况下就只有做成帧动画，好在效果整体时间也不长，倒也能凑合看看。

Lottie支持效果传送门：https://zhuanlan.zhihu.com/p/27015913

然后就要开始动手啦，做之前先想一下自己想要怎么样实现效果，能做的地方有哪些。我一般会在ps上先画画大概的步骤。拆解一下这个动画的效果：

第一：默认效果的；

默认效果做的比较简单，我看了一下页面中可以做的就是蜡烛，提拉米苏这个主体人物，蜡烛可以做成闪烁的感觉，这里我做了3帧火焰（有需要效果更好的小伙伴可以考虑多帧效果会更好）。人物是画的火焰，一共4帧，利用透明度变化叠加出来的效果。蜡烛这里我是单独给到开发，只做一个循环就好了，但在预览的时候我们可以给一个循环表达式。（**把要循环的东西建立一个合成，然后对合成右键启用时间重映射，给时间重k表达式time%n，n就是循环的时间，比如这个蜡烛整个循环是0.5s，就是time%0.5，精确到小数点即可）

第二：点击效果的；

水晶球是重点，这里我是在网上找的闪电笔刷素材(后面火焰笔刷也是），因为我印象中那种魔法球里面好像都是蹭蹭的闪电看起来比较帅，这里画了4，5帧闪电配合一些零散的光效。

然后需要考虑一下如何从水晶球到卡牌的转场？卡牌有12星座，如果每个卡牌都做一个效果那12种卡牌就得做12种，从开发资源上来说这种形式的消耗太大没有必要，所以我拆解成了做一个固定的卡牌动效，在卡牌背面宽度从100%➡️0%的效果后，紧接着由开发代码实现用户本身星座卡牌的0%➡️100%的无缝衔接。这样就解决了资源过大的问题。

这里的描边实现是运用的alpha蒙版，首先在需要做这种效果的线条上运用钢笔工具画一根线，盖住你的被描边的元素，接着为钢笔线条添加修建路径，同时可以在描边设置上调整两头的锥度，可以设置成两头尖的，然后在alpha蒙版到图层上（注意图层顺序），将描边改为所需要颜色即可。

好了我说完了，啰嗦了一大堆，都是一些基础知识的运用，远远不及大佬们的效果，继续努力～