Плагин AnimateMate, создание анимации прямо в Sketch

Хаха, это шутка, верно? Зачем мне вообще нужны инструменты для анимации в Sketch? Вам знакомо это ощущение, когда вам нужна какая-то простенькая анимация, но на нее придется потратить огромную тучу времени, чтобы портировать исходники в какое-то другое приложение? Даа, это та еще головная боль! Вот как с этим примером: Мне тоже знакомы эти чувства Поэтому я и создал плагин AnimateMate, чтобы создавать и экспортировать простые анимации прямо в Sketch. Это конечно не достижение в ракетостроении, но этот инструмент может облегчить вам работу в некоторых случаях. Начнем!

Установка

Скачайте архив и распакуйте. Скопируйте AnimateMate.sketchplugin в папку с плагинами Sketch. Проще всего перейти в папку плагинов так: Plugins > Manage Plugins > Reveal Plugins Folder

Как с ним работать?

Есть масса способов использования AnimateMate, и я попытаюсь объяснить основные приемы в этом видео. Вы можете столкнуться с ситуацией, когда сложно понять, почему это работает так и не иначе… Этот плагин не конвертирует ваш Sketch в полноценное приложение для анимирования : ) Но при этом, оно поможет вам во многих простеньких случаях. Если же вам нужны более сложные анимации, то лучше воспользоваться специализированными продуктами. AnimateMate был создан для рисования простых анимаций. По крайней мере, сейчас именно так. Но посмотрим, как плагин будет развиваться в будущем...

Горячие клавиши

• Создать анимацию ctrl + option + cmd + K (Создать новую анимацию / ключевой кадр в слое).
• Сдвинуть ctrl + option + cmd + O (Сместить анимированные значения или значения ключевого кадра).
• Рандомная анимация ctrl + option + cmd + G (Генерация рандомной анимации из выделенных слоев). Редактировать анимацию ctrl + option + cmd + L (Редактировать значения анимации слоя в упорядоченном текстовом виде).
• Удалить анимацию ctrl + option + cmd + D (Удалить анимацию из выделенных слоев).
• Вернуть ключевой кадр ctrl + option + cmd + R (Вернуть значения выделенного ключевого кадра к слою (или слоям)).
• Экспортировать анимацию ctrl + option + cmd + A (Экспортировать анимацию в формат PNG или GIF).

Идеи на будущее

В будущем планируется дополнить плагин следующими опциями:

• Запоминание значений в полях и диалогах ввода.
• Визуальный редактор временной шкалы
• Улучшение работы с группами
• Анимация текста
• Рандомизация значений ключевого фрейма
• Выделение слоя по номеру ключевого фрейма
• Якорный помощник
• Обратные ключевые фреймы
• Распределение ключевых фреймов в заданном времени
• Разные типы динамики анимации
• Больше опций по экспорту GIF

Отзывы и предложения

Есть столько всего, в чем мы бы могли улучшить плагин! Отзывы пользователей очень важны для автора. Пишите свои пожелания на hello@creatide.com. Автор: “Я визуальный дизайнер по профессии, и кодер по хобби. Так что, если вы более опытны в плане написания кода, я уверен, вместе мы сможем лучше : )

О плагине

Sketch - суперполезный инструмент для многих задач в дизайне. Но пока я использую его, или любой другой графический редактор, мне всегда не хватало инструментов для анимации, хотя бы на базовом уровне. Обычно нужно всего-то сделать какой-то базовый поворот, зум, движение или изменение прозрачности, чтобы визуализировать какой-то элемент. Я думаю, большая часть ПО для дизайна должна содержать хотя бы самые базовые функции анимирования. Например, в Photoshop я очень часто применял инструменты для анимации. Это куда проще, чем портировать все исходники на другое ПО, чтобы элементарно сдвинуть один элемент с места. При этом, не нужна какая-то сверхсложная система...