cpu 如果 調用 重復 啟用 lan 暫停 prope 平行四邊形

前端寫動畫，無非兩種方案，一種是通過css，另一種是js css的方案： 1.transform的單獨使用 （IE9+）

rotate(90deg) 2d旋轉，也可以理解為沿著3D的Z軸旋轉

rotateX(90deg) 沿著3D的X軸旋轉,同理還有rotateY rotateZ

translate(100px, 50px) 沿著X方向 Y方向移動100px, 50px

scale(2) 縮放 定義 2D 縮放轉換。

skew 斜切 沿著 X 和 Y 軸的 2D 傾斜轉換 （平行四邊形、梯形的實現）

更詳細的transform屬性請點擊 http://www.w3school.com.cn/cssref/pr_transform.asp

2.transition的單獨使用 （IE10及以上) 元素指定的屬性變化時，該屬性經過一段時間逐漸的過渡到最終需要的值 特點:需要事件(hover,focus,js)觸發，不能重復，不能定義中間狀態

• transition-property css屬性名稱(所有屬性 ‘all‘)
• transition-duration 過渡時間
• transition-timing-function 速度曲線
• transition-delay 延遲時間

四個屬性可以簡寫，如 transition: width 1s ease 0.2s 3.animation單獨使用 （IE10及以上)

• animation-name key-frame名稱
• animation-duration 過渡時間
• animation-timing-function 速度曲線
• animation-delay 延遲
• animation-iteration-count 播放次數 無限‘infinite‘
• animation-direction 是否應該輪流反向播放

六個屬性可以簡寫 transition和animation的差異: 1.transition動畫的執行過程就是聲明關鍵幀的過程，而animation動畫的事先聲明關鍵幀(@keyframes)，然後再調用關鍵幀 2.transition動畫的執行需要有事件(hover、點擊事件)來驅動，而animation動畫的執行不一定需要驅動 3.transition 不能無限循環，不能指定播放次數，只能定義頭尾幀。 animation與transform的混合應用demo： .App-logo { position: absolute; top: 10px; left: 10px; animation: App-logo-spin infinite 2s linear; height: 80px; } @keyframes App-logo-spin { 50% { transform: translate(100px, 100px) // 使用translate代替absolute // top: 100px; // left: 100px; } } js的方案 1.setTimeOut/setInterval （不推薦） 2.requestAnimationFrame（兼容性ie10以上） 關於requestAnimationFrame window.requestAnimationFrame()接收一個函數作為回調，返回一個id window.cancelAnimationFrame()傳入id取消動畫 為什麽推薦使用requestAnimationFrame而不是setTimeOut/setInterval？ 1.requestAnimationFrame 會把每一幀的所有DOM操作集中起來，在一次重繪或回流中完成。且重繪或回流的時間間隔緊跟隨瀏覽器的刷新頻率 3.在隱藏或不可見的元素中，requestAnimationFrame將不會重繪和回流，節省的CPU、GPU、內存使用 4.requestAnimationFrame是瀏覽器專為動畫提供的API，瀏覽器會自動優化方法的調用，若頁面不是激活狀態，動畫自動暫停，節省CPU 最後的總結 1. 盡可能的使用CSS 關鍵幀動畫或者CSS transition。瀏覽器可以優化大量繪制和組合的時間。 2. 如果一定使用基於JS的動畫，盡量使用requestAnimationFrame。盡量不要使用setTimeout， setInterval。 3. 盡量不要在每一幀上改變inline元素，瀏覽器可以在多方面優化css中聲明式動畫。 4. 使用2D transforms來代替position:absolution將會顯著的提高FPS（每秒傳輸幀數),因為2D transform有更少的繪制時間和更流暢的動畫。 通過改變元素top/left進行動畫，在每一幀內，cpu都需要計算該元素的其他樣式，特別是相對需要復雜計算的盒陰影，漸變，圓角等樣式，最後都需要將這些樣式應用到該元素內。從這個角度看，如果對於較為老舊的移動設備進行相對復雜的動畫，那麽效果肯定不理想。 而通過調用translate，會啟動硬件加速，即在GPU層對該元素進行渲染。這樣，CPU就會相對解放出來進行其他的計算，GPU對樣式的計算相對較快，且保證較大的幀率。我們可以通過2d和3d的transform來啟用GPU計算。 5. chrome(版本69.0)可以通過Timeline Frams模式來觀測什麽讓你變慢 6.chrome(版本69.0)可以通過animations來對動畫進行微調 6.文章排版還有待加強

web動畫小結