Напоследък различни видове анимация на SVG (Scalable Vector Graphics) графики на уебсайтове и приложения станаха много популярни. Това се дължи на факта, че всичко най-новите браузъривече поддържа този формат. Ето информация за поддръжката на браузъра за SVG.

Тази статия обсъжда най-простият примерАнимирайте SVG вектори с лесно плъгин jquery Lazy Line Painter.

източник

За да изпълните и разберете напълно тази задача, основни познания по HTML, CSS, Jquery са желателни, но не са задължителни, ако просто искате да анимирате SVG) Да започваме!

И така стъпките, които трябва да следваме:

1. Създайте правилната файлова структура
2. Изтеглете и свържете приставката
3. Начертайте страхотно линейно изкуство в Adobe Illustrator
4. Преобразувайте нашата снимка в Lazy Line Converter
5. Поставете получения код в main.js
6. Добавете малко CSS на вкус

1. Създайте правилната файлова структура
Услугата Initializr ще ни помогне с това, където трябва да изберете параметрите, както е на снимката по-долу.

• Класически H5BP (HTML5 Boiler Plate)
• Няма шаблон
• Просто HTML5 Shiv
• минимизиран
• .IE класове
• Хромирана рамка
• След това щракнете върху Изтегляне!

2. Изтеглете и свържете плъгина

Тъй като initializr идва с най-новата библиотека Jquery, от архива, който трябва да изтеглим от хранилището на проекта Lazy Line Painter, само 2 файла трябва да бъдат прехвърлени към нашия проект. Първият е „jquery.lazylinepainter-1.1.min.js“ (версията на плъгина може да е различна) той се намира в корена на получената папка. Вторият е example/js/vendor/raphael-min.js.

Тези 2 файла се поставят в папката js. И ние ги включваме в нашия index.html преди main.js по този начин:

3. Начертайте страхотна контурна картина в Adobe Illustrator

1. Начертайте нашата контурна картина в Illustrator (най-лесният начин да направите това е с Pen Tool)
2. Необходимо е контурите на нашата рисунка да не се затварят, защото за нашия ефект се нуждаем от начало и край
3. Не трябва да има запълвания
4. Максималният размер на файла е 1000×1000 px, 40kb
5. Нека изрежем до границите на обекта Object>Artboards>Fit To Artboards Bounds
6. Запазване като SVG (стандартните настройки за запазване са добри)

Например, можете да използвате иконите в прикачения файл.

4. Преобразувайте нашата снимка в Lazy Line Converter
Просто плъзнете и пуснете вашата икона в полето по-долу.
Дебелината, цвета на контура и скоростта на анимацията могат да се променят в самия код, който ще се появи след конвертирането!

5. Поставете получения код в main.js
Сега просто поставете получения код в празен файл main.js
Настроики:
strokeWidth — дебелина на контура
strokeColor - цвят на контура
Можете също така да промените скоростта на рисуване на всеки вектор, като промените стойността на параметъра за продължителност (по подразбиране 600)

6. Добавете малко CSS на вкус
Премахнете абзаца от index.html

Здравей свят! Това е HTML5 Boilerplate.

И вместо него вмъкваме блок, в който ще се проведе нашата анимация

след това добавете малко CSS към файла main.css за по-хубав външен вид:

