css3動畫和js動畫有哪些區(qū)別

這篇文章給大家分享的是有關(guān)css3動畫和js動畫有哪些區(qū)別的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

區(qū)別：1、js動畫的控制能力比css3動畫強；2、js動畫的效果比css3動畫豐富；3、js動畫大多數(shù)情況下沒有兼容性問題，而css3動畫有兼容性問題；4、js動畫的復(fù)雜度高于css3動畫。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&javascript1.8.5版、Dell G3電腦。

JS動畫

優(yōu)點：

• js動畫控制能力強，可以在動畫博凡過程中對動畫進(jìn)行精細(xì)控制，開始、暫停、終止、取消都是可以做到的

• 動畫效果比css3動畫豐富，比如曲線運動，沖擊閃爍，視差滾動效果，只有js動畫才能完成

• js動畫大多數(shù)情況下沒有兼容性問題，而css3動畫有兼容性問題

缺點

• js動畫的復(fù)雜度高于css3

• js在動畫瀏覽器的主線程中執(zhí)行，而主線程還有其他javaScript腳本，樣式計算、布局、繪制任務(wù)等，對其干擾可能出現(xiàn)阻塞從而出現(xiàn)丟幀的情況

• js動畫往往需要頻繁操作DOM的css屬性來實現(xiàn)視覺上的動畫效果，這個時候瀏覽器要不停地執(zhí)行重繪和重排，這對于性能的消耗是很大的，尤其是在分配給瀏覽器的內(nèi)存沒那么寬裕的移動端。

CSS3動畫

優(yōu)點：

1、部分情況下瀏覽器可以對動畫進(jìn)行優(yōu)化，為什么說部分情況下呢，因為是有條件的：

• 在Chromium基礎(chǔ)上的瀏覽器中

• 同時CSS動畫不觸發(fā)layout或paint，在CSS動畫或JS動畫觸發(fā)了paint或layout時，需要main thread進(jìn)行Layer樹的重計算，這時CSS動畫或JS動畫都會阻塞后續(xù)操作。

  在主線程中，維護(hù)了一棵Layer樹（LayerTreeHost），管理了TiledLayer，在compositor thread，維護(hù)了同樣一顆LayerTreeHostImpl，管理了LayerImpl，這兩棵樹的內(nèi)容是拷貝關(guān)系。因此可以彼此不干擾，當(dāng)Javascript在main thread操作LayerTreeHost的同時，compositor thread可以用LayerTreeHostImpl做渲染。當(dāng)Javascript繁忙導(dǎo)致主線程卡住時，合成到屏幕的過程也是流暢的。
  為了實現(xiàn)防假死，鼠標(biāo)鍵盤消息會被首先分發(fā)到compositor thread，然后再到main thread。這樣，當(dāng)main thread繁忙時，compositor thread還是能夠響應(yīng)一部分消息，例如，鼠標(biāo)滾動時，加入main thread繁忙，compositor thread也會處理滾動消息，滾動已經(jīng)被提交的頁面部分（未被提交的部分將被刷白）。

2、部分效果可以強制使用硬件加速 （通過 GPU 來提高動畫性能）

缺點

• 運行進(jìn)程控制較弱，css3動畫只能在某些場景下控制動畫的暫停與繼續(xù)，不能在特定的位置添加添加回調(diào)函數(shù)

• 代碼冗長。想用 CSS 實現(xiàn)稍微復(fù)雜一點動畫,最后CSS代碼都會變得非常笨重。

css動畫比js動畫流暢的前提

• js在執(zhí)行一些復(fù)雜的任務(wù)

• css動畫比較少或者不觸發(fā)pain和layout，即重繪和重排，例如通過改變?nèi)缦聦傩陨傻腸ss動畫

• backface-visibility

• opacity

• perspective （設(shè)置元素視圖）

• perspective-origin

• transfrom

• 部分屬性能夠啟動3D加速和GPU硬件加速，例如使用transform的translateZ進(jìn)行3D變換時

• 在Chromium基礎(chǔ)上的瀏覽器中，這個貌似是內(nèi)核做了優(yōu)化，當(dāng)css動畫知識改變transfrom和opacity時，整個CSS動畫得以在compositor thread完成（而JS動畫則會在main thread執(zhí)行),這樣css動畫渲染不會影響主線程。

感謝各位的閱讀！關(guān)于“css3動畫和js動畫有哪些區(qū)別”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！