<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

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

Подписавшись по 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):

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