Список лучших инструментов для web-анимации
- пятница, 3 ноября 2017 г. в 03:13:10
https://habrahabr.ru/post/341554/
Список лучших инструментов для web-анимации. SVG/CSS/Canvas/DOM анимация + GUI инструменты для генерации кривых Безье и CSS анимации.
В будущем список будет дополнен книгами и видео-курсами по web-анимации. Если вы заметите, что какого-то стоящего инструмента не присутствует — пожалуйста, напишите об этом и я добавлю его.
Также буду рад отзывам на инструменты из текущего списка, с помощью ваших отзывов я смогу сделать описание инструментов более полным.
Категории:
SVG
Canvas
DOM
CSS
Easing
GUI
Scroll
Snap.svg
Одна из наиболее популярных библиотек для SVG. Не только для анимации, но и для удобной работой с SVG вообще. Современная версия Raphael.js
Минимальный вес: 81кб
Ссылка
SVG.js
Отличная библиотека с кучей крутейших плагинов и хорошей документацией. Заявляется лучшая производительность в сравнении с Snap.svg и Raphael.js
Минимальный вес: 64кб
Ссылка
Animateplus
Библиотека может быть интересна своей легковесностью. Автором не развивается.
Минимальный вес: 9кб
Ссылка
Vivus
Отличная библиотека для анимации контуров SVG, имеет также GUI-версию.
Минимальный вес: 11кб
Ссылка
Raphael
Хороший вариант, если вам нужно поддерживать таких мамонтов как IE6, в ином случае посмотрите на Snap.svg, Svg.js или любой другой современный вариант.
Минимальный вес: 91кб
Ссылка
Walkway
Хорошая библиотека для анимации контуров SVG, выделяется легковесностью.
Минимальный вес: 4кб
Ссылка
BonsaiJS
Интересна в качестве экспоната, автором не развивается, к сожалению.
Минимальный вес: 130кб
Ссылка
ProgressBar.js
Неплохое, хотя и слегка тяжеловесное решение для лоадера.
Минимальный вес: 21кб
Ссылка
SVG Morpheus
Библиотека для морфинга SVG. Плагин для GSAP решает эту задачу лучше, однако он платный, а этот инструмент бесплатен.
Минимальный вес: 22кб
Ссылка
Velocity.js
Серьёзное решение для JS анимации, используется многими большими ребятами и активно поддерживается автором.
Минимальный вес: 43кб
Ссылка
Mojs
Хорошая библиотека, с богатым функционалом и декларативным интерфейсом.
Минимальный вес: 130кб
Ссылка
GSAP
Анимационный гигант мира front-end. Сверх-производительность и масса плагинов, некоторые из которых уникальны. В бесплатной версии доступны не все плагины, однако и без них функционал очень широкий.
Минимальный вес: 41кб
Ссылка
Anime.js
Достаточно активно-развивающаяся библиотека. Очень-очень компактна для своих возможностей и имеет хорошую документацию.
Минимальный вес: 11кб
Ссылка
Animo.js
Совсем небольшая утилита, если размер библиотеки очень критичен, то можно рассмотреть и её.
Минимальный вес: 6кб
Ссылка
Move.js
Неплохое решение и легковесное решение с удобным интерфейсом.
Минимальный вес: 14кб
Ссылка
Textillate.js
Библиотека для простой анимации текста, к сожалению нуждается в достаточно тяжёлых зависимостях (таких как JQuery).
Минимальный вес: 8кб
Ссылка
Firmin
Интересна в качестве экспоната, давно заброшена автором.
Минимальный вес: 8кб
Ссылка
AliceJS
Интересна в качестве экспоната, давно заброшена автором.
Минимальный вес: 50кб
Ссылка
Motio
Позиционирует себя как «Sprite based animation library», выделяется легковесностью.
Минимальный вес: 4кб
Ссылка
Animatic
Подойдёт для простых решений, может похвастаться удобным интерфейсом.
Минимальный вес: 22кб
Ссылка
Just Animate
Свежая библиотека, выделяется легковесностью. Активно развивается автором.
Минимальный вес: 14кб
Ссылка
CreateJS
Швейцарский нож для Canvas. Тут хороший API для canvas и модуль для анимации, и для аудио. Используется как стандартная библиотека для экспорта HTML5 в Adobe Animate (ex Flash Pro). Очень серьёзная штука, подойдёт как для рекламы/промо, так и для создания HTML5 игр.
Минимальный вес: 186кб
Ссылка
Bhive
Может быть интересна как экспонат. Автором не развивается.
Минимальный вес: 36кб
Ссылка
Two.js
Интересная библиотека, которая может рендерить в Canvas, SVG и даже WebGl. Активно развивается, достаточно производительная и радует функционалом.
Минимальный вес: 50кб
Ссылка
Ocanvas
Минимальный вес: 73кб
Ссылка
Позиционируется как «Object-based canvas drawing». Автором не заброшена.
Fabric.js
Подойдёт не только для анимации Canvas, но и как абстракция для работы с ним.
Минимальный вес: 248кб
Ссылка
Paper.js
Позиционирует себя как «Vector graphics scripting framework». Серьёзный и интенсивно развивающийся инструмент.
Минимальный вес: 277кб
Ссылка
Konva
Неплохой инструмент для анимации и вообще для работы с Canvas.
Минимальный вес: 138кб
Ссылка
DeltaJS
Реализует векторную графику поверх Canvas с событиями мыши и тачей, анимацией и всем остальным. Сейчас в Core очень много разных дополнительных модулей, которые позже будут перенесены в часть More (а-ля Mootools). Например, умеет рисовать плавные кривые через множество точек, анимировать движение объекта вдоль пути, анимировать превращение одной кривой в другую (в том числе и разных видов — например, кривую Лагранжа в кривую Безье), есть Draggable и много разных классных вещей.
В планах WebGL и SVG.
За библиотеку спасибо Keyten
Минимальный вес: 84кб
<a href=«github.com/keyten/Graphics2D> Ссылка
AOS
Неплохая простая библиотека для анимаций по скролингу, подойдёт для простых задач.
Минимальный вес: 13кб
Ссылка
Wow.js
Простое решения для анимаций по скролингу. Для коммерческого использования не бесплатна.
Минимальный вес: 13кб
Ссылка
ScrollReveal
Легковесная и бесплатная для коммерческого использования.
Минимальный вес: 9кб
Ссылка
ScrollMagic
Несмотря на то, что последние изменения библиотеки были 2 года назад, является наиболее функциональным решением для скролл-анимации.
Минимальный вес: 17кб
Ссылка
Skrollr
Отличнейшая библиотека для сложных анимаций привязанных к скролу. Может похвастаться легковесностью и производительностью.
Минимальный вес: 12кб
Ссылка
Ceaser
GUI-инструмент для генерации нужный временных кривых.
Ссылка
Сubic-bezier
Инструмент для генерации временных кривых, не лучше и не хуже других.
Ссылка
Bezier easing
Ещё один инструмент для генерации временных кривых.
Ссылка
Stylie
GUI инструмент для генерации CSS-анимации.
Ссылка
Keyframer
Ещё один GUI инструмент для генерации CSS-анимации.
Ссылка
CSS-loaders
Небольшой набор CSS-лоадеров. Есть возможность кастомизировать цвета.
Ссылка
Bounce.js
Неплохой генератор CSS-анимаций.
Ссылка
CSS Animation Kit
GUI-инструмент для генерации CSS-анимаций. Не лучше и не хуже других.
Ссылка
Magic animations
Большой набор CSS-классов с различными анимациями.
Минимальный вес: 16кб
Ссылка
Animate.css
Большущая коллекция CSS-классов с анимациями.
Минимальный вес: 17кб
Ссылка
Spinkit
Небольшой набор CSS-лоадеров.
Ссылка
CSSanimate.com
GUI-инструмент для генерации CSS-анимаций.
Ссылка
CSS3 Animation Cheat Sheet
Небольшая библиотека CSS-классов с анимациями.
Минимальный вес: 12кб
Ссылка
Буду благодарен, если вы внесёте свой вклад своими комментариями с другими полезными инструментами, а так же коммитам в отдельном репозитории созданным специально для этого.
- JavaScript
- HTML
- Canvas
- CSS
Список лучших инструментов для web-анимации. SVG/CSS/Canvas/DOM анимация + GUI инструменты для генерации кривых Безье и CSS анимации.
В будущем список будет дополнен книгами и видео-курсами по web-анимации. Если вы заметите, что какого-то стоящего инструмента не присутствует — пожалуйста, напишите об этом и я добавлю его.
Также буду рад отзывам на инструменты из текущего списка, с помощью ваших отзывов я смогу сделать описание инструментов более полным.
Категории:
SVG
Canvas
DOM
CSS
Easing
GUI
Scroll
SVG
Snap.svg
Одна из наиболее популярных библиотек для SVG. Не только для анимации, но и для удобной работой с SVG вообще. Современная версия Raphael.js
Минимальный вес: 81кб
Ссылка
SVG.js
Отличная библиотека с кучей крутейших плагинов и хорошей документацией. Заявляется лучшая производительность в сравнении с Snap.svg и Raphael.js
Минимальный вес: 64кб
Ссылка
Animateplus
Библиотека может быть интересна своей легковесностью. Автором не развивается.
Минимальный вес: 9кб
Ссылка
Vivus
Отличная библиотека для анимации контуров SVG, имеет также GUI-версию.
Минимальный вес: 11кб
Ссылка
Raphael
Хороший вариант, если вам нужно поддерживать таких мамонтов как IE6, в ином случае посмотрите на Snap.svg, Svg.js или любой другой современный вариант.
Минимальный вес: 91кб
Ссылка
Walkway
Хорошая библиотека для анимации контуров SVG, выделяется легковесностью.
Минимальный вес: 4кб
Ссылка
BonsaiJS
Интересна в качестве экспоната, автором не развивается, к сожалению.
Минимальный вес: 130кб
Ссылка
ProgressBar.js
Неплохое, хотя и слегка тяжеловесное решение для лоадера.
Минимальный вес: 21кб
Ссылка
SVG Morpheus
Библиотека для морфинга SVG. Плагин для GSAP решает эту задачу лучше, однако он платный, а этот инструмент бесплатен.
Минимальный вес: 22кб
Ссылка
Velocity.js
Серьёзное решение для JS анимации, используется многими большими ребятами и активно поддерживается автором.
Минимальный вес: 43кб
Ссылка
Mojs
Хорошая библиотека, с богатым функционалом и декларативным интерфейсом.
Минимальный вес: 130кб
Ссылка
DOM
GSAP
Анимационный гигант мира front-end. Сверх-производительность и масса плагинов, некоторые из которых уникальны. В бесплатной версии доступны не все плагины, однако и без них функционал очень широкий.
Минимальный вес: 41кб
Ссылка
Anime.js
Достаточно активно-развивающаяся библиотека. Очень-очень компактна для своих возможностей и имеет хорошую документацию.
Минимальный вес: 11кб
Ссылка
Animo.js
Совсем небольшая утилита, если размер библиотеки очень критичен, то можно рассмотреть и её.
Минимальный вес: 6кб
Ссылка
Move.js
Неплохое решение и легковесное решение с удобным интерфейсом.
Минимальный вес: 14кб
Ссылка
Textillate.js
Библиотека для простой анимации текста, к сожалению нуждается в достаточно тяжёлых зависимостях (таких как JQuery).
Минимальный вес: 8кб
Ссылка
Firmin
Интересна в качестве экспоната, давно заброшена автором.
Минимальный вес: 8кб
Ссылка
AliceJS
Интересна в качестве экспоната, давно заброшена автором.
Минимальный вес: 50кб
Ссылка
Motio
Позиционирует себя как «Sprite based animation library», выделяется легковесностью.
Минимальный вес: 4кб
Ссылка
Animatic
Подойдёт для простых решений, может похвастаться удобным интерфейсом.
Минимальный вес: 22кб
Ссылка
Just Animate
Свежая библиотека, выделяется легковесностью. Активно развивается автором.
Минимальный вес: 14кб
Ссылка
Canvas
CreateJS
Швейцарский нож для Canvas. Тут хороший API для canvas и модуль для анимации, и для аудио. Используется как стандартная библиотека для экспорта HTML5 в Adobe Animate (ex Flash Pro). Очень серьёзная штука, подойдёт как для рекламы/промо, так и для создания HTML5 игр.
Минимальный вес: 186кб
Ссылка
Bhive
Может быть интересна как экспонат. Автором не развивается.
Минимальный вес: 36кб
Ссылка
Two.js
Интересная библиотека, которая может рендерить в Canvas, SVG и даже WebGl. Активно развивается, достаточно производительная и радует функционалом.
Минимальный вес: 50кб
Ссылка
Ocanvas
Минимальный вес: 73кб
Ссылка
Позиционируется как «Object-based canvas drawing». Автором не заброшена.
Fabric.js
Подойдёт не только для анимации Canvas, но и как абстракция для работы с ним.
Минимальный вес: 248кб
Ссылка
Paper.js
Позиционирует себя как «Vector graphics scripting framework». Серьёзный и интенсивно развивающийся инструмент.
Минимальный вес: 277кб
Ссылка
Konva
Неплохой инструмент для анимации и вообще для работы с Canvas.
Минимальный вес: 138кб
Ссылка
DeltaJS
Реализует векторную графику поверх Canvas с событиями мыши и тачей, анимацией и всем остальным. Сейчас в Core очень много разных дополнительных модулей, которые позже будут перенесены в часть More (а-ля Mootools). Например, умеет рисовать плавные кривые через множество точек, анимировать движение объекта вдоль пути, анимировать превращение одной кривой в другую (в том числе и разных видов — например, кривую Лагранжа в кривую Безье), есть Draggable и много разных классных вещей.
В планах WebGL и SVG.
За библиотеку спасибо Keyten
Минимальный вес: 84кб
<a href=«github.com/keyten/Graphics2D> Ссылка
Scroll
AOS
Неплохая простая библиотека для анимаций по скролингу, подойдёт для простых задач.
Минимальный вес: 13кб
Ссылка
Wow.js
Простое решения для анимаций по скролингу. Для коммерческого использования не бесплатна.
Минимальный вес: 13кб
Ссылка
ScrollReveal
Легковесная и бесплатная для коммерческого использования.
Минимальный вес: 9кб
Ссылка
ScrollMagic
Несмотря на то, что последние изменения библиотеки были 2 года назад, является наиболее функциональным решением для скролл-анимации.
Минимальный вес: 17кб
Ссылка
Skrollr
Отличнейшая библиотека для сложных анимаций привязанных к скролу. Может похвастаться легковесностью и производительностью.
Минимальный вес: 12кб
Ссылка
Easing
Ceaser
GUI-инструмент для генерации нужный временных кривых.
Ссылка
Сubic-bezier
Инструмент для генерации временных кривых, не лучше и не хуже других.
Ссылка
Bezier easing
Ещё один инструмент для генерации временных кривых.
Ссылка
GUI
Stylie
GUI инструмент для генерации CSS-анимации.
Ссылка
Keyframer
Ещё один GUI инструмент для генерации CSS-анимации.
Ссылка
CSS-loaders
Небольшой набор CSS-лоадеров. Есть возможность кастомизировать цвета.
Ссылка
Bounce.js
Неплохой генератор CSS-анимаций.
Ссылка
CSS Animation Kit
GUI-инструмент для генерации CSS-анимаций. Не лучше и не хуже других.
Ссылка
CSS
Magic animations
Большой набор CSS-классов с различными анимациями.
Минимальный вес: 16кб
Ссылка
Animate.css
Большущая коллекция CSS-классов с анимациями.
Минимальный вес: 17кб
Ссылка
Spinkit
Небольшой набор CSS-лоадеров.
Ссылка
CSSanimate.com
GUI-инструмент для генерации CSS-анимаций.
Ссылка
CSS3 Animation Cheat Sheet
Небольшая библиотека CSS-классов с анимациями.
Минимальный вес: 12кб
Ссылка
Буду благодарен, если вы внесёте свой вклад своими комментариями с другими полезными инструментами, а так же коммитам в отдельном репозитории созданным специально для этого.