d = r + sin(t*freq)*amp; // freq - частота, amp - амплитуда.
如果你给这种依赖增加时间，你就会得到动画。
let lerp = (a, b, val) => a + val * (b - a); // линейная интерполяция
let rand = n => (Math.sin(n)*43758.5453123)%1; // псевдо случайное число
https://joshondesign.com/2013/03/01/improvedEasingEquations
function easeOutElastic(t) {
var p = 0.5;
return Math.pow(2,-10*t) * Math.sin((t-p/4)*(2*Math.PI)/p) + 1;
}
// одномерный шум
let noise = p => {
let fl = Math.floor(p);
return lerp(rand(fl), rand(fl + 1.0), p%1);
}
requestAnimationFrame(draw);
function draw(t) {
requestAnimationFrame(draw);
t = Math.max(0, t - 200); // небольшая задержка на старте
let pts = "0,0";
// для каждого угла в первой четверти окружности с шагом 0.01 радиан считаем точку
for (var a = 0; a <= Math.PI/2; a += 0.01) {
a %= Math.PI*2; // нормализуем угол
// анимация увеличения радиуса кляксы на старте до значения 90
let grow = Math.min(1, t/1000);
grow = easeOutElastic(grow)
let r = grow*70 // добавляем к базовому радиусу синус и косинус от времени и угла.
+ Math.cos(a*11 - t/379) * 2*grow
+ Math.sin(a*17 + noise(t/1e4)*15) * 3*grow;
pts += "," + Math.cos(a)*r + "," + Math.sin(a)*r;
}
shape.setAttribute('points', pts);
}
布局中最类似于极坐标中的正弦曲线。
让我们从一个圆开始，在极坐标系中（d-距离，t-角度），它的公式极其简单：
如何理解：想象你拿起指南针画了一个圆。看起来就是这样。从圆心到圆的每个点的距离是恒定的，等于半径。拐角处的半径值不变。
如果在指南针的旋转过程中，根据角度改变其半径并以正弦曲线的形式进行这种羡慕，您将获得类似于布局中的形状
如果你给这种依赖增加时间，你就会得到动画。
加入了伪随机元素，更好玩
这样的动画是通过改变“d”路径属性来实现的。
接下来，我们编写曲线动画命令：
<animate attributeName="d" values="path1 ; path2 ; path1" />