Тяло (фон:#F3B71C;) #икони (позиция: фиксирана; горе:50%; ляво:50%; поле: -300px 0 0 -400px;)

запазете всички файлове.
Сега просто отворете index.html в модерен браузър и се насладете на ефекта.

P.S. когато работи на локална машина, началото на анимацията може да се забави с няколко секунди.

Здравейте всички! Днес ще се опитам да направя описание на функциите на програмата Adobe Illustrator, сравнявайки го с възможностите на флъш. Това няма да бъде глобален анализ на програмата по кости, а по-скоро описание на някои интересни чиповекоито открих в тази програма. Събирах информация част по част, докато я изучавах, за да я събера цялата в един пост. Веднага трябва да призная, че не съм супер опитен потребител на илюстратор, само през последните шест месеца го използвах в рисуването (преди това рисувах всичко във флаш). Мнозина се оплакват, че илюстраторът е сложен, не винаги интуитивен. До известна степен съм съгласен, че след флаш тази програма е трудна. Но основното тук не е да се откажеш, а да продължиш да учиш. И след няколко седмици възниква мисълта, как се справих без него преди!

И така, какво ми хареса в илюстратора и какво открих за себе си, което не е във флаш.
1. Ще започна с най-простото, но в същото време необходимо. Опитайте се да подредите обекти в кръг във флаш. Преди беше Деко инструмент, но беше премахнат, очевидно счетен за ненужен. Решихме, че ще е по-забавно да го направим на ръка. Illustrator има тази функция: Ефект - Изкривяване и трансформиране - Трансформация.

Всичко е бързо и просто, ние сами задаваме стойностите (разстояние между обектите, брой копия) в настройките.

2. Зигзаг

Още по-просто, но все пак полезно нещо. Изглежда дреболия, но във флаш трябва да рисувате на ръка, в илюстратор това е въпрос на секунди.

3. Деформация на обекти (Warp)

Във Flash няма нищо подобно. В примера по-долу показах само 2 начина за деформиране на прости форми (Ефект - Деформация - Дъга / Риба). Всъщност има 15 от тях. последна версияпрограми.

4. Автоматично заобляне на ъгли (Round Corners)

Може да се направи ръчно: върху графичен обект, когато се избере в ъгъл (във всички ъгли), се появява бяла точка и знак със заоблена линия. Плъзнете мишката, настройте според вашия вкус.

Но това се отнася само за форми, с линия с молив малко по-различно - приложете ефекта на закръгляване ( Ефект - Стилизиране - Заоблени ъгли). На изхода получаваме същия резултат.

5. Нагрубете

Ефектът се прилага към прости форми (Ефект-Изкривяване&Трансформиране-Огрубяване). В резултат на това получаваме нещо подобно на нискополигонални 3D модели. Мисля, че е готино :) И най-важното - много просто.

6 Набръчкване и подуване(Издърпайте и надуйте)
Пример на снимката по-долу:

7. Разширение на формуляр (Offset Path)

Във флаш има функция Expand Fill (разширение за запълване), тя изобщо не работи с линии с молив, за разлика от илюстратора.

8. Четки (четка за изкуства, четка за шаблони, четка за разпръскване)
Вижте снимката по-долу за примери:

9. Четка за текстура (четки за текстура)

Има и много текстурни четки в illustrator, за които писах и как са се появили нова версиясветкавица - . Забелязано е, че използването на четки в Adobe Animate е ужасно бавно. Това е:(

10. Не съм сигурен дали това е трик, но искам да се съсредоточа върху четка със смешно име петноЧетка. Намира се в лентата с инструменти, много приятна четка за използване. Има куп настройки, харесва ми повече от обикновено. Трудно е да се обяснят ползите му с думи, по-добре е да го опитате веднъж.

10.Split to Grid

Друга полезна функция е функцията Split to Grid (Object-Path-Split to Grid).Тя ви позволява да изрежете формата на равни сегменти. Какво ни напомня това? Точно така - прозорци в многоетажна сграда. Що се отнася до мен, страхотно нещо за рисуване, например, на градски пейзажи;)

Друг полезен инструмент, въведен в illustrator, вероятно след първото му издание. С него можете да създавате например дървесни текстури:

12. Преместване (надясно - Трансформация - Преместване)

Изместване на обект на дадено разстояние. Ако желаете, можете веднага да създадете копие, което ще бъде поставено на желаното разстояние от избрания обект хоризонтално / или вертикално. По-ранна версия на flash имаше плъгин, който го правеше тази функция. За съжаление не помня името му.

Много е удобно да създавате безшевни шаблони в illustrator ( Object-Pattern-Make). Спомням си как трескаво превъзхождах във флаш със създаването на . В илюстраторската версия на CC 2015 всичко е автоматизирано, куп настройки ще ви помогнат да създадете модел в десетки варианти, само с няколко графични елемента под ръка. В по-ранните версии на програмата всичко трябваше да се прави ръчно, както във флаш досега.

