媒介
大厂h5开源视频系列
是一个专题，在这个专题中我们会剖析一些酷酷的线上h5,在每个细节，每个细致的过渡背地都能看到前端工程师支付的心血，本篇带来的是 👉👉 网易云音乐年度总结
看视屏进修
迎接关注以往的文章：
线上链接请戳 👉👉
网易云音乐年度总结
他并没有多震动多酷炫， 那些花狸狐哨的都没有，能描述的只要两个词：专心 细致。网易云真的很专心，只要在 app 内部搜刮【年度总结】你照旧能看到本身的年度总结，在看到那首深夜还在听的歌，听过最多的歌词等霎时，你是不是回想起谁人你爱过的女孩，是不是能激起内心的荡漾。
分屏剖析
1. 第二屏 概览
剖析：
- 右上角的笔墨淡入
- 左下角一个人在音符上摆腿
- 线条直接用了 svg （svg不相识的同砚能够参考 活动的SVG线条 ）
笔墨淡入
这个应当比较简单，我们上篇文章也解说过：
只须要
-
opacity: 0过渡到opacity: 1; -
transform: translateY(6px);过渡到transform: translateY(0px); - 越到上面的笔墨越早涌现，给每一行笔墨设置差别的
transition-delay: 0.2s; transition-delay: 0.3s; transition-delay: 0.4s;
人在音符上摆腿
这里比较省心：
- 规划：
能够看到除了音符外，这个人分为 头 身材 大腿 小腿 另有可爱的 jiojio
每个部位都是定位定好的，能够看出原作者真的消耗许多心血。
<div class="id7_yinfu11">
<div class="id6_tou">
<div class="P1hair"></div>
</div>
<div class="id13_shenti"></div>
<div class="id11_2xiaotui">
<div class="id12_2jiojiopng"></div>
</div>
<div class="id8_1datui">
<div class="id9_1xiaotui">
<div class="id10_1jiojiopng"></div>
</div>
</div>
<div class="id15_yinfu12"></div>
</div>音符摆动,摆布摇摆即可。
animation: yinfu11 5s cubic-bezier(.445,.05,.55,.95) infinite;
@keyframes yinfu {
0% {
transform: rotate(-2deg);
}
51.67% {
transform: rotate(2deg);
}
100% {
transform: rotate(-2deg);
}
}小腿往前踢,rotate 负数即可。
@keyframes xiaotui {
0% {
transform: rotate(0deg);
}
51.67% {
transform: rotate(-32deg);
}
100% {
transform: rotate(0deg);
}
}2. 第三屏 在网易云听到最多的歌词
【永久】 两个词的进场实在太秀了，但实在完成还比较简单。
剖析一下就是：
- 笔墨有扭转
- 而且逐渐放大
- 有背景隐约
摆布扭转就不过量引见，
逐渐放大和背景隐约，背景隐约这里用到了 filter：blur()，全部动画以下：
@keyframes blurAppear {
0% {
filter: blur(10px);
transform: scale(.8);
opacity: 0;
}
100% {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
}3. 第四屏 迥殊的一天
剖析一下最靓的一个部份当然是：
- 秋千摆动
- 人在清闲的踢腿
全部秋千以下。
摆布摆动，设置 rotate 即可，须要注重的是：
@keyframes ani4_qiuqian {
0% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(31.99359208deg);
}
100% {
transform: rotateZ(0deg);
}
}须要注重的是 这里角度较小，为了摆动的幅度大一点，能够设置transform-origin: -16.10878661% -29.76878613%;
秋千完成以后，秋千上只要人的枝干，须要把腿，头，脖子等逐一安放好。
以后就是摆腿，摇头的动画，我们上文已说起，这里不过量引见。
4. 第五屏 睡得最晚的一天
剖析：
- 一只猫
- 一个人
这里作者做了剖析，把不须要动的作为躯干固定好，比方人的躯干，猫的躯干。
以后把须要动的，比方猫尾巴，猫爪， 人手… 作为别的一个部份装上去。
5. 年度最喜欢歌手
这一屏，我们剖析一下右上角的卷纸动画。
能够看到这实际上是一个雪碧图，
@keyframes juanAnimation {
0% {
background-position: 0 0
}
3.70% {
background-position: -483px 0
}
7.41% {
background-position: -966px 0
}
11.11% {
background-position: -1449px 0
}
... 略过个中的几帧
100.00% {
background-position: -1449px -954px
}
}定好的动画，我们高低卷纸的时刻只须要让个中的一个动画反向播放即可。
animation: juanAnimation .5s steps(1) reverse,
juanAnimation 1s steps(1) 1s forwards;总结
在这个案列中个中许多动画并不难，但却是异常消耗工作量的，许多部位的拆分定位，而且越是细致的动画须要的代码量也就越多。
源码
你可在 github上猎取源码
你能够随着 开源视屏 一步步完成。
预报
下篇我们照旧带来 h5 的分享，内容照旧出色。
末了， 谢谢网易云音乐前端团队的创意作品，赋予我们的灵感和一同进修的时机！
