分割圖像轉換成不同的行

Question

我試圖創建一個動畫效果不能用CSS變換，CSS過濾器或任何形式的隨時間改變的CSS屬性（jQuery的動畫風格）來完成

我在做什麼，需要我以便能夠將圖像的每一行彼此隔離地進行動畫處理。

我已經想到了2種方式來做到這一點

A） 創建圖像的每一行DIV，設置圖片爲背景每個DIV和使用background-position，使每行只顯示背景圖像的正確行。 這種解決方案將使用JavaScript來設置每個DIV到的圖像的寬度的寬度，以創建每個div都動態地在一個循環ECT

B） 使用對於圖像的每一行畫布元素，並使用圖像（ ）和createImageBitmap（）來讀取圖像文件和canvas.drawImage（）以將正確的圖像行繪製到每個畫布中。

我有3個問題

1） 有沒有我還沒有考慮任何其他的選擇嗎？

2） 其中一個醚比另一個明顯快嗎？

3） 我打算利用CSS轉換Scale X/Y在我的動畫期間調整每一行的寬度，並且我希望它能自動拉伸圖像以適應（沒有明顯的切斷或混亂長寬比） 我的兩個選擇是否允許我這樣做？

Answer 1

• 1：是的。 SVG是一個選項，webGL也是。如果動畫是靜態的，那麼視頻可能會訣竅。還有其他選擇，但它們的支持有限或技術過時。

• 2：DOM（包括HTML和CSS）和畫布使用相同的硬件將像素呈現在屏幕上。他們大部分都能以相同的速度完成同樣的事情。一般來說，勝任的程序員可以從畫布中獲得比從DOM更多的效果，儘管這部分與畫布呈現比DOM更簡單的接口有關。使用畫布可以避免使用DOM時無法避免的大量不需要的開銷。

• 3：大多數情況下混合畫布和CSS不是最佳解決方案。正如問題2中提到的答案，使用相同的硬件來渲染像素。由此產生的渲染質量相同。如果您正在使用畫布，您將會使用內置轉換，在其上添加CSS動畫意味着更多的瀏覽器工作，從而使每個像素所需的處理量增加一倍，最好在通過畫布2D API。

從你所描述的解決方案是最容易通過Javascript和畫布完成。我會想象代碼的總數量要少於CSS/HTML/Javascript版本的總數量，並且會更加靈活。但我是許多年的程序員，編寫代碼是我的第二天性。如果你是一個沒有經驗的編碼員，這樣的任務可能會帶來很多問題，並且需要花費大量的時間來實施，而真正的bug是一個令人頭疼的問題。

CSS，HTML和DOM也是如此。

您必須選擇如何實施這些項目，而不是基於什麼是最好的解決方案，而是您最經驗和有信心使用的方法。在兩種同樣好的實現方式中，性能差異較小，但當您首次嘗試一種方法時，差異很大。