<MyRusakov.ru />

Разработчик игр на Unreal Engine

Разработчик игр на Unreal Engine

Этот комплект с нуля всего за 7 месяцев сделает Вас Unreal-разработчиком. И при этом учиться достаточно 1 час в день.

Начнёте Вы с основ программирования, постепенно перейдя к C++. Затем очень подробно изучите Unreal Engine, и после научитесь программировать на C++ в Unreal Engine. В конце создадите крупный проект на C++ в Unreal Engine для своего портфолио.

Комплект содержит:

- 416 видеоуроков

- 95 часов видео

- 1024 задания для закрепления материала из уроков

- 3 финальных тестирования

- 4 сертификата

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Анимация SVG вектора на примере

Анимация SVG вектора на примере

На этом уроке мы сделаем анимацию SVG вектора, используя jQuery плагин - Lazy Line Painter. Суть анимации состоит в постепенном прорисование любого векторного элемента на сайте, например иконки, логотипа.

Посмотрите ниже пример того, что у нас должно получиться.

Плагин будет рисовать сам, а нам останется только провести все подготовительные работы.

Скачать плагин с Github

Анимация SVG вектора на примере.

Ссылка для скачивания на Github

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

Подключить плагин к проекту

Из скачанного архива вам нужно забрать всего два файла и положить их в js папку. Затем подключить их в index.html, между тегами head и выше чем main.js.

<!—Подключить библиотеку jQuery -->
<script src="js/jquery-2.1.1.min.js"></script>
<!—Подключить плагин lazylinepainter -->
<script src="js/jquery.lazylinepainter-1.7.0.min.js"></script>

Подготовить векторное изображение


Анимация SVG вектора на примере.

Можно воспользоваться сервисом Flaticon и подобрать нужную вам иконку. Здесь важно, чтобы контуры иконки не замыкались, так как для эффекта нужны начало и конец и без заливки. Выбираем формат SVG и скачиваем.

Конвертировать иконку и вставить код

Загрузите вашу векторную картинку в конвертер, на сайте Lazy Line Painter.

Анимация SVG вектора на примере.

На выходе вы получите код с готовой анимацией, где в дальнейшем можно будет изменить разные параметры. Если в процессе конвертации, вы увидите, как анимируется ваша картинка, то значит все хорошо.

Анимация SVG вектора на примере.

Копируете код из конвертера и вставляете его в пустой файл main.js, заранее подготовленный в папке js, подключаете его в индексном файле, ниже библиотек.

<!-- Подключить lazylinepainter svgData object -->
<script src="js/main.js"></script>

Первый важный момент

Поскольку мы выносим анимацию иконки в отдельный файл main.js, то нельзя вставлять в него весь код. Прокрутите вниз и скопируйте код только до этих комментариев.

/*
Setup and Paint your lazyline!
*/

А все, что ниже вставляйте прямо в ваш index.html, между тегами script. Именно этот код и запускает анимацию рисования. Анимация не запустится, если весь код из конвертера вставить в main.js.

<script type="text/javascript">
$(document).ready(function(){
$('#undefined').lazylinepainter(
{
  "svgData": pathObj,
  "strokeWidth": 2,
  "strokeColor": "#e09b99"
}).lazylinepainter('paint');
});
</script>

Весь код из конвертера можно вставить только в index.html, но тогда файл будет слишком большим, работать с которым не удобно.

Второй важный момент

Название анимации в файле main.jsdemo

var pathObj = {
'demo' : // название вашей анимации

должно совпадать с названием в index.html передаваемого аргумента в объект.

$('#demo').lazylinepainter({
'svgData' : pathObj, // объект с инфой об SVG векторе

То же самое и касается и названия самого объекта pathObj, в обоих случаях оно должно совпадать. В противном случае анимация не сработает.

Добавить HTML / CSS код

Например, мы хотим анимировать иконку на сайте, в нужном месте в файле index.html вставляем div с id demo, где будет происходить анимация.

<div id="demo"></div>

CSS свойства вы задаете подходящие для вашего сайта, общего рецепта здесь нет.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.