7

Имеется вот такой объект на сайте:

Объект

Данная "клякса" имеет криволинейную границу по правой и нижней стороне.

Картинка статична, но я приведу ссылку с тем, как это уже реализовано на одном из популярных сервисов.

Хотелось бы узнать, как реализовать данный эффект? Интересует только анимация этих "скруглений".

В каком направлении можно найти хотя бы приближённую информацию? На данном сайте используется canvas для отрисовки объекта, но я знаю точно, что такое можно провернуть и на SVG.

1
  • могу оказать как сделать подобное как на svg так и на canvas, если угодно - webgl 29 авг 2019 в 15:59

2 ответа 2

14

То что в макете больше всего напоминает синусоиду в полярных координатах.

Начнем с окружности, в полярной системе координат (d - расстояние, t - угол) ее формула крайне проста:

 d = r; // d - расстояние до точки равно радиусу оркужности.

Как это понимать: представьте что вы взяли в руки циркуль и чертите окружность. Вроде все. Расстояние до каждой точки окружности от центра неизменно и равно радиусу. Значение радиуса от угла неизменно.

Если во время поворота циркуля менять его радиус в зависимости от угла и сделать эту завистмость в виде синусоиды - получится форма подобная той, что в макете

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);
}
body { margin:0;overflow:hidden; }
<svg viewbox=0,0,100,100 height=100vh>
  <polygon id=shape></polygon>
</svg>

Добавил элемент псевдо случайности, так веселее

4
  • 2
    Ваш ответ как всегда хорош, но я выбираю тот что будет попроще, ещё раз спасибо за ваши ответы на SO.
    – MoloF
    29 авг 2019 в 17:52
  • 3
    @MoloF видимо кому что проще =), мне проще когда за меня компьютер считает, но есть и сторонники все руками сделать =) 29 авг 2019 в 17:55
  • @MoloF Коль уж Вам понравился мой ответ, я потрудился, написал объяснения, если что-то осталось не понятно - скажите я постараюсь дополнить :) 30 авг 2019 в 6:53
  • даже ваш первый вариант был понятен, ваш ответ выбран в связи с большей кастомизацией. Оба ответа на самом деле хороши, но уже не знаю что и выбрать, js больше симпатизирует, на нем пожалуй и остановлюсь.
    – MoloF
    30 авг 2019 в 9:07
9

Подобная анимация реализуется с помощью изменения атрибута "d" path.

  • Сначала нужно получить форму кривой в начальном положении:

введите сюда описание изображения

  • Затем с помощью перемещения узловых точек кривой в векторном редакторе получаем финальную форму кривой :

введите сюда описание изображения

Далее пишем команду анимации кривой:

<animate attributeName="d" values="path1 ; path2 ; path1" />

svg {
width:40%;
height:40%;
}
path {
fill:#2F3136;
stroke:black;
stroke-width:4;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="770" height="770" viewBox="0 0 770 770" preserveAspectRatio="xMinYMin meet" >

<path d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate attributeName="d"
  dur="8s"
  values="
         M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
		 M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
		 M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
		 repeatcount="indefinite"
		 />
		 
</path>

</svg>

  • Вариант с фоновой картинкой и тенью

.container {
width:75%;
height:75%;

}

path {
fill:#2F3136;
stroke:black;
stroke-width:0;
fill-opacity:0.5;
-webkit-filter: drop-shadow(4px 4px 1px black);
    filter: drop-shadow(4px 4px 1px black);
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 770 770" preserveAspectRatio="none" >
<image  xlink:href="https://i.stack.imgur.com/ABxSm.jpg" x="10" width="1125px" height="750px" >
 
</image>
<path   d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate id="an_d" attributeName="d"
  dur="8s"
  begin="0s"
  values="
         M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
		 M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
		 M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
		 repeatCount="indefinite"
		 />
		
</path>

</svg>
</div>

  • Анимация границы плюс анимация размера всего блока

.container {
width:75%;
height:75%;

}

path {
fill:#2F3136;
stroke:black;
stroke-width:0;
fill-opacity:0.5;

}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 770 770" preserveAspectRatio="none" >
<defs>
<filter id='shadow'>
    <feGaussianBlur in='SourceAlpha' stdDeviation='2' />
    <feOffset dx='3' dy='3' result='blur' />
    <feMerge>
      <feMergeNode in='blur' />
      <feMergeNode in='SourceGraphic' />
    </feMerge>
  </filter>
  </defs>
<image  xlink:href="https://i.stack.imgur.com/ABxSm.jpg" x="10" width="1125px" height="750px" >
 
</image>
<path filter="url(#shadow)"  d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate id="an_d" attributeName="d"
  dur="8s"
  begin="0s;an_t.end"
  values="
         M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
		 M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
		 M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
		 repeatcount="1"
		 />
		<animateTransform id="an_t" attributeName="transform" type="scale" dur="12s" begin="an_d.end" values="1;0.5;0.5;1" /> 
</path>

</svg>
</div>

13
  • чет не работает(
    – ThisMan
    29 авг 2019 в 16:35
  • @ThisMan у меня работает в FF, Chrome. в IE, Edge не будет работать, так как им слабо поддерживать SMIL. 29 авг 2019 в 16:38
  • 1
    Chrom стандарт работает: Version 76.0.3809.100 (Official Build) (64-bit)
    – Coder
    29 авг 2019 в 17:27
  • 1
    @MoloF, InkScape
    – Arthur
    29 авг 2019 в 18:06
  • 2
    @Arthur Привет Артур, давно тебя не видел, с ностальгией вспоминаю прошлый год, когда у нас всё было очень весело, была теплая компания.. 29 авг 2019 в 18:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.