鍍金池/ 問答/HTML/ canvas和css實現(xiàn)同一個動畫哪一個性能好

canvas和css實現(xiàn)同一個動畫哪一個性能好

在微信小程序上要實現(xiàn)一個平移的的動畫,一般情況是用css的translate來平移,但是剛好在接觸canvas,于是想到
現(xiàn)在有三個方案:

  • 用css的translate來平移
  • 用小程序API的wx.createAnimation來平移
  • 用canvas逐楨繪制

哪個性能好呢

有個疑問:css也是通過重新渲染來平移的嗎,他們的原理是不是都發(fā)生了重新渲染呢?

感謝

回答
編輯回答
解夏

小程序API

2017年5月5日 00:32
編輯回答
陌南塵

這個是一個偽命題。

你舉的例子并不確切,換句話說你并不是因為要做一個平移的的動畫而考慮應(yīng)該用css還是canvas。

css3動畫很豐富,并且瀏覽器支持度相對已經(jīng)很好了。再加上css3可以使用gpu加速,性能上已經(jīng)很好了(如果使用得當(dāng)?shù)脑?,我已?jīng)不知道看過多少使用不當(dāng)而認(rèn)為css動畫性能差的例子)
當(dāng)然canvas也有很多錯誤使用,導(dǎo)致性能變差,詳細(xì)可以查看這篇文章: https://www.html5rocks.com/zh...

而canvas個人認(rèn)為更適合像素級別的繪制。這是css無法做到的。
canvas有專門的畫布,其并不急于dom,因此性能上和css3會有一點不同,有時候canvas動畫會更平滑。
有人做過測試, canvas和css3動畫其實在不同場景各有優(yōu)略。

可以參考stackoverlow上的回答: https://stackoverflow.com/que...

希望我的回答對你有幫助。 我的個人主頁是https://azl397985856.github.io/ , 掘金主頁?https://juejin.im/user/58af98...??

2018年8月1日 04:09