每週一個前端動畫之四：掘金頭像旋轉動畫

秋染蒹葭發表於2019-03-01
前端動畫

3月，東亞季風帶來了來自太平洋的潮溼空氣，趁著小雨的週末，送上每週一個動畫系列的第四篇。閒話不說，開始我們的正文。本文分析實現的某些效果，僅僅作為一個思路分享，僅僅作為學習素材使用。

作為重度掘金使用者，偶然發現了這個動畫，動畫實現起來很簡單，整理如下，好奇問一句，你發現這個動畫了沒。

源動畫效果

在掘金個人主頁頁面，滑鼠移動到頭像上，頭像有一個旋轉動畫，且旋轉有一個明顯的加速過程。

每週一個前端動畫之四：掘金頭像旋轉動畫

實現分析

經過分析，效果的實現有三點

  • 圓形頭像怎麼實現
  • 旋轉效果的實現，怎麼確定旋轉的角度
  • 旋轉的速率有明顯的變化，需要確定時間函式

程式碼實現

設定圓形頭像可以通過設定圓角來實現

.avatar {
    border-radius: 50%
}
複製程式碼

旋轉動畫的實現可以通過直接使用css動畫實現，注意這裡在旋轉角度上直接選擇了圈數turn，IE9.0+,Firefox13.0+以及其他瀏覽器都支援了該屬性（下圖），放心使用。

每週一個前端動畫之四：掘金頭像旋轉動畫

至於旋轉時的速度變化，可以直接通過我們前幾篇文章就多次提到的時間函式來控制。

.avatar:hover {
    transform: rotate(666turn);
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34, 0, .84, 1)
}
複製程式碼

效果展示

每週一個前端動畫之四：掘金頭像旋轉動畫

關鍵點解讀

本文的動畫實現起來並不複雜，個人感覺兩個點值得記錄一下。一個是圓形頭像，可以通過設定圓角實現；另一個是設定旋轉的時候可以直接通過turn來設定旋轉的圈數；至於時間函式我想應該不用再提及了。

程式碼已上傳到github，歡迎提出Issues。

最後的慣例，貼上我的部落格，歡迎關注

相關文章