<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

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

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

Подпишитесь на мой канал на 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):

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