本文深入研究了使用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中文网其他相关文章！
