大廠h5開源視訊系列-網易雲音樂年度總結

旅夢開發團發表於2019-04-13
原文網址 : https://juejin.im/post/5ca5a36bf265da30a857ca05
H5

前言

大廠h5開源視訊系列

是一個專題，在這個專題中我們會解析一些酷酷的線上h5,在每一個細節，每一個細膩的過渡背後都能看到前端工程師付出的心血，本篇帶來的是 ?? 網易雲音樂年度總結

看視屏學習

歡迎關注以往的文章：

線上連結請戳 ?? 網易雲音樂年度總結

他並沒有多震撼多酷炫， 那些花裡胡哨的都沒有，能形容的只有兩個詞：用心 細膩。網易雲真的很用心，只要在 app 內部搜尋【年度總結】你依然能看到自己的年度總結，在看到那首深夜還在聽的歌，聽過最多的歌詞等瞬間，你是否回想起那個你愛過的女孩，是否能激起心裡的漣漪。

分屏解析

1. 第二屏 概覽

大廠h5開源視訊系列-網易雲音樂年度總結
分解：

  • 右上角的文字淡入
  • 左下角一個人在音符上擺腿
  • 線條直接用了 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

大廠h5開源視訊系列-網易雲音樂年度總結
大廠h5開源視訊系列-網易雲音樂年度總結
每一個部位都是定位定好的，可以看出原作者真的耗費很多心血。

<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. 第三屏 在網易雲聽到最多的歌詞

大廠h5開源視訊系列-網易雲音樂年度總結

【永遠】 兩個詞的出場實在太秀了，但其實實現還比較簡單。 分解一下就是：

  • 文字有旋轉
  • 並且漸漸放大
  • 有背景模糊

左右旋轉就不過多介紹， 漸漸放大和背景模糊，背景模糊這裡用到了 filter：blur()，整個動畫如下：

@keyframes blurAppear {
      0% {
        filter: blur(10px);
        transform: scale(.8);
        opacity: 0;
      }

      100% {
        filter: blur(0);
        transform: scale(1);
        opacity: 1;
      }
}
複製程式碼

3. 第四屏 特別的一天

大廠h5開源視訊系列-網易雲音樂年度總結
分析一下最靚的一個部分當然是：

  • 鞦韆擺動
  • 人在悠閒的踢腿

整個鞦韆如下。

大廠h5開源視訊系列-網易雲音樂年度總結
左右擺動，設定 rotate 即可，需要注意的是：

@keyframes ani4_qiuqian {
  0% {
    transform: rotateZ(0deg);
}
50% {
    transform: rotateZ(31.99359208deg);
}
100% {
    transform: rotateZ(0deg);
}
}
複製程式碼

需要注意的是 這裡角度較小，為了擺動的幅度大一點，可以設定 transform-origin: -16.10878661% -29.76878613%;

鞦韆完成之後，鞦韆上只有人的枝幹，需要把腿，頭，脖子等一一安放好。

大廠h5開源視訊系列-網易雲音樂年度總結
大廠h5開源視訊系列-網易雲音樂年度總結
大廠h5開源視訊系列-網易雲音樂年度總結
之後就是擺腿，搖頭的動畫，我們上文已經提及，這裡不過多介紹。

4. 第五屏 睡得最晚的一天

大廠h5開源視訊系列-網易雲音樂年度總結
分析：

  • 一隻貓
  • 一個人

這裡作者做了分解，把不需要動的作為軀幹固定好，比如人的軀幹，貓的軀幹。

大廠h5開源視訊系列-網易雲音樂年度總結
大廠h5開源視訊系列-網易雲音樂年度總結
之後把需要動的，比如貓尾巴，貓爪， 人手... 作為另外一個部分裝上去。

5. 年度最喜歡歌手

大廠h5開源視訊系列-網易雲音樂年度總結
這一屏，我們分解一下右上角的捲紙動畫。
大廠h5開源視訊系列-網易雲音樂年度總結
可以看到這其實是一個雪碧圖，

@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 的分享，內容依舊精彩。 最後， 感謝網易雲音樂前端團隊的創意作品，給予我們的靈感和一起學習的機會！

相關文章