(Забележка - моделът може да бъде направен като векторен редактируем обект с помощта на функцията за анализ ( Външен вид за разширяване на обекта).

14. Обектна мозайка (мозайка)

Създайте цветова палитра въз основа на съществуващо изображение. След това импортирайте снимката, която харесвате, в илюстрацията (Отворете). Обект - Създаване на обектна мозайка. В настройките определяме честотата на разделяне по височина и ширина.

И на изхода получаваме:

15. Смесване (смесване)

Използва се за създаване на градиенти. Можете да създавате преходи стъпка по стъпка, както например на снимката. Не мога да кажа, че го използвам често, но може да е полезно на някого. Струва ми се, че може да се използва за създаване на прости фонови снимки.

Инструментът може да се използва и за клониране на обекти. Поставяме два обекта на разстояние един от друг и прилагаме Blend Options, избираме броя на стъпките (броя на клонираните обекти).

16. Инструмент за изграждане на форма.Много удобно нещо за работа с примитиви. В светкавица, както ми се стори, е по-малко удобно.

Задържане на Alt и щракване върху избраните сегменти - изтриване на сегментите. Ако просто плъзнем мишката върху няколко избрани области - връзки.

Добавка - инструмент, който помага за автоматично изрязване, свързване и т.н. избрани форми. Що се отнася до мен, не е много удобно, използвам го по-често Изгражданеформаинструмент.

(артбордове)

18.Панел с персонализирани инструменти

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

Във флаш, артбордове, а именно сцени ( Сцена 1,2,3..) се намират отделно и трябва да превключвате между тях (Shift + F2). В illustrator всички те могат да бъдат позиционирани пред очите ви. Удобно е, когато правите няколко версии на един и същи чертеж, така че всички опции да са пред очите ви за сравнение.

19. Изометрични с графични стилове

И последното нещо е създаването на изометрия без използване на 1 щракване (или по-скоро 3 щраквания, защото имаме 3 страни;) с помощта на графични стилове ( Графични стилове). Как става това, ще пиша следващия път.

Това, което илюстраторът има общо с флаш, е възможността да запише обект в символ (символ) и този символ може също да бъде прехвърлен на флаш без проблеми (отворете .ai файл във флаш, от Импортиране - Импортиране на сцената).
Символът в illustrator има същите свойства като във flash.
И накрая ще напиша какво в илюстратора според мен е по-лошо от флаш. Да, да, и има. И това е инструментът за запълване ( кофа с боя). Колкото и да се опитвам да свикна в illa, във флаш е по-удобно.
Ако моите бележки са ви били полезни или искате да добавите нещо сами - добре дошли в коментарите! Успех на всички ;)

Файловият формат Flash (SWF) се основава на векторни графикии е предназначен за мащабируема, компактна графика за уеб. Тъй като този файлов формат е базиран на векторна графика, обектът запазва качеството на изображението при всяка резолюция и е идеален за създаване на анимационни рамки. В Illustrator можете да създавате отделни рамки за анимация върху слоеве и след това да експортирате слоевете с изображения като отделни рамки за използване в уебсайта. Можете също така да определите символивъв файл на Illustrator, за да намалите размера на анимацията. Когато се експортира, всеки символ се дефинира само веднъж в SWF файла.

Команда за експортиране (SWF)

Осигурява най-голям контрол върху анимацията и битовата компресия.

Осигурява повече контрол върху комбинацията от SWF и растерни формати във фрагментирано оформление. Тази команда предлага по-малко опции за изображения от командата Експортиране (SWF), но използва най-скоро използваните опции за команда Експортиране (вижте ).

Имайте предвид следните насоки, когато подготвяте обект за запис като SWF.

Използвайте приложението Device Central, за да видите как ще изглежда графика на Illustrator в приложението Flash Playerна различни преносими устройства.

Вмъкване на графика на Illustrator

Графичен обект, създаден в Illustrator, може бързо, лесно и лесно да бъде копиран и поставен във Flash приложение.

Когато поставите графика на Illustrator във Flash приложение, следните атрибути се запазват.

Контури и форми

• Дебелина на удара

  Дефиниции на градиенти

  Текст (включително OpenType шрифтове)

  Свързани изображения

• Режими на смесване

