Альтернативы jQuery для простой, обратной совместимости, анимации веб-сайта на стороне клиента? [дубликат]

Недавно я искал альтернативную библиотеку анимации JavaScript, потому что для нескольких простых анимаций, которые я хотел, библиотека jQuery размером ~ 200 КБ — не лучший вариант.

Немного поискав, я нашел GSAP и реализовал его успешно (и более плавно), чем созданную ранее анимацию jQuery. Он весит около 80 КБ - так что все еще не идеально (но это с дополнительными плагинами, позволяющими использовать селекторы CSS, если вы анимируете SVG, вы, вероятно, можете опустить требуемый файл размером 60 КБ).

Мне интересно, есть ли другие отличные варианты.

Кто-нибудь знает об альтернативных библиотеках для анимации элементов с помощью JavaScript?

Лучшие варианты:

  • Не полагайтесь на jQuery!

  • Либо не полагается на ключевые кадры CSS3 , либо имеет запасной вариант, когда ключевые кадры CSS3 недоступны (для обратной совместимости).

  • Имеет минимальный размер файла и требует включения нескольких файлов или их отсутствия.

  • Не слишком сложно учиться! (либо хорошая документация, либо знакомый/простой синтаксис - я не хочу тратить дни на создание простой анимации)

Меня Флэш вообще не интересует.

Вы слышали об Adobe Edge Animation и Google Web Designer?
Вы просите решение CODE, не так ли? Если вам нужна простая анимация, почему бы не использовать анимацию CSS3? Если вы уже создали код и беспокоитесь о его размере, и он работает, не рассматривали ли вы возможность обратиться в Code Review, чтобы узнать, могут ли они помочь уменьшить его? Вы пробовали использовать CDN? Почему CDN не работает? В любом случае, это не лучшее место, чтобы спрашивать об этом.
Я чувствую, что это дубликат этого вопроса
У вас есть демо вашего творения? Я предполагаю, что вам не нужен весь файл размером 60 КБ, если он есть.
«Не код, я ищу рекомендации библиотеки анимации JS» = библиотека анимации JS — это код.
@DumbNic Хорошо. Но на самом деле это и не вопрос графического дизайна. Во всяком случае, я думаю, что Мэтт дал вам довольно хороший список, чтобы начать.
@DumbNic Я не знаю, почему нет близких голосов. Что касается поиска рекомендаций от тех, кто их использовал, я думаю, именно поэтому люди говорят, что это, вероятно, не место здесь. У вас было бы больше шансов найти людей, которые использовали их на StackOverflow.

Ответы (2)

Ваш вопрос невероятно обширен. Лучшая библиотека анимации для вашего проекта зависит от того, что вы делаете в этом конкретном проекте. Оптимальной библиотекой будет пользовательская, разработанная специально для проекта , но, конечно, это не ответ на ваш вопрос здесь.

На мой взгляд, на данный момент двумя лучшими общими библиотеками анимации JavaScript являются Velocity.js для большинства базовых анимаций, включая многие анимации пользовательского интерфейса, и GSAP (GreenSock Animation Platform) для более сложных. GSAP имеет множество дополнительных надстроек, которые вы можете добавить в зависимости от требований проекта. Оба имеют хорошую документацию и довольно просты в настройке.

Поскольку вы конкретно упомянули SVG, я обнаружил, что мне вообще не нужна библиотека анимации для анимаций, которые я с ней делал, анимация SVG и CSS3 хорошо поддерживаются. Но если вы по какой-то причине это сделаете, Snap.svg — один из лучших.

Однако анимация JavaScript — не всегда лучший способ оживить ваш проект. Я написал подробный ответ , в котором подробно рассказывается, когда и как использовать различные методы анимации, доступные нам в настоящее время, которые стоит прочитать.

Как вы сказали, этот вопрос относится сюда, потому что анимация относится к сфере графического дизайна. Точно так же анимация также должна принадлежать области CSS. Я настоятельно рекомендую Animate.CSS

Вот еще одна интересная структура, которая просто использует JS только для запуска анимации во время события, как вы упомянули. http://motorcortexjs.com/

Hi5 за то, что не интересуется Flash!