大厂h5开源视频系列-网易云音乐年度总结

前言

大厂h5开源视频系列

是一个专题，在这个专题中咱们会解析一些酷酷的线上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 的分享，内容依旧精彩。 最后， 感谢网易云音乐前端团队的创意做品，给予咱们的灵感和一块儿学习的机会！