网易出品「你的人格主导色」，是如何从零开始做动效设计的？

前段时刻咱们有被《你的品格主导色》这个 H5 刷屏了吧

你的品格主导色-录屏

还没玩的朋友能够在云音乐 APP 查找关键词「色彩测验」

或许 用云音乐 APP 扫这个二维码（不要用微信，被屏蔽了）

https://st.music.163.com/st-color-quiz (二维码自动识别)

今天我来和咱们聊聊这个项目中动效规划是怎样落地的。这个 H5 从结构上来说很简略，8 个页面 8 道挑选题，每个页面有一段声响，用户挑选自己认为这个声响是什么，然后系统依据挑选成果分析用户的品格「成分」并呈现在成果页。这儿的动效也首要是每个页面内的动效和转场动效等几个部分。

页面内的动效，大部分是用一个带音频的视频作为布景动效，少部分用代码完成。这样的优点是如果布景动效需求修正，只需求调整视频内容，输出并替换资源就好，兼容性也是相对较好。

可是选项按钮部分，因为不同用户点击的不一样，就仍是需求结合代码来做作用了。这儿首要用到的是 CSS 动画。

咱们先来看看翻页作用：

这个作用咱们是模仿的幕布从一边被拉出并遮盖整个页面的作用，原料仍是有点弹性的那种，这个形状是在 canvas 中制造的，制造方法其实和咱们平时在作图软件里的原理一样，是由几段闭合的贝塞尔曲线或直线组成的形状：

//制造从点 p1(x,y) 到点 p2(x,y) 的一段贝塞尔曲线
ctx.bezierCurveTo(
p1(起始极点)的控制点 2 的 x 坐标，
p1 的控制点 2 的 y 坐标，
p2(下一个极点)的控制点 1 的 x 坐标，
p2 的控制点 1 的 y 坐标，
p2 的 x 坐标，
p2 的 y 坐标);

形状的运动实际上就是构成它的极点的运动，这块「布」是由这些点构成的：

在用户没有操作的时分，所有的点，包括 P2 的控制点，都贴着屏幕右边沿，这样构成的图形是一条看不见的线（P1、P5 重合，P3、P4 重合，且这四个点的控制点都是他们本身）。当用户点击操作之后，点 P2 先向屏幕左边移动，它的两个控制点也以相同速度移动，这时看到的就如上图般被扯出一块布的作用；P2 移动一段距离后，P1 和 P3 也开端移动，做出被「拉扯」出来的感觉，最终都移动到屏幕左边沿，然后 P2 再在水平位移上做几次回弹作用：

转场 demo：https://codepen.io/bigxixi/pen/yLMvmEL
​
其实一开端咱们规划了能够用手拖拽翻页的作用，但因为一些音视频播映的兼容性问题，无奈简化成了点击触发~

拖拽翻页演示

咱们再来看看页面里的动效。

这一页布景视频里的雨首要是用 AE 自带的 CC Rainfall 作用器制造：

三个选项按钮就是三张图片，点击之后「被选中」状况的图片透明度渐现覆盖掉黑字。透明度动画我经过界说 fadeIn 和 fadeOut 两个简略的动画 class，在点击的时分增加到对应的 dom 上就好了。

.fadeOut{
animation: fadeKey 0.3s ease 0s 1 reverse both;
}

.fadeIn{
animation: fadeKey 0.3s ease 0s 1 normal both;
}

@keyframes fadeKey {
from{opacity: 0;}
to{opacity: 1;}
}

概况拜见：

下雨-选项 demo：https://codepen.io/bigxixi/pen/zYZVpWe

这一页，火焰布景同样是视频

首要经过 AE 里的「分型杂色」+「置换图」作用器模仿火焰动画。

而几个选项的动效则用 CSS+图片资源来完成。其中火焰拖尾是画好的一张图，我把图的锚点定在图片靠上的方位：

transform-origin: 50% 22.5%;

选项向上飞入画面的进程中做了个 Y 方向从 50%到 100%的缩放。当然还有透明度的变化。

@keyframes optionTileInAniP2Key {
0%{
opacity: 0;
transform: scaleY(0.5);
}
20%{
opacity: 1;
}
100%{
opacity: 0;
transform: scaleY(1);
}
}

三个选项用了三张 png 图片来呈现，尽管看起来是「黑字」+「赤色影子」的组合，实际上图片资源用的是「红字」，在 CSS 里直接用 filter:saturate(0) 把它的饱和度降为 0，这样就呈现黑色了，而选项背面的赤色影子，其实是用的图仍是前面的同一张图，这时就不必上色了直接用原本的色彩，一起同样经过 filter 增加含糊和投影作用，也顺便下降一点透明度。

