本文深入研究了使用CSS Paint API創建迷人的BLOB動畫。儘管傳統上使用SVG取得了成就，但Paint API提供了一種功能強大的基於CSS的替代方案，儘管目前僅限於Chrome和Edge。
這是系列的第二部分：
讓我們建立一個斑點。了解<canvas></canvas>方法首先闡明了這一過程：
斑點本質上是一個扭曲的圓圈。我們在一個圓圈周圍定義了“ n”點。使用三角學，我們計算每個點的坐標（圖中的綠點）。 CuticBézier曲線連接這些點，需要起點，控制點和終點（紅色點）。紅點是綠色點之間的中點。
通過調整控制點（綠色點），我們會塑造斑點。將每個點隨機抵消到中心都會產生斑點效應。
然後，這種形狀成為使用CSS塗料API的圖像的掩碼。正方形元素（寬度等於高度）是理想的，半徑是寬度/高度的一半。 CSS變量（n）控制點計數。
動畫斑點涉及順利移動點位置。一個簡單的動畫通過更改一個點的位置從一個圓圈轉變為斑點。使用帶有過渡的CSS變量（ --b ）。在懸停， --b更改，移動點並創建動畫。將其擴展到多個點（例如，偶數）會產生更複雜的動畫。
引入隨機性：隨機偏移而不是固定點移動，而是創建動態動畫。變量（ T ）充當均勻和隨機配置之間的布爾切換。具有可控種子的自定義random()函數可確保一致的隨機序列。
控制點運動：我們可以獨立操縱X和Y坐標，以獲取各種動畫。例如，將一個坐標設置為零會產生單軸運動（水平或垂直）。方向運動（左右）需要根據其角度進行分組，並在其偏移中施加不同的符號。調整圓的大小可防止點超過掩模區域。負邊緣的包裝器可確保懸停區域與可見斑點相匹配。
組合動畫：鍵框和Cubic-Bezier（）功能增強動畫。正弦曲線會產生搖擺作用。變換增加了滑動效果。
循環運動：指向其初始位置，創建連續動畫。最大軌道半徑可防止重疊。
螺旋運動：結合圓形和中心的動作會產生螺旋動畫。兩個動畫變量（ B和Bo ）分別控制軌道和點運動。
概括：
代碼結構很簡單：CSS變量控制參數，JavaScript函數（ Fx ， Fy ， A ）定義動畫邏輯。 CSS應用面具並為B變量進行動畫。
這是通過CSS Paint API探索Blob動畫的結論。嘗試CSS變量以創建無數變化。
以上是探索CSS油漆API：BLOB動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