Освен това Illustrator и Flash поддържат следните функции при поставяне на графика.

Когато избирате слоеве в произведение на Illustrator Най-високо нивоИзцяло и поставянето им във Flash приложение, слоевете и техните свойства (видимост и блокиране) се запазват.

Цветните формати на Illustrator, различни от RGB (CMYK, сива скала и потребителски формати), се преобразуват от Flash в RGB. RGB цветовете се вмъкват по обичайния начин.

Когато импортирате или поставяте произведения на изкуството на Illustrator, можете да използвате различни опции за запазване на определени ефекти (като сянка, хвърлена от текст) като Flash филтри.

Flash запазва маските на Illustrator.

Експортирайте SWF файлове от Illustrator

SWF файловете, експортирани от Illustrator, са със същото качество и компресия като SWF файловете, експортирани от Flash.

Когато експортирате, можете да избирате от различни предварително дефинирани стилове за оптимален изход и да укажете как се използват множество артбордове, как се преобразуват символи, слоеве, текст и маски. Например, можете да изберете да експортирате символи на Illustrator като филми или графични изображения, както и създаване на SWF символи от слоеве на Illustrator.

Импортиране Файлове на Illustratorкъм приложението Flash

За да създадете цялостно оформление в Illustrator и след това да го импортирате във Flash с една стъпка, можете да запишете вашето произведение на изкуството в естествен (AI) формат на Illustrator и да го импортирате с висока прецизност във Flash, като използвате командите File > Import To Workspace. area" или " Файл" > "Импортиране в библиотека".

Ако файлът на Illustrator съдържа няколко артборда, изберете артборда за импортиране от диалоговия прозорец за импортиране на Flash и задайте настройките за всеки слой в този артборд. Всички обекти в избрания артборд се импортират във Flash като един слой. Когато импортирате друг артборд от същия AI файл, обектите от този артборд се импортират във Flash като нов слой.

Когато импортирате произведение на изкуството на Illustrator като AI, EPS или PDF файлове, Flash запазва същите атрибути, както когато поставите произведение на изкуството на Illustrator. Също така, ако файлът на Illustrator, който импортирате, съдържа слоеве, можете да ги импортирате, като използвате един от следните методи.

Преобразувайте слоеве на Illustrator във Flash слоеве.

Преобразувайте слоеве на Illustrator във Flash рамки.

Преобразувайте всички слоеве на Illustrator в един Flash слой.

Adobe Illustrator и след ефекти
Импортиране и проста анимация

Здравейте. Днес преглеждаме проста анимация в After Effects.

Ресурси: Adobe Illustrator CC
Adobe After Effects CC

Нека започнем с рисуване в Illustrator.

Рисуваме
1) Начертайте жълт правоъгълник като фон

Фигура 1 - Правоъгълник

2) Начертайте кръг и го запълнете с градиент
Нека поработим малко върху кръга:
- премахваме долната точка на контура, получаваме дъга;
- начертайте права линия, затваряйки дъното на дъгата, получаваме полукръг

Фигура 2 - 1) начертайте кръг; 2) градиент; 3) точка за изтриване

3) Начертайте правоъгълник и го копирайте
- един сив правоъгълник;
- друг тъмно сив правоъгълник
4) Начертайте триъгълник от звездичка, като зададете броя на лъчите - 3

Фигура 3 - 1) правоъгълна светлина; 2) прав тъмен; 3)триъгълник

5) Нарисувайте котка с писалка и прости форми

Фигура 4 - 1) глава; 2) врат; 3) тяло; 4) крак; 5) опашка

И сега най-много ОСНОВЕНмомент
Нека разпределим снимките на слоеве (какво ще бъде анимирано - на отделен слой) по следния начин:

Фигура 5 - всички снимки (маркирайте с червено важните слоеве)

Всичко, сега спестяваме.
Да видим настройките за запазване

Фигура 6 - Запазване

И сега следващият етап. БлизоAdobe Illustrator и отворете After Effects.

Импортиране в After Effects
Файл - Импортиране - Файл - изберете нашия запазен файлИлюстратор.
Нека изберем да импортираме слоеве от Illustrator, ако поставим кадри, ще получим изображение с обединени слоеве, но това не ни трябва.