.optionShadow {
filter: opacity(0.5) blur(0.5vw) drop-shadow(0px 0px 1px rgb(255, 155, 93));
}

这样就能够做到「字、影分离」——他们的浮动是有个微小的错位的——的一起只用到一张图片资源，而原图用红字的原因是把图中黑色部分填充为赤色作用不好（至少我没试出很好的方法），但赤色变成黑色却很便利。

概况能够参看 demo：https://codepen.io/bigxixi/pen/qBryRJM

咱们再看看这一页

布景视频是个简略的三维物体旋转动画，用金属原料+环境光泽的反射烘托。

选项动画也很简略，每个选项咱们拆分为选项（A、B、C)和内容描绘，把他们的锚点定位到他们相接的线条上:

选项：

transform-origin: 100% 50%;

文字:

transform-origin: 0% 50%;

然后对文字增加一个 skewY 和 scaleX 的动画，它就看起来像是进行了一个 3d 旋转，被「按」进屏幕了。

色彩变深的作用，其实是同一层做同一个动画的纯色 div 在点击后叠加了一个透明度动画。

.optionChoosenAni{
animation: optionChoosenAniKey 0.5s cubic-bezier(.38,1.5,.5,1.01) 0s 1 normal both;
}
@keyframes optionChoosenAniKey {
0%{
transform: skewY(0) scaleX(1);
}
100%{
transform: skewY(-15deg) scaleX(0.5);
}
}

概况能够参看 demo：https://codepen.io/bigxixi/pen/oNZrqYq​

鲸鱼这个页面

布景视频部分咱们首要运用了 AE 自带的 分型杂色 + 毛边 作用器，经过调整亮度、对比度，模仿科考船用声呐扫描海底的图画作用。

选项部分的布景是别离用了三张 apng 动图，而文字则是 CSS 精灵图。

在用户未做出挑选时，精灵图静止于第一帧；用户点击对应选项后，精灵图动画开端播映，文字「散开」

.choosenAni_A{
animation: whaleOptionASprAniKey 1s steps(1) 0s 1 normal both;
}

@keyframes whaleOptionASprAniKey {
0% { background-position: 0 0; }
3.45% { background-position: -387px 0px; }
6.90% { background-position: -774px 0px; }
……
96.55% { background-position: -3096px -200px; }
100.00% { background-position: -3483px -200px; }
}

一起调整色相 filter:hue-rotate() 为布景动图「上色」

.chooosenBG_A{
transition: all 0.2s linear;
filter:hue-rotate(120deg);
}

具体能够看下 demo：https://codepen.io/bigxixi/pen/ZEedxJL

这个页面的布景视频里

布帘被风吹起动画运用了简略的 C4D 的动力学来完成

三个选项随风摆动的作用则是简略粗暴的用了三个 apng 动图

选项飘动的歪曲是用 AE 的「置换图」制造。

不过他们的飘入、飘出，以及选中的上色都仍是 CSS 做的。这个「上色」动画也是用了之前火焰那个页面的小技巧，三个原图都是被选中后的橙色，默许未选状况使饱和度 filter:saturate(0) 和亮度 brightness(0) 设为零将他们变成黑色，选中后再回复成 1，这样就「变成」橙色了

.selectedAni_p6{
animation: selecetedKey_p6 0.2s linear 0s 1 normal both;
}
@keyframes selecetedKey_p6 {
0%{
filter: saturate(0) brightness(0);
}
100%{
filter: saturate(1) brightness(1);
}
}

概况能够参看风吹-选项 demo：https://codepen.io/bigxixi/pen/OJpevEL

最终的这个页面

咱们能够看到布景视频里有许多泡泡，首先在 C4D 里做一个简略的肥皂泡

然后给她加一个 displacer 变形器，用 noise 驱动制造变形动画模仿肥皂泡在空气中的揉捏变形作用，并导出为一段循环的序列帧（留意烘托时刻和 noise 中的循环时刻对上）

然后在 AE 里导入这个序列帧， 仿制多个，改动尺度巨细等让他们看起来各自稍微不同。这儿我各自对他们的位移加入了随机表达式 wiggle

