作為一個眼中有碼的人，看見某個網(wǎng)頁或者app的炫酷效果時，第一反應就是這怎么實現(xiàn)的。這個系列就是把自己見到的一些動畫效果分析實現(xiàn)出來，本文分析實現(xiàn)的某些效果，僅僅作為一個思路分享，僅僅作為學習素材使用。閑話不說，這篇文章是前端動畫系列的第一篇。

源動畫效果

作為一個輕度偽球迷，經(jīng)常會看些賽事比分，比如英超（利物浦是冠軍）。使用UC的朋友應該發(fā)現(xiàn)過，UC在展示比賽時的效果還是很炫的，動畫很簡單，但是效果的確不錯。效果圖如下：

image

實現(xiàn)分析

經(jīng)過觀察不難發(fā)現(xiàn)：

• 動畫效果是左右對稱的，只要實現(xiàn)了一側(cè)即可。
• 球隊的logo只是在x軸進行了移動，但是停的位置以及停頓時機都需要注意
• 球隊logo有一個從大到小的縮放
• logo的透明度逐漸增大

分析出以上四點，就會發(fā)現(xiàn)效果實現(xiàn)起來也不復雜。

代碼實現(xiàn)

動畫使用CSS3的幀動畫實現(xiàn)animation,不熟悉該屬性用法的同學需要補補課了。注意該屬性的兼容性寫法，Safari 和 Chrome需要寫成-webkit-animation

我們只分析左側(cè)曼聯(lián)logo的實現(xiàn)即可。從logo進入到動畫定格，我們將整個過程分成4個部分，可以確定4個關(guān)鍵幀：

@-webkit-keyframes team-logo-left {}

關(guān)鍵幀1：logo放大一倍，x軸偏離初始位置到窗體外部。

0% {
      -webkit-transform: translate3d(-145px, 0, 0) scale(2);
      -webkit-transform-origin: center;
      -webkit-animation-timing-function: ease-out;
      opacity: .05
   }

關(guān)鍵幀2：logo放大一倍，x軸偏離初始位置到窗體中間部分，并稍作停頓，所以使用了50%，60%作停頓，時間函數(shù)使用了cubic-bezier來調(diào)整。

50%, 60% {
            -webkit-transform: translate3d(76px, 0, 0) scale(2);
            -webkit-transform-origin: center;
            -webkit-animation-timing-function: cubic-bezier(.33, .95, .77, 1.01);
            opacity: .8
        }

關(guān)鍵幀3：logo恢復到正常大小，x軸偏離初始位置略左側(cè)，透明度已經(jīng)變成完全不透明。

85% {
            -webkit-transform: translate3d(-10px, 0, 0) scale(1);
            -webkit-animation-timing-function: ease-in;
            -webkit-transform-origin: center;
            opacity: 1
        }

關(guān)鍵幀4：即從偏左位置到達最終的停留位置

100% {
            -webkit-transform: translate3d(0, 0, 0) scale(1);
            -webkit-transform-origin: center;
            opacity: 1
        }

效果展示

image

關(guān)鍵點解讀

計時函數(shù)animation-timing-function

• 屬性可以作用于整個動畫中，定義了動畫的每次循環(huán)是如何隨時間遞進的。
• 該屬性還可以作用于關(guān)鍵幀，如本例的用法，各個關(guān)鍵幀都有單獨的計時函數(shù)。這時的計時其實指的的幀之間的時間函數(shù)，順序播放的動畫，結(jié)尾關(guān)鍵幀的計時函數(shù)不會生效。
• 屬性的值可選，有linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n),以及還有階躍函數(shù)steps(n,start/end),有興趣的同學可以深入了解一下。

動畫的實現(xiàn)其實很簡單，代碼已上傳到github，歡迎提出Issues

image