CSS и JS анимации, как освоить?

Question

sinout @sinout

Frontend Developer

CSS и JS анимации, как освоить?

Работаю 2 года JS разработчиком, пишу в основном на TypeScript. Умею в html5 и css3 в плане верстки, верстал довольно много в начале. На тех проектах что я верстал, анимации были простые, т.е transition: all 0.3s ease; - хватало в 90% случаев и я как-то не парился по этому поводу. Но вот сегодня открыл codepen, посмотрел на различного рода работы с анимацией svg, html элементов и меня это дико заинтересовало. Кто имел дело со сложными анимациями на странице, или просто умеет во все эти штуки, подскажите ресурсы, библиотеки на которые стоит тратить время и вообще откуда начать копать ?

P.S С svg работал на уровне вставки в документ и все)

Вопрос задан более трёх лет назад
4651 просмотр

Комментировать

Подписаться 46 Оценить Комментировать

Answer 1 · 2017-02-05 13:22:36

Что касается JS-анимации - то тут множество библиотек, самой популярной из которых является всем известный jQuery. Но интересно другое. В основе всех этих библиотек лежит один и тот же код, основанный на requstAnimationFrame. Он приблизительно таков:

function animate(el, property, startVal, endVal, time, easing) {
  var start = Data.now();
  function reanimate(now) {
    var l = easing(time / (now - start));
    l = l > 1 ? 1 : l;
    el[property] = startVal + (endVal - startVal) * l;
    if(l < 1) requestAnimationFrame(reanimate);
  }
  requestAnimationFrame(reanimate);

CSS и JS анимации, как освоить?

Войдите на сайт