Как убрать анимацию в канве
Как сделать анимацию в Канве
Анимированные посты привлекают больше внимания, тем самым делают дешевле стоимость одного контакта. И даже могут увеличивать охват. Сделать их легко, если использовать бесплатный сервис Canva. Он работает на компьютерах, и на телефонах. Причем, начать работу можно на одном устройстве, а закончить на другом. Хоть эта статья и посвящена постам в инстаграм, но тот же принцип подойдет для создании анимации на сайте.
Чтобы сделать анимированный пост в Канве нужно нажать всего лишь одну кнопку. И называется она, как нетрудно догадаться, «Анимация». Вот какой пост у нас может получиться.
Сразу скажу, что можно выбирать лишь из имеющихся сценариев анимации. А в них мы можем менять только длительность слайда.
С одной стороны, это не дает нам возможности тонко настроить пост под себя. С другой — этого достаточно чтобы сделать все самостоятельно, не прибегая к помощи профессионалов.
Мы можем сделать несолько слайдов, они сами склеятся в один пост. Хотя их можно скачать по отдельности.
Давайте перейдем в сервис. Вводим в браузере canva.com. Либо открываем приложение.
Canva — сервис для создания любого креатива. В том числе, можно создать шаблон поста для Инстаграм
Далее нам нужно нажать на кнопку «Создать дизайн». После этого увидим белый чистый лист. В нем и будем работать.
Можем выбрать готовый шаблон. Тем более, что их более 50 000 в Канве. А можем создать свой. Для примера выберем готовый дизайн.
Чистый лист — первая ступень создания поста. Будем разбираться с анимацией на примере готового шаблона.
После выбора шаблона нужно нажать на кнопку «Анимация». Расположена она не очень удачно, поэтому можно пропустить.
Анимация в Canva
Нам откроется дополнительное меню, где мы можем выбрать один из предустановленных вариантов анимации.
Настройки анимации в Canva
Здесь у нас почти нет настроек. Мы просто можем выбрать один из вариантов, а так же установить длительность воспроизведения. По умолчанию стоит 5 секунд.
Если мы добавим еще один слайд, то длительность ролика увеличится. Для ленты целесообразно делать видео-посты до 1 минуты. А для ленты 3 слайда по 15 секунд. Таким образом мы сможем установить максимальной контакт при таргетированной рекламе, если вы создаете ролики с этой целью.
Вот как выглядит один и тот же ролик с разными настройками анимации.
Поэкспериментируйте с креативом и настройками анимации, чтобы получить результат, который вас устроит.
И проходите обучение на моем бесплатном курсе по таргетированной рекламе.
Александр Айвазов
Директор РК Ай-Маркет. Помогаю ИП, небольшим и средним компаниям быстро наладить продажи через интернет.
Инструкция Canva: как создать анимацию и мини-фильмы
Как сделать анимацию для презентации
Анимация в презентации может выполнять сразу несколько функций. Анимированные объекты привлекают внимание к самым важным фактам и цифрам, переходы между слайдами помогают обозначить смену темы и «возвращают» к презентации тех, кто заскучал или отвлёкся.
Главное правило в подборе анимации — содержание важнее красоты. Если анимация мешает воспринимать смысл презентации, то она лишняя. Долгие полеты каждой буквы никак не помогут зрителям запомнить мысль. Другое дело — когда самые важные элементы привлекают к себе внимание, особенно если презентация сама по себе логична и хорошо структурирована
Как сделать анимацию в презентации полезной? Используйте каждый эффект осмысленно: пункты вылетают один за другим — зрители видят последовательность, логическую цепочку, этапы процесса; объекты «выцветают» и исчезают — зритель понимает, что речь идёт о потерях, убытках. Сделайте каждый слайд говорящим.
В Canva предусмотрен специальный режим для создания и показа презентаций. Чтобы создать анимацию в презентации Canva, нужно использовать компьютерную версию сервиса. Выберите шаблон «Презентация» в списке или введите это слово в поиск.
Выберите понравившийся дизайн или создайте свой с нуля: добавьте текст, картинки и декоративные элементы на каждый слайд презентации.
Затем в меню «Презентация» выберите эффекты для своей презентации. Слайды могут плавно перетекать друг в друга или динамично сменяться на экране.
Чтобы просмотреть, что получилось, начните показ в режиме «Стандарт». Для выступления подойдет режим «Автовоспроизведение»: он будет менять слайды через заданное время.
Если вы хотите сами переключать слайды во время презентации, выбирайте «Режим докладчика». Canva создаст второй экран, который можно демонстрировать зрителям на проекторе. А первый, только для докладчика, будет отображать ещё и таймер, заметки спикера и порядок слайдов — это поможет говорить по делу и уложиться в отведенное время.
Показывать презентацию с анимированными эффектами можно с любого компьютера с доступом в интернет — нужно только войти в свой аккаунт в Canva. Поэтому вы не забудете дома флешку с презентацией или не столкнетесь со старой версией PowerPoint, которая неправильно отображает ваши шрифты или эффекты анимации.
Как сделать gif-анимацию для статьи, сайта или соцсетей
Гифки быстро грузятся, легко встраиваются в любое окружение — и в ленту «Вконтакте», и в научную статью. С помощью анимированных картинок удобно объяснять сложные понятия, рассказывать забавные истории или просто вызывать эмоции у читателя.
Гифки часто используют в рекламных баннерах. Баннеры обычно стоят в боковых колонках сайта, и маркетологам нужно сделать их яркими, чтобы привлечь внимание. Гифка как раз решает эту задачу: движение притягивает взгляд пользователя.
Баннеры обычно небольшие, писать на них много текста мелким кеглем нельзя — в итоге все преимущества продукта просто не умещаются на одной картинке. Гифка позволяет рассказать о продукте в картинках: на каждом кадре рассказать об отдельном свойстве продукта или показать предмет из каталога.
У гифок есть еще одно свойство — они помогают донести сложные эмоции, объяснить нестандартные явления. Подойдут такие гифки для презентаций, сайтов и СМИ. Благодаря ним в онлайновых медиа существует целый жанр «Объясняем на гифках», когда научные, технические темы раскрывают с помощью гифок.
В Canva можно собрать гифку из фотографий и картинок с элементами анимации. Выберите шаблон с нужными размерами. Мы будем делать публикацию в Instagram. Разместите на нем нужные объекты и текст. Во вкладке «Скачать» выберите тип файла «Анимация».
Затем выберите, как сделать анимацию текста и картинок (мы выбрали плавную), и сохраните композицию в формате gif-анимации.
Как сделать из анимации мини-фильм
В русскоязчынях социальных медиа каждый день публикуется 2 миллиона видеороликов. Смотреть видео удобнее, чем читать, и обычно интереснее, чем слушать подкасты. К тому же видео вызывают больше эмоций, а значит — реакций. Например, в Инстаграме на один пост без видео приходится 1,61 комментариев, а на ролик с видео — 2,7.
Помните, что анимация помогает объяснять сложное? Это касается не только простых гифок, но и текстовых мини-фильмов. Такой формат хорошо прижился в YouTube и Instagram. Он делает обычный рассказ с картинками динамичным и интересным видео. Формат очень популярен и прост, нужно только изучить, что интересно аудитории и как сделать анимацию текста.
В Сanva легко повторить такой прием. Давайте разберемся, как создать анимацию, смонтировав небольшой фильм из фотографий. Например, отчет о мероприятии или каталог для сториз. За счет движения анимированный альбом смотрится интереснее, чем обычный, поэтому его охотнее посмотрит ваша аудитория.
Для того чтобы сделать фильм, соберём фотографии на нескольких слайдах. Мы взяли простой и минималистичный шаблон, чтобы декоративные элементы не отвлекали от центра кадра — красивых снимков.
Во вкладке «Сохранить» выберите пункт «Анимация» и настройте эффекты. Мы используем анимацию «Подъем», чтобы фотографии как будто поднимались снизу.
Итак, рецепт простой: используйте режим презентации или функцию «Анимация», чтобы сделать дизайн динамичнее и привлечь внимание аудитории к вашим идеям. Добавляйте видео и гифки в социальные сети и на свой сайт, чтобы повышать охват и вовлеченность. И, наконец, рассказывайте истории и сохраняйте любимые снимки в мини-фильмах.
Анимация и Canvas
Добрались руки мои до Canvas. Посматривал я на него давненько, очень уж он мне в качестве инструмента для графиков приглянулся. Да и неделя Canvas на Хабре поддержала интерес.
Но вместо скучных графиков стал я копать в сторону анимации. Получилось, что отрисовываем сцену каждый раз по-новой, соответственно всю информацию о текущих кадрах храним в JS. И решил я попробовать составить простой алгоритм, который позволял бы хранить анимации для объекта, их состояние и выбор по желанию пользователя.
Канва
Под холстом добавлен Select со списком анимаций для объекта. Объект у меня будет один, хотя алгоритм не подразумевает каких либо ограничений.
Глобальные переменные
В childs будут храниться все объекты сцены с базовыми параметрами. Мы будем пробегаться по массиву и отрисовывать один за другим.
В animate храним для объекта его анимации. Тут можно сделать и по-другому, к примеру в animate храним анимации только для объектов которым они нужны, а для прочих храним информацию по отрисовке в самом массиве childs. В моем варианте каждый объект должен иметь по меньшей мере одну анимацию, если хочет быть отображенным на холсте.
Заполняем массивы
Сначала добавим наш объект. Я не стал росписывать параметры, т.к. считаю что для краткости кода можно на этой пойти, да и имена все интуитивно понятные.
//Идем по всем объектам
for ( var o in childs) <
//И по все их анимациям
for ( var a in animate[o]) <
//Подгружаем изображения
var img = new Image();
img.src = animate[o][a].src;
//Помещаем объект изобраения в анимацию
animate[o][a].el = img;
Немного поясню. Каждая анимация представляет собой файл со всеми кадрами. На холст я вывожу только часть изображения, соответствующую текущему кадру. Для этого я храню step и steps (количество кадров).
Изображение представляет собой следующее: 
Это самое большое изображение, ответственное за самую длинную анимацию «Bum» в 8 кадров.
Speed и curr отвечают за скорость переключения кадров. Я перерисовываю холст каждые 16мс и чтобы кадры сменялись с требуемой скоростью я считаю curr и по достижении speed меняю кадр.
Onend я вызываю по окончании анимации. Здесь мы можем сменить тип анимации — со взрыва на отображение останков или удалить объект из массива. Для этого чуть выше у меня есть функция:
//Меняем тип анимации на мертый шарик
childs[ ‘ball’ ].at = ‘dead’ ;
//Сбрасываем счетчик
animate[ ‘ball’ ][childs[ ‘ball’ ].at].curr = 0;
Анимации
Функция для смены анимации
//Меняем анимацю на выбранную
childs[ ‘ball’ ].at = value;
//Сбрасываем счетчик
animate[ ‘ball’ ][childs[ ‘ball’ ].at].curr = 0;
Запускаем
//Запускаем единый таймер
setInterval( function () <
//Чистим сцену
ctx.save();
ctx.fillStyle = ‘#FFFFFF’ ;
ctx.fillRect(0, 0, 600, 200);
ctx.restore();
//Проходим по всем объектам и отрисовываем
for ( var o in childs) <
//Смотрим текущую анимацию
if (animate[o]) <
//Берем текущий шаг
var step = animate[o][childs[o].at].step;
//Рисуем его
ctx.drawImage(
animate[o][childs[o].at].el, //Объект Image анимации
Math.round(childs[o].fw * step), //Берем текущий кадр, ширина кадра * шаг
0, //Кадры идут один за другим, тут 0
childs[o].w, //Вырез в ширину объекта
childs[o].h, //И в высоту
childs[o].x, //Размещаем по горизонтали на холсте
childs[o].y, //И по вертикали
childs[o].w, //Ширина как у кадра
childs[o].h //Ну и высота
);
//Проверяем счетчик и если достигли speed, переходим к следующему кадру
if (animate[o][childs[o].at].curr >= animate[o][childs[o].at].speed) <
//Проверяем, если кадр последний переходим к первому
if (animate[o][childs[o].at].step >= animate[o][childs[o].at].steps) <
//Кадр последний, значит вызываем функцию, если есть
if (animate[o][childs[o].at].onend)
window[animate[o][childs[o].at].onend]();
//Сбрасываем счетчик
animate[o][childs[o].at].curr = 0;
//Увеличиваем счетчик
animate[o][childs[o].at].curr++;
В принципе, я думаю из комментариев понятно что за чем идет и как работает. В результате я получил возможность сохранять объекты сцены, динамически задавать анимацию и реагировать на ее окончание.
Поскольку часто объекты в анимации повторяются, то есть смысл использовать childs как массив объектов, по принципу библиотеки.
Конечно есть что улучшить, но на текущий момент я не нашел хорошей статьи на тему анимации и предлагаю свой вариант.
9 лучших советов и хитростей Canva, которые вы должны знать
Самая большая сила Canva — это простота интерфейса и других возможностей. Легкость, с которой он позволяет вам создать плакат или шаблон за несколько простых шагов, заслуживает похвалы. Однако этот популярный инструмент дизайна не просто объединяет множество элементов в шаблоны и истории. В нем есть множество удобных инструментов, которые могут сделать ваш графический дизайн простым и удобным в долгосрочной перспективе.
Итак, если вы хотите максимально использовать возможности Canva, вот несколько советов и приемов, которые помогут вам.
Давайте их проверим.
1. Перекрывающиеся объекты
Для разработки базового шаблона требуется множество элементов, будь то простая форма или сложная масса элементов, похожих на клип-арт. И ключ к любому хорошо продуманному шаблону — это наслоение. К счастью, Canva позволяет легко упорядочивать слои несколькими щелчками мыши.
Когда все элементы и объекты будут на своих местах, щелкните правой кнопкой мыши конкретный объект и выберите «Отправить назад» или «Переместить вперед», чтобы изменить его местоположение. Хорошо то, что вы также можете позаботиться о них с помощью сочетаний клавиш (подробнее об этом позже).
Если вы хотите, чтобы объект находился у основания, опция «На задний план» поможет.
2. Обрезать изображение по фигурам
Возможность кадрировать изображения в формы — это, пожалуй, одна из самых полезных функций Canva. От историй из Instagram до открыток — примените этот простой трюк в нескольких сценариях. Все, что вам нужно, это убедиться, что форма доступна в Canva.
Для начала загрузите изображение, которое хотите обрезать, в Canva. Затем выберите «Элементы» на правой панели и нажмите «Просмотреть все» рядом с «Фреймами».
После выбора кадра вернитесь в раздел «Загрузки» и перетащите новое изображение к кадру, чтобы обрезать его. Все просто, правда?
Чтобы настроить размер изображения, дважды щелкните изображение внутри рамки. Теперь перетащите одну из четырех белых точек, чтобы настроить размер изображения.
Крутой совет: Вы также можете использовать изображения из галереи изображений, чтобы обрезать их до нужной формы.
3. Создавайте анимированные GIF-файлы.
Как отмечалось ранее, Canva — это не только создание шаблонов или историй в Instagram. Этот удобный инструмент также позволяет вам поиграть с анимацией. Вы можете создавать маленькие и глупые анимации или гифки за несколько кликов.
Например, если вы создаете историю в Instagram, вы можете добавить анимированный кадр. Для этого щелкните элемент, который нужно анимировать, и выберите «Анимировать» на верхней ленте.
После этого выберите одну из анимаций страницы на правой панели, как показано выше. Вы также можете анимировать другие элементы страницы. После этого нажмите значок «Воспроизвести» вверху, чтобы увидеть полную картину.
Аннимированные файлы можно загрузить только в формате MP4.
Крутой совет: Как объект? Выберите его и щелкните значок информации вверху. Затем нажмите «Добавить в лайки». После этого он также появится в разделе «Папка»> «Нравится» для быстрого доступа.
4. Отрегулируйте прозрачность изображения.
Степень прозрачности объекта или изображения является ключом к созданию качественного шаблона. К счастью, веб-версия Canva позволяет довольно легко настраивать прозрачность изображения.
Выберите объект или элемент и щелкните маленький клетчатый значок в правом верхнем углу.
Теперь все, что вам нужно сделать, это перетащить ползунок в соответствии с вашими предпочтениями.
5. Создайте собственный фильтр.
В Canva есть множество предустановок для редактирования изображений. Однако, если вам не нравятся готовые фильтры, вы можете настроить изображение по своему вкусу. И это стало возможным благодаря инструменту Adjust. Хорошо то, что вы также можете сохранить настройки фильтра, чтобы использовать их в будущих проектах.
Поэтому в следующий раз, когда вы настроите изображение, скопируйте и сохраните код фильтра, как показано на снимке экрана ниже.
Если вы хотите использовать те же настройки фильтра для нового изображения, откройте панель «Настройка» и вставьте код фильтра внизу. Изображение преобразится практически сразу. Круто, правда?
6. Заблокируйте беспорядочные элементы.
Инструмент Lock пригодится, когда вы работаете с множеством элементов. Судя по названию, он позволяет заблокировать положение некоторых выбранных элементов. Таким образом, вы можете продолжить проектирование, не нарушая готовый модуль.
Для этого выберите один элемент, нажмите на крошечный значок замка на верхней ленте и вуаля!
Это заблокирует позицию группы. Вы сможете продолжить работу с другими модификациями. Как только дизайн будет завершен, нажмите еще раз на значок, чтобы (как вы угадали) разблокировать его.
Дельный Совет: Чтобы зафиксировать группу объектов на месте, сначала сгруппируйте их, а затем заблокируйте.
7. Добавьте гиперссылку.
Canva — это не только работа с изображениями в формате JPEG или PNG. Этот инструмент графического дизайна также позволяет загружать шаблоны и дизайны в виде файлов PDF. И это еще не все. Например, вы можете связать элемент страницы (текст или картинку) с внешним веб-сайтом.
Для этого выберите объект, который вы хотите связать, щелкните значок «Ссылка» в правом верхнем углу и введите URL-адрес сайта.
Теперь вам нужно обязательно загрузить дизайн в формате PDF.
8. Простое управление страницами.
Одним из основных преимуществ веб-инструмента Canva является то, что он позволяет создавать несколько страниц для одного проекта. Но сортировка всех страниц может быть сложной и трудоемкой. Об этом позаботится изящный значок диспетчера страниц внизу.
Чтобы просмотреть все свои страницы сразу, щелкните значок «Страницы» в нижней части ленты.
Затем выберите страницу, которую хотите повторно посетить, и дважды щелкните по ней.
Крутой совет: Увеличенный вид также позволяет легко переставлять разные страницы. Просто перетащите разные страницы, чтобы переставить их по своему вкусу.
9. Знайте ярлыки
Говорят, что пути назад не будет, когда привыкнешь к сочетаниям клавиш, и это правильно. Ярлыки не только облегчают вашу работу, но и экономят много времени. Преимущество Canva в том, что в ней есть как сочетания клавиш, так и обычные сочетания клавиш.
Например, вам не нужно перебирать все венки в библиотеке Canva, если вам нужны только красные венки для рождественской открытки. Просто введите «красный + венок» в поле поиска, чтобы получить результаты поиска по добавлению элементов на рождественскую тематику.
Таким же образом, если вы хотите исключить все красные венки, вы можете просто добавить знаменатель «Минус» в свой поисковый запрос.
Помимо вышеперечисленного, Canva также поддерживает несколько сочетаний клавиш, помимо обычной комбинации Ctrl + C и Ctrl + V.
Here’s to Savvy Designs
So, these were some of the tips and tricks for the free version of Canva, using which you can create an array of attractive flyers, posters, and templates for Instagram stories. The key to any graphic design is to keep it to a minimum such that every element stands out.
Создание анимаций на холсте
Экскурс в анимацию
Вспомним, что такое анимация. В общем смысле анимация является визуализацией изменений, которые происходят в течение определенного периода времени. Рассмотрим это более подробно.
Начальное и конечное состояние
Допустим, что начальное состояние выглядит следующим образом:
Мы начинаем с синего круга маленького размера и расположенного в левой части экрана. В конечном состоянии синий круг выглядит так:
Основываясь только на информации о том, как наш синий круг выглядит в начальном и конечном состоянии, можно ли определить эти изменения?
Изменилась позиция фигуры. Синий круг находился в левой стороне экрана. В конце он находится в правой стороне. Еще одно изменение — размер. Наш круг был маленьким, теперь он большой.
Как можно создать анимацию на основе этого? Если бы мы проиграли по циклу начальное и конечное состояние, то увидели бы, что круг неуклюже скачет справа налево. Это довольно некрасиво, поэтому нужно сгладить переход между начальным и конечным состоянием. Нам нужно ввести то, что называется интерполяция.
Интерполяция
На данный момент у нас есть два дискретных состояния во времени: начальное и конечное. Чтобы создать анимацию из того, что у нас есть, нужен плавный переход, который определяет все промежуточные состояния. Создание промежуточных состояний называется интерполяцией.
Интерполяция, которая происходит в течение заданного периода времени, будет выглядеть следующим образом:
При рисовании на canvas в JavaScript вам нужно будет указать начальное состояние, конечное состояние, продолжительность и промежуточные состояния. После этого вы получите анимацию!
Анимация в canvas
В предыдущих разделах мы рассмотрели общие концепции построения анимации. Пришло время сосредоточиться на деталях.
Вначале холст полностью пуст. Назовем это начальное состояние кадр 1 :
В этом пустом кадре вы рисуете то, что нужно вывести как часть начального состояния:
Вы рисуете все — от элементов на переднем плане до элементов, которые составляют фон. canvas ничего не делает за вас. Он любезно оставляет вам право на творчество.
После того как будете удовлетворены тем, как выглядит первый кадр, вы стираете все, что только что вывели. Теперь у вас есть новый кадр:
На следующей диаграмме показана последовательность кадров для этой анимации:
Продолжайте создавать промежуточные кадры, пока не достигнете конечного состояния — окончания последовательности анимации. Когда все кадры быстро воспроизводятся один за другим, получается анимация.
Время реализации
В этом разделе с помощью мы создадим простую анимацию перемещения круга и посмотрим, как этапы рисования и JavaScript canvas очистки соответствуют строкам кода.
Добавление холста
Первое, что нужно сделать, это добавить элемент canvas, который будет содержать анимацию. Создайте пустую HTML-страницу и добавьте в нее следующий код HTML и CSS :
Пример простого холста
Просмотрев эту страницу сейчас, вы должны увидеть пустой квадрат, очерченный темно-серой рамкой.
Рисование круга
Далее с помощью canvas JavaScript нужно нарисовать круг, который мы хотим анимировать. Внутри тега script добавьте следующие строки:
Мы создаем код шаблона для более быстрого доступа к элементу canvas и его контексту рисования. Хотя это довольно скучно, но совсем скоро будут происходить интересные вещи…
Если все получилось, вы увидите круг, который при просмотре в браузере выглядит следующим образом:
Теперь нам нужно вызвать clearRect :
Canvas метод JavaScript clearRect () отвечает за один из двух этапов анимации — за очистку. В качестве аргументов он принимает координаты прямоугольной области, которую нужно очистить.
Поле запуска этого кода все пиксели в пределах прямоугольной области будут очищены. После этой строки остальной код относится к выводу круга на холсте.
Анимирование круга
Это замечательно, что теперь у нас есть желтый круг, который выводится на холсте, но на самом деле мы хотим анимировать этот круг, заставив его перемещаться слева направо. Если говорить более конкретно, мы хотим анимировать значение позиции х нашего круга, которая указывает на то, где он находится относительно горизонтальной оси. Для этого нужно немного изменить значение позиции х каждые несколько миллисекунд, чтобы создать промежуточные состояния анимации.
Это достигается с помощью цикла анимации. Это функция, которая вызывается через малые промежутки времени. Внутри нее задаются для каждого нового вызова изменения, которые нужно отобразить.
Попробуем requestAnimationFrame в действии! Добавьте следующую выделенную строку кода в самом низу функции DrawCircle :
requestAnimationFrame вызывает функцию DrawCircle каждый раз, когда браузер обновляет страницу. Частота обновления зависит от всего остального, что происходит на странице, но обычно она перерисовывается порядка 60 раз в секунду ( или каждые 16,67 миллисекунды ). Соответственно, функция DrawCircle будет вызываться примерно 60 раз в секунду.
Как работает анимация
Начиная с первой строки, мы объявляем и инициализируем глобальную переменную xPos :
Заключение
Анимация canvas JavaScript — это интересно. Работа с ней похожа на создание анимации в 1990-е годы, когда нужно было заниматься рисованием элементов, очисткой экрана, перерисовыванием вручную.
Дайте знать, что вы думаете по данной теме в комментариях. За комментарии, отклики, подписки, дизлайки, лайки низкий вам поклон!