Фигура 7 - Импортиране като композиция

Всички вносни.
Сега да видим какво имаме. Кликнете два пъти върху композицията , какво ще се отвори и ще видим слоевете (ако всичко е направено правилно, ще има няколко слоя). Разбрахме това, вижте снимката

Фигура 8 - Отворена композиция

И сега това, за което сме тук днес - Анимация.

Анимация в след ефекти
Задайте точката на въртене в горната част на стрелката с помощта на Pan Behind Tool ( клавиш за бърз достъп- Y). Просто вземете точка и я преместете, където искате. В резултат на това ще изглежда така..

Фигура 9 - Пан инструмент и слоеве

Това е всичко, сега нека да преминем към слоевете за анимация.
Имаме нужда от слой Arrow и Head_cat.
Да започнем със стрелка.
Разширете списъка, намерете и щракнете върху часовника. Така че поставяме първата точка на нула секунда. Общо анимацията ще продължи 2 секунди.
И така, това са настройките, които трябва да направите (ще поставим общо 3 точки)

Второ	0	1	2
	+66	- 70	+66

Ето как ще изглежда:

Фигура 10 - Стрелка за въртене

Сега нека анимираме главата на котката.
Разгънете head_cat и намерете позиция.
Ще има 4 точки.
Ще промени само последната координата, без да докосва останалите.

Второ	0.1	0.17	1.12	2.0
позиция	689.3	729.3	729.3	689.3

Нека погледнем снимката.

Фигура 11 - Позиционна глава

И така, принципът на анимацията беше такъв. Стрелата се люлее от една страна на друга, веднага щом се приближи до котето, тя привлича главата си в себе си, задържа се в това положение за малко и след това я връща на мястото си.

Крайният етап

производство
Трябва да създадете завършен продукт от работата си.
Да отидем в менюто Добавяне към опашката за рендиране
Панелът Render се отваря и в Output Module (две щраквания) изберете изходния формат. Взех *.mov

Фигура 12 - Рендиране

Кликнете върху бутона RENDER и получете резултата (не забравяйте да посочите пътя).
Това е всичко.

Днес имаме не съвсем обичайното Adobe урокИлюстратор. Защото този път няма да правим статична картина, а истинска анимация. Представете си, че се оказва помощ от AdobeИлюстраторът може да рисува и карикатури :)

И не ни трябва нищо за това. Компетентна организация на слоевете и експортиране на крайната работа в swf формат, където всеки слой се преобразува в рамка за анимация. В днешния урок ще нарисуваме анимация за обратно броене в стил ретро филм. Резултатът трябва да бъде флаш филм със същото обратно броене.

Първото нещо, което трябва да направите, е да нарисувате всичко необходими елементиза бъдеща анимация. За да направя това, направих две позиции на филмовата рамка в отделен документ, кръг за справка, който е нарязан на отделни сектори, текстура и вертикален скреч за добавяне на ефекта на античността, както и всички цифри и надписи.

Когато всички части на нашия анимационен филм са готови, можете да започнете да създавате самата анимация. За удобство това е най-добре да се направи в нов документ. В този случай слоевете ще играят ролята на рамки за анимация. И в първия слой просто трябва да копирате рамката на филма. Поставете го в средата на работната зона.

Сега създайте втори слой и копирайте рамката на филма в него, в която дупките по краищата са направени с изместване. Той също трябва да бъде центриран.

От тези два слоя вече можете да получите анимацията на движещ се филм. Но по-късно ще ни трябват много повече слоеве. Така че изберете първите два слоя, отидете на опциите на панела и направете копие на слоевете.

По подобен начин трябва да натрупаме 12 слоя с филмови рамки, които определят неговото движение.

Сега имаме цял куп слоеве и всички те са видими. В смисъл, че горните слоеве блокират долните, което не е много удобно за работа. Следователно можете да изключите някои слоеве, като щракнете върху иконата на око вляво от името на слоя. За да изключите или включите всички слоеве наведнъж, задръжте натиснат клавиша Alt, докато щракнете върху иконата на око. Включвайки и изключвайки слоевете, можете да видите точно какво се намира в определена рамка от нашата бъдеща анимация. И сега, за да добавим леко разклащане към движението на филма, трябва леко да преместим получените кадри в различни посоки. За да направите това, включете само слоя, с който ще работите този моменти след това преместете рамката с няколко пиксела от двете страни.