//循环 wiggle 表达式
loopTime = 10; //循环周期
freq = 0.5;//频率
amp = 25;//振幅
t = time % loopTime;
wiggle1 = wiggle(freq, amp, 1, 0.5, t);
wiggle2 = wiggle(freq, amp, 1, 0.5, t - loopTime);
linear(t, 0, loopTime, wiggle1, wiggle2)

而泡泡的缩放则是先将音频的振幅转换为关键帧，再用表达式与缩放相关起来起来，并各自错开一点时刻

vol = thisComp.layer("音频振幅").effect("两个通道")("滑块").valueAtTime(time-0.05*index)+90;
[vol, vol*0.8]

这样泡泡们就看起来像是比较自然地被音频驱动而震动了。

而两个选项，是先把选项文字图片导入 AE 用 湍流置换 作用器模仿 C4D 中做泡泡时的歪曲动画，留意循环得勾上，后边就直接放上泡泡的序列帧，导出为 apng 动图。

点击之后的泡泡碎裂，则是如之前的鲸鱼那页，直接切到一个精灵图动画播映，因为模仿的泡泡破碎的作用，是一个瞬间的工作，所以这儿就直接切过去了。

泡泡破碎动画首要是用了 AE 里的 「CC Mr.Mercury」这个作用器来制造。

概况参看泡泡-选项 demo：https://codepen.io/bigxixi/pen/eYvwMwy

除了 CSS，有些动效仍是需求 JS + Canvas 这个全能组合，除了一开端介绍的翻页作用外，有些页面里也在运用。这是表现力最丰富，相对来说门槛也比较高的一个方向，幸好有许多前辈高人做了许多 JS 库并开源给咱们运用。比方键盘声这一页

这页首要用了 Matter.js 进行物体下落作用的物理模仿，能够看看 Matter.js 官网直接就有类似比如，咱们只需求依葫芦画瓢替换成对应的视觉资源，控制物体下落的时机等参数就好。

Matter.js Demo · code by @liabru：https://brm.io/matter-js/demo/#sprites

这个页面的选项是藏在布景里的，点击之后实际上是换了张图片资源表明「按下」。

概况能够参看（演示版，选项只要 A 能够点）键盘-demo：https://codepen.io/bigxixi/pen/dyvBeoL

云彩这一页首要是前端同学在完成作用，具体细节讲解我就不越俎代庖了，有机会能够把话筒递给前端小哥哥哈

最终说下成果页，成果页会依据咱们的挑选，生成不同的关键词、案牍及布景色动画

这儿的布景色动画运用的是 GLSL Shader 动画，基本原理是依据用户的挑选成果，生成一张突变贴图（视觉同学制造了许多突变图，覆盖了每个关键词），贴图再经过 fragment shader 中的 noise 经过不同参数歪曲得到动画，这部分参看了 MartinRGB 大神的事例，具体原理能够参看他在 Droidcon 2019 上海站的共享：​https://github.com/MartinRGB/Droidcon_Shanghai_Keynote/releases/tag/0.4

这儿因为不同关键词也会对应不同的音乐，开始咱们也是希望布景突变动画能和音频有相关，实际上我也写了一些 demo：http://bethe.top/163/color-quitz-simplified/end.html

但因为一些兼容性问题，研制没有足够的时刻来处理，而没有和音频相关的作用也能够承受（成果页最重要的仍是关键词和对应的案牍），最终没有用上。

好了，这个项目的动效部分大概就和咱们共享这些，咱们如果对最终的成果是怎么生成的感兴趣，能够看下这篇文章：https://zhuanlan.zhihu.com/p/376712328

关于动效落地专题：

作为一个的动效规划师，咱们除了规划动态作用，怎么协助研制将动效在产品中落地完成也是非常重要的一个工作内容，否则再好的规划最终只能沦为自嗨的空中楼阁，岂不惋惜。

有的规划师或许想，这不应该是研制的责备吗？其实关于规划师，多了解一些动效完成原理也是有优点的。

一方面在规划动效方案时能够对完成难度有个预估，面对无法完成的或许性要有「优雅降级」的能力，否则不断返工折磨的也是自己；另一方面能够从更多维度作为规划起点，有的作用规划师想破脑袋想不出来怎么表达，研制那儿或许就一行代码的事儿…

这是个不断妥协，也在不断突破自我的进程，在这个进程中咱们或许更迷茫，但一拨开云雾，对规划对动效的认知也更明晰。

这个专题我也将共享这几年的项目里的一些落地经历，首要是 H5 项目，或许涉及到一些 web 前端的代码知识，因为我不是专业的程序员，有写的不对的地方，恳请咱们不吝指正，谢谢！