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

Question

[sinout]

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

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

Answer 1

[Антон Мудренок]

Просто начните пытаться реализовать свои идеи. Возникнут вопросы, найдете на них ответы. Так и научитесь.
Со знанием базовых вещей будет проще конечно, но все равно прогресс чувствуется когда садишься и делаешь.

По SVG:
commons.oreilly.com/wiki/index.php/SVG_Essentials/...
Книга по основам, я читал в более адекватном epub формате
https://sarasoueidan.com/tags/svg/index.html
Блог Сары (SVG, но можно и про CSS&JS почитать), более практичные и полезные вещи, читал с конца к началу

По JS:
https://classroom.udacity.com/courses/ud860/lesson...
Это база для понимания "че оно лагает?"
https://developers.google.com/web/tools/chrome-dev...
Понимание возможностей DevTools, очень упрощает жизнь в перспективе
https://github.com/getify/You-Dont-Know-JS
И конечно знание самого JS всегда нелишнее

По библиотекам и анимации:
Сам codepen, понятное дело. Смотрите в чужой код, пытайтесь разобраться.
https://www.youtube.com/playlist?list=PLkEZWD8wblt...
Более-менее можно прочувствовать что такое GSAP вообще, неплохой начальный курс
https://greensock.com/docs/#/HTML5/GSAP/TweenMax/from/
Сама документация и туториалы на сайте, можно и на их youtube канале что-то подсмотреть.
https://tympanus.net/codrops/
Много полезного с примерами

Всякого рода математика:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6...
https://www.youtube.com/user/codingmath/videos?flo...
Можно залипнуть, чтобы понимать как все эти векторные фишки делаются на canvas

Еще есть 3D, но это отдельная тема.

Comments

[sinout]

Спасибо большое за такой развернутый ответ.

Answer 2

[Илья Воропаев]

Рекомендую https://cssanimation.rocks/ много интересных примеров и обучающих материалов по анимациям.
Ну и как писали выше надо попробовать реализовать свою идею. Я впервые более-менее понял как работать с анимациями когда сделал анимированную модель солнечной системы на чистом css.

Answer 3

[Dark Hole]

Что касается 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);

Answer 4

[Олег]

https://developer.mozilla.org/en-US/docs/Web/SVG/E...
https://developer.mozilla.org/en-USdocs/Web/API/Ca...