Когато сте преминали през всички слоеве и сте добавили малко отместване, можете да започнете да създавате анимацията на движещия се кръг. За да направите това, копирайте кръга, състоящ се от сектори, от документа с части от карикатура и го поставете върху първия слой върху рамката на филма.

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

Но тъй като се състои от отделни сектори, е възможно чрез промяна на цвета им да се създаде анимация много бързо и лесно. За да направите това, копирайте този кръг на втория слой и направете първия сектор по-светъл. Спомняте си, че филмът се тресе по време на движение, така че не е необходимо да поставяте кръга точно в центъра на рамката. Поставете го върху окото.

По същия начин трябва да копирате кръга на всеки следващ слой, докато рисувате с по-светъл цвят един сектор повече от предишния път. Заедно тези 12 слоя образуват анимация на движението на филма със запълващ кръг.

След това трябва да добавим текстура към нашите слоеве. Включете първия слой и копирайте текстурата от там. изходен файлс резервни части.

След това включете следващите слоеве на свой ред и копирайте същата текстура там. За да изглежда различно на всеки кадър, просто го завъртете на 90 градуса. Както може би се досещате, трябва да добавим текстура към всичките 12 кадъра.

Ако вече сте доста уморени от копиране, тогава мога да ви зарадвам - остана много малко. Най-трудното свърши. Остава да добавите вертикални драскотини и почти всичко. За да направите това, отново копирайте оригиналната драскотина и я поставете на произволно място на няколко слоя. В моя случай драскотините се появяват само на два слоя.

Сега, когато основният цикъл с филмовата анимация е готов, остава да добавим числата. Тъй като броим от 3 до 1 плюс думата Go!!!, имаме нужда от още повече слоеве. Не 12, а цели 48. За да направите това, трябва да направите още три копия на готови слоеве с филмова анимация.

И тогава всичко е просто. Включете първия слой и поставете числото три там.

След това трябва да копирате тази фигура на следващите слоеве, докато анимацията на кръга приключи. Когато стигнете до следващото копие на слоевете, където кръгът отново ще бъде напълно запълнен, трябва да поставите номер две. По същия начин копирайте числото едно в желаните слоеве. И когато стигнете до финалните слоеве за етикета Go!!!, просто изтрийте кръга, преди да копирате етикета върху желания слой.

Това е всичко с анимацията. Основното тук е да не се объркате. Можете да дадете на слоевете някои удобни имена, но някак си бях твърде мързелив :) И все пак, когато сте готови, не забравяйте да включите отново всички слоеве, като щракнете върху иконата на окото.

В прозореца с настройки за експортиране не забравяйте да зададете Експортиране като: AI слоеве към SWF рамки. Именно тази опция превръща слоевете на Illustrator в рамки за анимация. След това щракнете върху бутона Разширени.

Ще отвори допълнителни настройки. Тук трябва да зададете честотата на кадрите. Имам 12 кадъра в секунда. Квадратчето Looping отговаря за цикъла на анимацията. Благодарение на нея видеото ще се възпроизвежда в кръг. А опцията Layer Order: Bottom Up изобразява слоевете на илюстратора отдолу нагоре в панела. Точно така изградихме нашата анимация.

В резултат на това получаваме флаш филм с нашата анимация.

Сега виждате, че създаването на проста анимация в Adobe Illustrator не е толкова трудно, колкото изглежда на пръв поглед.

Но за създаване на дълги видеоклипове или интерактивни приложения все още е по-добре да се използва Adobe Flashили други флаш редактори. Например, направих тази котка в стар Macromedia Flash, който изрових на работа.

Освен това напоследък HTML5 и CSS3 се използват все по-често за създаване на анимация. Даден кодподдържан модерни браузърии не изисква използването на флаш плеър.

Римски известен още като dacascasособено за блога

Абонирайте се за нашия бюлетин, за да не пропуснете нищо ново: