Как сделать движение блока по параболе?

Question

[Dmitry Buravtsov]

С помощью jQuery animate делаю анимацию движения объекта, но нужно чтобы объект двигался по параболе, возможно ли это как-то сделать, задав лишь начальные и конечные координаты, а чтобы остальное генерировалось автоматически?

В примере условный код, отражающий суть вопроса:

<div class="block" style="left: 50px; top: 0"/></div>

$('.block').animate({
  left: 0,
  top: 100
}, 1000);

Comments

[kulaeff]

Например, https://stackoverflow.com/questions/21368210/how-t...

[Vitaliy]

по двум точкам можно получить бесконечное множество парабол, поэтому нужно 3 точки. Нужна именно парабола? Может проще использовать кривые Безье?

Answer 1

[abberati]

Параболу нельзя построить по двум точкам.

Answer 2

[Aleksey Solovyev]

В порядку бреда

@keyframes anim {
  0% {
    transform: translate(-30px, 90px);
  }
  10% {
    transform: translate(-24px, 57.6px);
  }
  20% {
    transform: translate(-18px, 32.4px);
  }
  30% {
    transform: translate(-12px, 14.4px);
  }
  40% {
    transform: translate(-6px, 3.6px);
  }
  50% {
    transform: translate(0px, 0px);
  }
  60% {
    transform: translate(6px, 3.6px);
  }
  70% {
    transform: translate(12px, 14.4px);
  }
  80% {
    transform: translate(18px, 32.4px);
  }
  90% {
    transform: translate(24px, 57.6px);
  }
  100% {
    transform: translate(30px, 90px);
  }
}

А так через JS( requestAnimationFrame и sin/cos )
www.the-art-of-web.com/javascript/animate-curved-path

Answer 3

[SelenIT3]

Как вариант, сделать 2 вложенных анимации. Сам объект двигать вверх-вниз с замедлением движения в середине, а контейнер с этой анимацией двигать линейно по горизонтали. Но насколько это будет эффективно — надо тестировать.

Answer 4

[Павел Корнилов]

ax2+bx+c = 0
Стандартное квадратное уравнение, которое имеет 3 варианта решения:

1. 2 точки пересечения с осью абсцисс
2. Одна точка (когда ось асцисс является касательной к экстремуму функции)
3. Не имеет пересечений. То есть, нет ни одного графического решения. Такое уравнение тоже можно решить, но нужно менять параметр с до и после решения.