css3 animation動畫技巧

weixin_34126215發表於2015-05-14
CSSS3動畫

一,css3 animation動畫前言

　　隨著現在瀏覽器對css3的相容性越來越好，使用css3動畫來製作動畫的例子也越來越廣泛，也隨著而來帶來了許多的問題值得我們能思考。css3動畫如何讓物體運動更順暢，css3動畫如何做弧線動畫，css3動畫是否有動畫庫，css3幀動畫如何快速簡單……   為了解決這些折磨人的問題，我們今天來分析一下:

　　首先介紹css3 Animation動畫庫：

　　http://daneden.github.io/animate.css/

　　基本涵蓋了我們常見的基礎css3動畫，有時做css3動畫沒有靈感或者需要快速製作時，我們可以套用裡面的css3幀動畫，簡單粗暴。

　　http://leaverou.github.io/animatable/ 這個是github玩家寫的一個常用的hover animation動畫

 

　　css3 Animation線上調節工具：

　　http://melonh.com/animationGenerator/              基於chrome的外掛，可以快速調節頁面上的動畫

　　http://isux.tencent.com/css3/tools.html               騰訊isux一款非常強大的動畫工具

　   http://tid.tenpay.com/labs/css3_keyframes_calculator.html           財付通的幀動畫調節工具

 

　　自定義transition-timing-function中的cubic-bezier引數:

　　http://cubic-bezier.com/

　　http://matthewlein.com/ceaser/

 

二,css3 animation動畫技巧

　　1.animation-direction讓動畫變得更圓滑：

　　　　animation-direction 屬性定義是否應該輪流反向播放動畫。

　　　　如果 animation-direction 值是 "alternate"，則動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等等）向後播放。

　　　　語法：

　　　　animation-direction: normal|alternate;
值描述測試
normal 預設值。動畫應該正常播放。 測試
alternate 動畫應該輪流反向播放。 測試

　　　　animation-direction 值是 "alternate"屬性實現雙向迴圈的效果，可以很好的優化，我們本身用animation幀寫的雙向迴圈，原因在於瀏覽器自動實現的雙向迴圈，比人為手工要好的多。

　　2.animation-fill-mode動畫結束和開始時設定保持的動畫：

　　　　animation-fill-mode 屬性規定動畫在播放之前或之後，其動畫效果是否可見，主要用來實現，我們動畫結束和開始時我們想保留的狀態。

　　　語法

　　　　animation-fill-mode : none | forwards | backwards | both;
值描述
none 不改變預設行為。
forwards 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
both 向前和向後填充模式都被應用。

　　3.0%用from代表，100%用to，設定cubic-bezier出現的問題：

　　　　這裡面，給大家區分一個誤區，通常我們寫動畫是這樣的:

@keyframes rotate{
    0%{transform:rotate(60deg)}
    100%{transform:rotate(60deg)}
}
@keyframes rotate{
    from{transform:rotate(50deg)}
    to{transform:rotate(100deg)}
}
看看這兩者的區別

　　可能對很多人來說，認為這種中0%可以用from，100%可以用to，兩者是等價的，其實我然，當我們設定cubic-bezier，就會發現問題，有些手機的元素顯示不出來。

@keyframes rotate{
      0%,100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }
    0%{transform:rotate(60deg)}
    100%{transform:rotate(60deg)}
}
@keyframes rotate{
      0%,100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }
    form{transform:rotate(50deg)}
    to{transform:rotate(100deg)}
}

　　這兩者真的是不能全等， 已經踩過很多坑了。

 

　　4.動畫原則：

　　　　這裡有點要注意的是，我們做動畫的元素，請儘量使用絕對定位，從而避免重繪重排的問題。

　　　　這裡推薦幾個做動畫的原則：

　　　　動畫十四原則: http://www.sunnyzhen.com/course/animation_principles/demo.html

　　　　動畫十二原則：http://www.w3cplus.com/css3/animation-principles-for-the-web.html?utm_source=tuicool

　　5.圖片雪碧圖導致動畫問題：

　　　　如果單張雪碧圖面積實在太大，可以拆分雪碧圖，例如拆分成2-4張，因為現代瀏覽器都支援4-6個同源請求下載，若資源實在太多，也可以考慮把靜態資源放在不同源域名下去請求，這裡犧牲多幾個請求換來圖片同時載入比一張圖片慢慢載入要好，當然，這需要具體情況去衡量。

　　　　還有一點就是我們做動畫是總想把圖片都集中在一直圖片，結果導致圖片高度過高，超過3000px，就會導致在部分手機圖片失真或者是看不到等現象。

　　　　現在，也越來越多的夥伴用rem來處理移動端，實現縮放的問題，建議做雪碧圖時要增加空隙，最好的空隙是除以4還是整數。

　　6.base64位使用時注意事項：

　　　　使用base64:URL的優缺點
　　　　　　base64:URL傳輸圖片檔案的好處在於：
　　　　　　　　減少了HTTP請求
　　　　　　　　某些檔案可以避免跨域的問題
　　　　　　　　沒有圖片更新要重新上傳，還要清理快取的問題
　　　　　 不足在於：
　　　　　　　　瀏覽器支援使用base64編碼圖片作為背景圖片的這種技術IE6/IE7瀏覽器是不支援的（IE9瀏覽器IE7模式下支援。對於目前PC頁面，相容性問題使沒有檔案上傳以及無需更新快取的優點不存在了。
　　　　　　　　增加了CSS檔案的尺寸base64編碼圖片本質上是將圖片的二進位制大小以一些字母的形式展示，例如一個1024位元組的圖片，base64編碼後至少1024個字元，這個大小會被完全嵌入到CSS檔案中（不過幸運的是也可以被gzip了，而圖片檔案被gzip效果不明顯）。
　　　　　　　　編碼成本圖片完成後還需要base64編碼，目前估計手工完成的多，因此，增加了一定的工作量，雖然不多。

　　　　　　圖片這裡還有一點要注意，移動端，我們經常做圖片載入器，然後樣式裡面我們也有圖片還有時間戳，這裡我們一定要保持時間戳一直，不然會嚴重導致載入時間變長，因為不同的時間戳，會導致再次去請求確認浪費時間。

　　　　　　優缺點權衡下的實際應用價值

　　　　　　　權衡上面所展示的優缺點，貌似base64:URL圖片沒有什麼用武之地啊，實際上非也，有一種情況時有base64編碼作為background-image背景圖片利要遠大於弊的。何種情況呢？
　　　　　　　在web頁面製作的時候，由於某些現實原因，我們可以會用到下面這一類圖片：
　　　　　　　　　　這類圖片不能與其他圖片以CSS Sprite的形式存在，只能獨行
　　　　　　　　　　這類圖片從誕生之日起，基本上很少被更新
　　　　　　　　　　這類圖片的實際尺寸很小
　　　　　　　　　　這類圖片在網站中大規模使用

　　　　　還有一點比較重要，就是就是不用這樣合併寫帶有base64點陣圖片background:url(base64:sdfsdfsd )  center center /20px 20px  no-repeat;，這樣會導致安卓機無法顯示，這種情況可能很多時候在壓縮的時候出現。

 

　　　　　這裡再說一個移動端border-radius的bug，通常我們畫圓用border-radius：50%； 但我發現在低版本手機裡面的qq瀏覽器不支援，只支援具體的數值px

 

　　推薦騰訊isux的兩篇文章:

　　http://isux.tencent.com/play-with-html5-animate.html

　　http://isux.tencent.com/play-with-html5-optimize.html

 　 CSS3的calc()使用   http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

 

 

 

相關文章