Как да създадете VueConf Load Animation (докато научавате за Vue.js и SVG в процеса)

Наскоро Vue.js пусна нова целева страница за VueConf 2017, която включваше хубава анимация. Какво ще кажете да направим тази анимация и да научите повече за Vue.js и SVG файлове?

В какво се захващате: Как да направите анимацията на целевата страница за VueConf 2017. По-конкретно, ще премина през процеса на създаване на SVG, разбиване на анимацията, използване на CSS анимации за репликация на анимацията и контрол приложението / времето на анимации с помощта на Vue.js. Той е много дълъг и детайлен. Препоръчвам да направите това на парчета, ако е необходимо. Можете да използвате Pocket, за да запазите лесно тази статия за по-късно, за да не забравите да се върнете към нея.

(Актуализация 3/27/17): Започнах процеса на създаване на видео курс за осигуряване на много ясна и подробна разбивка на SVG. Ще разгледам обяснението на SVG „под капака“, използвайки Affinity Designer за създаване на подробна векторна графика, анимация с CSS, GreenSock, Mo.js и Anime.js, както и някои практически приложения на UX анимации. Можете да резервирате достъп тук.

Крайна демонстрация / код: http://codepen.io/mikemang/pen/JWNOrr/

Историята

Този урок е особено възхитителен за мен, защото Vue.js е това, което ме спаси от синдрома на самозванеца.

След като завърших специалност „Компютърни науки“, нямах представа какво искам да правя в света на развитието и все още не се чувствах уверен в способностите си, какъвто и да е участък. Бързо потънах в синдром на самозванеца. Точно преди да завърша обаче, бях запознат с онлайн бизнеса, предприемачеството и стартъпите чрез подкаст, наречен Smart Pasive Income Podcast от Pat Flynn.

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

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

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

Докато учех React, аз също се захващах наистина да създавам векторна графика с Affinity Designer. Правенето на векторна графика започна като забавна психическа почивка от стресиращата подкрепа за работа от 9 до 5, докато знаех, че искам да бъда уеб разработчик и предприемач, и не правех нито едно.

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

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

След известно експериментиране и самообучение с чисти CSS изображения, SVG и правене на уебсайтове с Bootstrap, в крайна сметка попаднах на Vue.js. Vue.js беше още един глътка свеж въздух. Открих, че е толкова лесно да обвия главата си. Това беше достъпно, четимо и по-малко плашещо от всичко, на което се натъкнах, докато научих уеб разработка.

Започнах да сдвоявам Vue.js с преден акцент върху дизайна. Направих мини-приложения като Pokemon battle app, приложение Mad Libs, часовник Pomodoro и други. Също така използвах Vue.js за да поръся анимации и други много специфични умения. Страхотната част за Vue.js е, че тя може да се използва от нещо толкова конкретно като анимации до толкова широки, колкото динамични уеб приложения.

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

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

Имайки предвид тази история, нямаше как да не се усмихвам, когато видях тази страхотна анимация на целевата страница на VueConf, направена от Дамян Дулис.

Vue.js е една от основните причини, че завладях синдрома на самозванеца, придобих увереността да се справям с нови предизвикателства като анимации и създадох Coding Artist. Сега имам възможността да напиша обширно ръководство за създаване на анимацията, използвана на тяхната нова целева страница за VueConf. Както споменахме по-рано, доста се радвам да направя този урок.

Освен това се надявам този урок да е още едно практическо ръководство за това как да използвате SVG, анимации и Vue.js в реални приложения. Това наистина е продаваемо умение, което е 100% ок, за да насочите по-голямата част от вниманието си върху.

С всичко казано, нека да стигнем до него

Разрушаване на проблема

Когато за пръв път започнах да виждам използването на SVG и анимации като тази, която преглеждаме в тази публикация, имах реакцията на „О, това е готино! Просто ми се иска да имам представа как да направя това. "

След като отделих време за учене, разбрах, че да правиш анимация като тази не е много трудно, ако можеш правилно да разбиеш проблема. Така че, нека да направим това

Ето какво трябва да разделим в най-широкия / най-очевидния смисъл:

  1. Как да създадете графика
  2. Как да създадете анимации

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

Какво трябва да направим, за да създадем графиката:

  1. Разбийте какви графики трябва да създадем
  2. Разбийте формите, които съставят всяка графика
  3. Създайте фигурите, за да оформите всяка графика като векторна графика с помощта на инструмент като Illustrator, Sketch или Affinity Designer (ще използвам последния)
  4. Оптимизирайте изображенията за експортиране
  5. Експортирайте изображения като SVG файлове
  6. Импортирайте SVG файловете и добавете малко стилизиране, за да подредите графиките в положението, в което ще бъдат в края на анимацията

Какво трябва да направим, за да създадем анимациите:

  1. Забавете цялата анимация
  2. Определете анимациите за всяка конкретна графика в нетехнически смисъл
  3. Напишете CSS анимациите, за да направите анимациите, които сме определили в стъпка 2
  4. Разберете как да се справите с организирането на анимациите, като използвате Vue.js

Забележка: Графиката ще бъде направена с помощта на Affinity Designer и ние ще кодираме това чрез Codepen.

Крайна демонстрация / код: http://codepen.io/mikemang/pen/JWNOrr/

Разбиване на графиката, която трябва да създадем

Като добро упражнение, опитайте се да видите дали можете да определите какви графики трябва да направим и какви форми ще формират всяка графика. Наложете това и тогава ще го преодолеем.

VueConf лого

Логото на VueConf е логото на Vue.js с главата надолу. Оказва се, че погледът отвън надолу може да улесни виждането от какви форми се нуждаем.

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

слънце

Слънчевата графика е много лесна. Това е два кръга един върху друг: един по-малък бял кръг и един по-голям зелен кръг.

храст

Бушът също е много прост. Това е два кръга: един по-голям зелен кръг и един по-малък зелен кръг, който е от дясната страна на по-големия кръг.

Дървета

Дърветата продължават модела на простота. Лявото дърво е синя линия, по-голям зелен кръг и по-малък зелен кръг отгоре. Правилното дърво е само синя линия и голям кръг.

Заглавие

За кратко време няма да правя заглавието в този урок.

Създаване на графика

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

Ще използвам Affinity Designer за този урок, но бихте могли да използвате Sketch, Adobe Illustrator или Inkscape. Affinity Designer е най-евтината от платените опции на $ 50 и моят личен фаворит, но всеки ще го направи. Inkscape е безплатен, но ограничен.

Когато сте готови, нека започнем

VueConf лого

Нека започнем с това да направим по-големия външен триъгълник.

В Affinity Designer мога да избера инструмента за триъгълник така:

Издърпайте голям триъгълник и актуализирайте цвета, като използвате този шестнадесетичен код за зеления цвят:

# 41B883

Сега имаме:

След това можете или да изтеглите друг триъгълник, за да бъде малко по-малък, или можете да дублирате с помощта на CMD + J и да промените размера, като плъзнете ъгъл, докато държите SHIFT. (Можете да видите всички преки пътища тук)

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

Ето синия цвят:

# 35495E

Трябва да завършим със следното:

Можем да повторим, за да добавим по-малък бял триъгълник. Ето шестнадесетичния код:

#FFFFFF

Сега имаме цялото лого.

Сега искаме да оптимизираме логото си за това кога ще го експортираме.

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

Ето клип на тази концепция в действие:

След това натиснете CMD + G (или Layer → Group), за да групирате тези форми, които сме избрали.

След това разгледайте раздела слоеве от дясната страна на екрана:

Виждаме, че сме групирали нашите слоеве / форми. След това задръжте курсора на мишката върху (Група), щракнете двукратно и посочете това „Лого на VueConf“.

За добра практика нека също разгърнем групата:

Сега назовете всеки триъгълник със следния синтаксис:

VueConf Триъгълник [Цвят]

Сега трябва да имаме:

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

Това ще има по-голям смисъл, когато изследваме SVG кода и го импортираме в нашия Codepen проект.

За сега нека повторим всички тези стъпки за другите ни графики.

слънце

Слънцето трябва да е наистина лесно.

С помощта на инструмента за елипса (кръг) можем да издърпаме по-голям зелен кръг.

След това можете да дублирате и преоразмерите или издърпате друг по-малък бял кръг.

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

Ето видео на тази концепция в действие:

Отново ето нужните цветове:

// зелено
# 41B883
// бяло
#FFFFFF

Сега трябва да имаме:

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

Последната стъпка е отново да групирате и да назовите всяка форма:

храст

Издърпайте зелен кръг. След това създайте още един зелен кръг в предпочитания от вас метод.

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

Зелен цвят:

# 41B883

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

Сега би трябвало да сте в края на този процес.

Дървета

Първото дърво, дърво отляво, може да бъде направено, като първо плъзнете тънък син правоъгълник / линия.

Син цвят:

# 35495E

След това дублирайте тази форма (CMD + G) и задръжте смяна, докато я влачите вдясно. Задържането на смяна ще запази същото вертикално позициониране.

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

Зелен цвят:

# 41B883

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

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

Експортиране като SVG файлове

Следващата стъпка е да експортирате всяка графика като SVG файл.

За да направите това, просто щракнете върху графика, отидете на Файл → Експорт. След това изберете иконата SVG и изберете „Избор без фон“ в Област. Натиснете Експорт.

Запишете файла, назовавайки го локално [графично име] .svg (т.е. Bush.svg).

Подготовка за импортиране

Отворете този шаблон и го разклонете: http://codepen.io/mikemang/pen/f8f28ae6adcc716d097a07a2bfb2d00d

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

Импортиране на SVG

(Актуализация 3/27/2017): Препоръчвам да използвате SVGOMG вместо метода, който описвам по-долу, за да оптимизирате SVG файловете и да получите SVG кода.

Със запазените SVG файлове следващата стъпка е да ги импортирате в нашия Codepen проект.

Първо, трябва да получим SVG кода.

За целта можем да плъзнем SVG файловете в раздел Chrome. Ето клип на това в действие:

Да започнем с раздела VueConfLogo.svg.

Щракнете с десния бутон върху изображението и изберете Преглед на източника на страницата.

Сега виждаме SVG кода, от който се нуждаем:

Просто ни трябва това:

VueConf лого

 < g id = "VueConf-Logo">     

Просто ще предоставя SVG кодовете за останалата част от нашата графика.

слънце

 < g id = "Sun">  < ellipse id = "Sun-Circle-Green" cx = "44.28" cy = "43.2" rx = "26.88" ry = "26.224" style = "fill: #fff;" />  

храст

     

Дърво отляво

      

Дърво надясно

     

Нека разопаковаме нашия SVG код на Tree Right, за да разберем какво означава този код.

Накратко, целият SVG маркер е една графика / изображение. В рамките на изображението имаше различни форми, които бяха създадени да образуват това изображение. В този SVG маркер имаме други тагове, които са код за създадените фигури.

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

Погледнете отново и забележете как елипсата и правоъгълника над hasvean id с името, което посочихме:

Именувайки това преди експортиране, ние знаем до какви форми се отнасят тези маркери.

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

Доста готин, а ?!

Напред, нека добавим тези SVG маркери в Codepen.

Започнете с логото на VueConf логото и го поставете точно под

. Премахнете стойностите на височината и ширината в началото на SVG тага и добавете класа vueconf-лого.

     

Сега логото е точно в центъра на контейнера. Обикновено трябва да добавите размера и позицията за класа, на който сте дали SVG кода. Все пак вече съм написал класовете за вас в шаблона.

Повторете това, което току-що направихме, но не забравяйте да използвате подходящото име на клас:

слънце
храст
дърво вляво
дърво десен

Когато приключи, вече разполагаме с графиката на правилните места:

Сега е време да добавите анимация.

Разрушаване на анимацията

За да улесним нещата, забавих анимацията 8x, за да можем да добием добра представа как работи.

Гледайте видеоклипа и запишете какво правят анимациите по нетехнически начин. Искате да потърсите анимацията, както и времето на различните анимации за всяка форма във всяка графика.

Ето моите бележки:

VueConf лого

Плъзга се надолу от горната част на екрана и е хоризонтално центрирано, пада надолу точно покрай вертикалната и хоризонталната централна точка и отскача нагоре по-високо.

Обръща на 180 градуса.

слънце

Не се премести от екрана.

Расте и свива.

храст

Не се премести от екрана.

Буш кръг отляво расте и се свива.

Буш кръгът надясно започва да расте, когато Буш кръгът наляво напълно расте и след това се свива.

Дърво отляво

Дървото на лявата основа расте вертикално, след това Дървото на лявото кръгче се ражда.

Дървото отляво в кръг расте и се свива. Когато завърши, левият кръг на дървото се появява, расте и се свива.

Дърво надясно

Дървото на дясната основа расте вертикално, след това Дървото надясно кръг се ражда.

Дървото надясно кръг расте и се свива.

Сега трябва да си направим бележки за времето, когато всяка графика се ражда в сравнение с останалите графики. (т.е. Дървото на лявата база ражда веднага след завъртане на логото на VueConf)

Ето моите бележки:

VueConf Logo завършва.

Дървото Left Base ражда и започва да расте.

Веднага след като дървото Leve Base напълно расте, Tree Right Base ражда и започва да расте.

Когато дясната основа на дървото напълно расте, Буш кръгът отляво се ражда и расте.

Слънцето ражда и започва да расте, когато Tree Right е завършен.

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

Писане на CSS анимации

(Актуализация 3/27/17): Защо използвам CSS анимации, а не анимационна библиотека като GreenSock? Накратко, CSS анимациите са по-лесни за започване на работа с анимации. Не искам да въвеждам външна библиотека в публикация в блог, която вече е много подробна. Въпреки това бих препоръчал GreenSock за всеки, който се чувства удобно как работи анимацията в CSS. Можете да резервирате достъп тук за видео курс, който ще пусна, обхващайки CSS, GreenSock, Mo.js и Anime.js анимации със SVG.

VueConf лого

За да започнем, трябва да завършим анимацията за логото на VueConf, за да направим това, което имахме в бележките си:

// 1
Плъзга се надолу от горната част на екрана, пада надолу точно покрай вертикалната и хоризонталната централна точка и отскача нагоре по-нагоре.
// 2
Обръща на 180 градуса.

Ще напишем две различни анимации.

Първата част можем да наречем slideInBounce. Ето черупката:

@keyframes slideInBounce {

}

Сега трябва да добавим промени в CSS свойствата в конкретни точки от анимацията.

@keyframes slideInBounce {

0% {
    отгоре: -100%;
  }
 70% {
    отгоре: 33%;
  }
  100% {
    отгоре: 25%;
  }
}

Тук определяме, че при 0% от анимацията логото на VueConf ще бъде над контейнера. При 70% от анимацията искаме тя да е малко по-ниска от крайната й позиция. Това създава ефекта на отскачане, тъй като при 100% от анимацията тя ще се върне на върха 0f 25%, което е разположено в центъра на нашия контейнер.

Трябва да добавим още един ред във всяка от тези точки.

В оригиналната анимация логото на VueConf влиза с главата надолу от позицията си за почивка. Следователно логото влиза във вече обърнато и следващата ни анимация ще върне логото обратно към нормалното.

Ние преобръщаме логото нагоре с помощта на transform: rotate (-180deg).

@keyframes slideInBounce {
  0% {
    трансформация: завъртане (-180deg);
    отгоре: -100%;
  }
 70% {
    трансформация: завъртане (-180deg);
    отгоре: 33%;
  }
  100% {
    трансформация: завъртане (-180deg);
    отгоре: 25%;
  }
}

Използването на отрицателното ще има смисъл, след като можем да видим това в действие.

За да стартираме тази анимация, трябва да добавим декларация за анимация в класа на лого на vueconf.

.vueconf-logo {
позиция: абсолютна;
височина: 50%;
ширина: 50%;
отгоре: 25%;
вляво: 25%;
анимация: slideInBounce 1s 1;
}

Ето, имаме три части от изявлението за анимация.

  1. Името на анимацията (slideInBounce)
  2. Продължителността на анимацията (1s)
  3. Броят повторения (1)

Сега трябва да видим как работи анимацията.

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

@keyframes flip {
  0% {
    трансформация: завъртане (-180deg);
  }
  100% {
    трансформация: завъртане (0deg);
  }
}

Дефинираме анимацията точно като предишната. Тук искаме да направим само една промяна от 0% до 100%. Искаме логото да се завърти на 180 градуса от -180 градуса до 0 градуса.

След това можем да добавим още едно анимационно изявление към vueconf-logo:

.vueconf-logo {
позиция: абсолютна;
височина: 50%;
ширина: 50%;
отгоре: 25%;
вляво: 25%;
анимация: slideInBounce 1s 1,
флип 0,5s 1s 1;
}

Като добавим запетая към предишното изявление, можем да веригираме още едно.

Ние наричаме нашия анимационен флип за продължителност 0,5 секунди. 1s се отнася до забавянето на анимацията.

Нека помислим за това.

В момента имаме две изявления за анимация. Ние обаче искаме да стартираме flip, след като slideInBounce завърши. Ако slideInBounce продължи 1 секунда, тогава флипът трябва да бъде отложен 1 сек.

И накрая, отново уточнихме повторение на 1.

Вече сме готови с логото на VueConf.

Дърво отляво

Дърво лява основа

Първо, нека да прегледаме бележките си:

Дървото на лявата основа расте вертикално, след това Дървото на лявото кръгче се ражда.

Тъй като всяка друга графика изчаква логото на VueConf да се попълни, преди да се появи, трябва да се подхожда по различен начин.

Има начини, по които можем да се придържаме само към CSS анимации, но можем да използваме и Vue.js, което изглежда подходящо.

Преди да добавим да започнем да правим кода си Vue.js, нека да обобщим как ще трябва да боравим с анимациите на Tree Left, тъй като трябва да изчакаме да завърши логото на VueConf.

  1. Ще използваме условното изобразяване на Vue, така че левата основа на дървото, дървото отляво и отляво в кръг ще се изобразява само ако флагът е зададен на истина
  2. Флагът, контролиращ изобразяването на левата база на дърво, ще бъде зададен на истина след 2 секунди, за да изчака логото на VueConf да приключи.
  3. Използвайки свързване на класове, Tree Left Base ще се появява и ще расте вертикално, докато анимацията не е завършена.
  4. Използвайки същите техники, Tree Left Circle Bottom ще се появи, когато Tree Left Base попълни и ще има анимация на растеж и свиване.
  5. След това ще направим същото с Tree Left Circle Top, с изключение на това, че ще започне след завършване на дъното с ляв кръг.

Нека започнем с добавяне на черупката на нов екземпляр Vue, наречен приложение. Вече включих скрипта Vue.js в шаблона.

var app = нов Vue ({
  el: "#app",
  данни: {
    
  }
  методи: {
    
  }
})

Сега, нека добавим div с идентификатор на приложението, за да можем да установим комуникация между нашия HTML и този екземпляр Vue.

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

var app = нов Vue ({
  el: "#app",
  данни: {
    showTreeLeftBase: невярно,
    showTreeLeftCircleBottom: невярно,
    showTreeLeftCircleTop: false
  }
  методи: {
    
  }
})

Ние задаваме всички тези флагове на false, тъй като искаме всяка форма да не се показва по подразбиране.

След това просто трябва да добавим v-if = “[име на флаг]” за всяка фигура в нашия HTML, така че да направим връзката с инстанцията Vue, за да превърнем формата условно.

 
  

Вече не можем да видим Дървото отляво по план.

Страхотно!

Следващата стъпка е да добавите логиката, за да настроите showTreeLeftBase на true след 2 секунди (когато логото на VueConf завърши). За целта ще използваме куките за жизнения цикъл на Vue.

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

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

За целта добавяме следния жизнен цикъл:

var app = нов Vue ({
  el: "#app",
  данни: {
    showTreeLeftBase: невярно,
    showTreeLeftCircleBottom: невярно,
    showTreeLeftCircleTop: false
  }
  методи: {
    
  }
  създаден () {
    // извика функция, която ще настрои setTreeLeftBase на true
  }
})

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

Нека направим функция, наречена toggleTreeLeftBase и добавете обаждането в създадения жизнен цикъл:

var app = нов Vue ({
  el: "#app",
  данни: {
    showTreeLeftBase: невярно,
    showTreeLeftCircleBottom: невярно,
    showTreeLeftCircleTop: false
  }
  методи: {
    toggleTreeLeftBase: function () {
      
    }
  }
  създаден () {
    this.toggleTreeLeftBase ()
  }
})

На следващо място, нека добавим реда, който задава setTreeLeftBase в true в тази нова функция.

var app = нов Vue ({
  el: "#app",
  данни: {
    showTreeLeftBase: невярно,
    showTreeLeftCircleBottom: невярно,
    showTreeLeftCircleTop: false
  }
  методи: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
    }
  }
  създаден () {
    this.toggleTreeLeftBase ()
  }
})

Левата ни база на дърветата вече се появява.

След това трябва да добавим логиката, така че функцията да не бъде извикана, докато минават 2 секунди след създадения жизнен цикъл, тъй като логото на VueConf трябва да завърши.

Можем да използваме setTimeout за това така:

създаден () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    }, 2000 г.)
  }

Забележка: това може да изглежда като странен синтаксис, тъй като е ES6 (съвременен синтаксис на JavaScrip). „() =>“ Е просто стенограма за „функция ()“.

setTimeout работи, за да забави кода в него. В нашия случай this.toggleTreeLeftBase () ще бъде наречен 2000 милисекунди (2 секунди) след създаването, което ни дава 2 секундно закъснение, за да оставим логото на VueConf да завърши.

Вече можем да видим Tree Left Base хайвера след логото на VueConf.

Сладка!

Искаме обаче Tree Left Base да има анимация. Vue предоставя няколко начина, по които можем да направим това. Една от възможностите е да използваме преходни ефекти, които ни позволяват да зададем CSS анимация, когато се появи нещо, което е условно изобразено. Говоря за това с подробни подробности в моя видео курс. Това е по-добрият вариант, но мисля, че е по-лесно да отидем с другия ни вариант, тъй като в тази публикация вече има много за смилане.

Втората опция, която ще използваме е обвързването на класа с Vue.js. Използвайки свързване на класове, можем динамично да контролираме кои класове или класове в момента са активни на div в нашия HTML.

Ето какво трябва да направим, за да работим по този начин:

  1. Напишете клас, че анимация, която ще има основа на Дърво ляво, расте вертикално в една итерация.
  2. В същата функция, където създаваме лявата база на Tree, ще добавим класа с анимация, който да бъде активен в div div на Tree Left Base.

Правейки това, ще получим анимацията, от която се нуждаем.

Първо, нека напишем обвивката на класа, която ще извика анимация. Можем да го наречем rasteActive.

.growActive {
  
}

Второ, нека да определим обвивката на анимация, която ще наречем расте.

@keyframes растат {
  
}

Искаме левата основа на дървото да расте вертикално, така че от 0% в анимацията до 100% в анимацията, трябва да променим височината от 0% на 100%.

@keyframes растат {
  0% {
    височина: 0%;
  }
  100% {
    височина: 100%;
  }
}

На следващо място, можем да добавим анимационното изявление в rasteActive, за да извикаме тази анимация веднъж. растеж трябва да работи веднъж за 0,5 секунди, така че правим:

.growActive {
  анимация: растат 0,5s 1;
}

Сега, нека да кажем на нашия HTML, че искаме нашата инстанция Vue да контролира активния клас. Ще използваме v-bind: class.

В кода по-горе добавихме v-bind: class = ”TreeLeftBaseClass” към тага за формата за нашата лева база от дърво, намерена в SVG кода за Tree Left. Сега класът, който е активен в тази форма, ще бъде определен от данните в нашия Vue инстанция, наречен treeLeftBaseClass, които трябва да определим.

var app = нов Vue ({
  el: "#app",
  данни: {
    showTreeLeftBase: невярно,
    showTreeLeftCircleBottom: невярно,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: ""
  }
  методи: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
    }
  }
  създаден () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    }, 2000 г.)
  }
})

Сега, нашата Tree Left Base има клас, който се контролира от treeLeftBaseClass в нашия Vue инстанция. По подразбиране не сме го задали без клас, тъй като искаме класът да бъде добавен само когато Tree Left Base се зарежда.

Последната стъпка за Tree Left Base е да променя treeLeftBaseClass вътре във функцията toggleTreeLeftBase, където е включена Tree Left Base.

var app = нов Vue ({
  el: "#app",
  данни: {
    showTreeLeftBase: невярно,
    showTreeLeftCircleBottom: невярно,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: ""
  }
  методи: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "нарастване"
    }
  }
  създаден () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    }, 2000 г.)
  }
})

Нашата анимация вече работи, като използва свързване на класа!

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

@keyframes растат {
  0% {
    трансформация: превод (100%);
    
  }
  100% {
    трансформация: превод (0%);
  }
}

Използвайки тази анимация, тя нараства отдолу.

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

translateY се използва за придвижване на нещо нагоре или надолу (помислете y-координира върху графика). Ето същата анимация, която се прилага към правоъгълник в различен проект:

Този черен правоъгълник е с височина 20% (спрямо целия прозорец). translateY (100%) го натиска надолу 100% от височината си, така че 20%. Той се връща към translateY (0%), а не изобщо натиснат в края на анимацията. Няма нарастващ ефект, а по-скоро изместващ ефект.

И така, защо това работи в нашия пример?

Нека видим визуално дърво отляво. Добавете рамка към класа отляво на дървото:

.tree наляво {
  позиция: абсолютна;
  височина: 25%;
  ширина: 30%;
  вляво: 0%;
  дъно: 25%;
  рамка: плътно червено 3px;
}

Виждаме, че дървото отляво е в рамките на кутия.

Променете ширината .tree-наляво на 20%.

Височината и ширината контролират кутията около Tree Left.

Какво става тук?

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

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

За да получите подробно разбиране на това, ще пунтирам и препоръчам тази страхотна статия от CSS-Tricks.

Всичко, което трябва да разберете, за да разберете нашата анимация translateY, е, че има поле около Tree Left за мащабиране. Ако натискаме Дървото наляво под полето, няма да можем да го видим.

Имайки това предвид, нека премахнем границата и да разгледаме анимацията на растежа:

@keyframes растат {
  0% {
    трансформация: превод (100%);
    
  }
  100% {
    трансформация: превод (0%);
  }
}

Тук натискаме Tree Left Base надолу 100%, поради преводаY (100%), така че е изцяло под полето и невидимо.

Когато се плъзга обратно нагоре, поради translateY (0%), той преминава изцяло отдолу на кутията, за да бъде с кутията. Докато не ударим напълно 100-процентовия превод на Y, там ще бъде част от Tree Left Base да бъде отрязана. Поради тази причина, ние имаме ефект на растеж отдолу нагоре, като „разкриваме“ Дърво лявата основа през времето на продължителността.

Добре. Нека поемем дълбоко въздух Сега имаме работеща анимация за Tree Left Base, когато се появи.

Успяхме да направим това, като поръсихме обвързването на класа и условното изобразяване на Vue върху нашите CSS анимации.

Дърво отляво кръг отдолу

Добрата новина е, че с Tree Left Base извън пътя, всичко останало трябва да бъде по-лесно за разбиране и завършване.

Нека преминем и добавим Дървото отляво в кръг отдолу.

Първо, нека разгледаме бележките ни за анимацията.

Дървото отляво в кръг расте и се свива.

Ние също трябва да имаме предвид времето. Това трябва да се появи след завършване на анимацията на Tree Left Base. Нека започнем, като просто го накараме да се появи навреме. След това можем да добавим анимацията.

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

методи: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "нарастване"
      setTimeout (() => {
      
      }, 500)
    }
  }

Ако си спомняте, тази функция се извиква в създадения жизнен цикъл, който се забавя с 2 секунди с помощта на setTimeout:

създаден () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    }, 2000 г.)
  }

Когато се извика тази функция, Tree Left Base ражда и дава клас с анимация, която продължава 0,5 секунди.

Следователно, като добавим setTimeout в toggleTreeLeftBase, можем да извикаме функция, наречена toggleTreeLeftCircleBottom след 0,5 секунди (500 милисекунди), за да оставим анимацията на Tree Left Base да завърши.

Нека добавим обаждането към toggleTreeleftCircleBottom, което ще напишем скоро.

методи: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "нарастване"
      setTimeout (() => {
        this.toggleTreeLeftCircleBottom ()
      }, 500)
    }
  }

На следващо място, нека добавим toggleTreeLeftCircleBottom и логиката, за да можем да имаме Дърво ляво кръгово дъно.

toggleTreeLeftCircleBottom: function () {
  this.showTreeLeftCircleBottom = true
}

Вече трябва да имаме Дърво ляво кръгово дъно да се появява след завършване на левата база на дървото, както се надявахме.

Сега трябва да се справим с анимацията.

Пак ще използваме свързването на класа.

Първо, нека добавим клас v-bind: клас в етикета на формата на дървото отляво в кръга от нашия HTML.

Второ, можем да добавим някои данни към нашия екземпляр Vue, който ще присвои класа.

данни: {
    showTreeLeftBase: невярно,
    showTreeLeftCircleBottom: невярно,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: ""
  }

Сега правим връзката, така че класът на дървото Left Circle Bottom да бъде контролиран от treeLeftCircleBottomClass. Искаме да му дадем клас да не започва и ще добавим клас, съдържащ анимация в същата функция, когато го включим. Нека да направим това сега и да назначим клас „зростанняShrinkActive“.

toggleTreeLeftCircleBottom: function () {
  this.showTreeLeftCircleBottom = true
  this.treeLeftCircleBottomClass = "растеShrinkActive"
}

На следващо място, нека създадем клас, наречен зростанняShrink в нашия CSS.

.growShrinkActive {
  
}

Следващата стъпка е да определите анимация, наречена rasteShrink.

@keyframes зростанняShrink {
  0% {
    трансформационен произход: център;
    трансформация: мащаб (0);
  }
  50% {
    трансформационен произход: център;
    трансформация: мащаб (1.3);
  }
  100% {
    трансформационен произход: център;
    трансформация: мащаб (1);
  }
}

Тук използваме transform: scale ([размер на скалата]), за да се справим с ефекта на растеж и свиване.

Използваме transform-origin: center, за да уточним, че искаме той да расте и да се свива от центъра на кръга, като анимация, която се опитваме да копираме.

За да получите визуална представа за това, нека добавим анимационното изявление към зростанняShrinkActive.

.growShrinkActive {
  анимация: rasteShrink 0.5s 1;
}

В това изявление за анимация, ние призоваваме rastShrink да продължи 0,5 секунди и да се стартира само веднъж.

Вече можем да видим как работи както се очаква.

Ура! Дървото отляво в кръг е завършено!

Дърво ляв кръг отгоре

Като се научите как да се справяте с дървото от лявата база и дървото отляво, отдолу, останалата част от този процес по-лесно и по-бързо да завършите.

Дървото Left Circle Top ще се обработва точно като дъното на лявото кръгче.

Единствената промяна ще бъде, че тя чака на Дървото отляво в кръга да завърши.

Първо добавяме setTimeout, който ще извика функция, наречена toggleTreeLeftCircleTop.

toggleTreeLeftCircleBottom: function () {
   this.showTreeLeftCircleBottom = true
   this.treeLeftCircleBottomClass = "растеShrinkActive"
   setTimeout (() => {
    this.toggleTreeLeftCircleTop ()
   }, 500)
}

Второ, ние дефинираме функцията, която току-що извикахме, и добавяме логиката, за да превключим на дърво отляво в кръг.

toggleTreeLeftCircleTop: function () {
  this.showTreeLeftCircleTop = true
}

След това добавяме клас v-bind: клас към маркера на формата в нашия HTML.

Сега ще трябва да определим treeLeftCircleTop в нашия Vue инстанция и да му присвоим клас за Tree Left Circle Top.

данни: {
    showTreeLeftBase: невярно,
    showTreeLeftCircleBottom: невярно,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: ""
}

Както направихме преди, нека запишем логиката в toggleTreeLeftCircleTop, за да присвоим rasteShrinkActive.

toggleTreeLeftCircleTop: function () {
  this.showTreeLeftCircleTop = true
  this.treeLeftCircleTopClass = "растеShrinkActive"
}

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

Woah! Трябва да завършим с дърво отляво с кръг.

Дърво надясно

Тъй като завършихме Tree Left, Tree Right ще бъде почти идентичен. Просто ще бъде по-лесно, тъй като имаме само един кръг. Поради това, аз ще набера темпото и ще бъда малко по-малко изчерпателен в детайлите.

Дърво дясна основа

Нека започнем с проверка на бележките за времето ни на Tree Right Base.

Веднага след като дървото Leve Base напълно расте, Tree Right Base ражда и започва да расте.

Първо, ние трябва да настроим условно изобразяване, тъй като искаме това да се изобрази, когато Tree Left Base расте напълно.

Ще трябва да определим знамето, за да се справим с това в нашите данни за инстанция Vue. Също така добавих знамето за Tree Right Circle.

данни: {
    // treeLeft неща
    showTreeLeftBase: невярно,
    showTreeLeftCircleBottom: невярно,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight неща
    showTreeRightBase: невярно,
    showTreeRightCircle: невярно
  }

След това трябва да съобщим на нашия HTML, че Vue.js ще се справи с рендеринга.

Правим това, като добавяме v-if = “[име на флаг]” както в дясната основа на дървото, така и в етикетите за десен десен кръг.

Дяволското ни право вече се предоставя, тъй като знамената са зададени на фалшиви.

Perfect. След това трябва да се справим с появата на Tree Right Base и да приложим анимацията, когато се появи.

В бележките си споменахме, че Tree Right Base ражда, след като Tree Left Base расте. Това също е същото време, когато се появява Дървото на лявото кръгче дъно. Следователно, можем да извикаме функция за включване на Tree Right Base в същия setTimeout, който извиква функцията да превключва на дърво отляво в кръг отдолу.

    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "нарастване"
      setTimeout (() => {
        this.toggleTreeLeftCircleBottom ()
        this.toggleTreeRightBase ()
      }, 500)
    }

На следващо място, ние пишем toggleTreeRightBase и логиката за включване на Tree Right Base.

toggleTreeRightBase: функция () {
  this.showTreeRightBase = true
}

Класът растеShrinkActive се прилага към Tree Left Base, когато се роди. Тогава ще направим същото и за Tree Right Base.

Първо, нека кажем на нашия HTML, че Vue.js ще обработва класа, присвоен на Tree Right Base.

Второ, ние ще определим treeRightBaseClass в данните на нашия екземпляр Vue.

данни: {
    // treeLeft неща
    showTreeLeftBase: невярно,
    showTreeLeftCircleBottom: невярно,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight неща
    showTreeRightBase: невярно,
    showTreeRightCircle: невярно,
    treeRightBaseClass: ""
  }

След това трябва да зададем клас на raShrinkActive, когато Tree Right се роди.

  toggleTreeRightBase: функция () {
    this.showTreeRightBase = true
    this.treeRightBaseClass = "растеShrinkActive"
  }

Вече нашата дясна база на базата на функционира.

Дърво десен кръг

Подобно на нашето дърво отляво в кръг, ние се нуждаем от това, за да хвърлим хайвер веднага след като основата расте. Следователно, можем да добавим setTimeout в toggleTreeRightBase, който ще изпълни повикване към функция, наречена toggleTreeRightCircle, когато Tree Right Base завърши анимацията.

    toggleTreeRightBase: функция () {
      this.showTreeRightBase = true
      this.treeRightBaseClass = "растеShrinkActive"
      setTimeout (() => {
         this.toggleTreeRightCircle ()
      }, 500)
    }

След това можем да определим toggleTreeRightCircle и да включим логиката за включване на Tree Right Circle.

toggleTreeRightCircle: функция () {
  this.showTreeRightCircle = true
}

Дясният ни кръг сега се появява навреме.

За да завършим, ще трябва да включим обвързването на класа с Vue.js в нашия HTML, да определим данните, които ще присвоят активния клас и след това да присвоим rasteShrinkActive в същата функция, която превключва на Tree Right Circle.

За да включим обвързването на класа с Vue.js в нашия HTML, можем да направим:

След това ние определяме тези данни, за да присвоим активния клас.

данни: {
    // treeLeft неща
    showTreeLeftBase: невярно,
    showTreeLeftCircleBottom: невярно,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight неща
    showTreeRightBase: невярно,
    showTreeRightCircle: невярно,
    treeRightBaseClass: "",
    treeRightCircleClass: ""
}

За да завършим, можем да зададем treeRightCircleClass да растеShrinkActive в toggleTreeRightCircle.

    toggleTreeRightCircle: функция () {
      this.showTreeRightCircle = true
      this.treeRightCircleClass = "растеShrinkActive"
    }

Точно така, правилно дърво е направено!

храст

Извършват се най-трудните части, дърветата. До този момент трябва да имаме разбиране за процеса. Поради тази причина аз просто ще предоставя кода за всяка стъпка с няколко реда описания за оставащия храст и слънце.

Нека разгледаме бележките за Буш.

Буш кръг отляво расте и се свива.
Буш кръгът надясно започва да расте, когато Буш кръгът наляво напълно расте и след това се свива.
// времето
Когато дясната основа на дървото напълно расте, Буш кръгът отляво се ражда и расте.

Буш кръг вляво

Стъпка 1: Добавете условно изобразяване (ще включва и Буш кръг вдясно)

HTML

 <

JS

данни: {
    // treeLeft неща
    showTreeLeftBase: невярно,
    showTreeLeftCircleBottom: невярно,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight неща
    showTreeRightBase: невярно,
    showTreeRightCircle: невярно,
    treeRightBaseClass: "",
    treeRightCircleClass: "",
    // храстови неща
    showBushCircleLeft: "",
    showBushCircleRight: ""
}

Стъпка 2: Обадете се toggleBushCircleLeft от setTimeout в toggleTreeBaseLeft. Добавете функция с логика, за да включите.

toggleTreeLeftBase: function () {
      this.showTreeLeftBase = true
      this.treeLeftBaseClass = "нарастване"
      setTimeout (() => {
        this.toggleTreeLeftCircleBottom ()
        this.toggleTreeRightBase ()
        this.toggleBushCircleLeft ()
      }, 500)
    }
//по късно
toggleBushCircleLeft: function () {
  this.showBushCircleLeft = true
}

Стъпка 3: Добавете обвързване на класа в HTML и JS. Присвояване на клас rasteShrinkActive в toggleBushCircleLeft.

HTML

JS

данни: {
    // treeLeft неща
    showTreeLeftBase: невярно,
    showTreeLeftCircleBottom: невярно,
    showTreeLeftCircleTop: false,
    treeLeftBaseClass: "",
    treeLeftCircleBottomClass: "",
    treeLeftCircleTopClass: "",
    // treeRight неща
    showTreeRightBase: невярно,
    showTreeRightCircle: невярно,
    treeRightBaseClass: "",
    treeRightCircleClass: "",
    // храстови неща
    showBushCircleLeft: "",
    showBushCircleRight: "",
    bushCircleLeftClass: ""
  }
// по методи
 toggleBushCircleLeft: function () {
   this.showBushCircleLeft = true
   this.bushCircleLeftClass = "растеShrinkActive"
}

Bush Left Circle сега трябва да работи точно както ние искаме!

Буш кръг надясно

Тъй като Bush Circle Right е същите стъпки и логика, аз просто ще предоставя всички актуализации на кода.

HTML

JS

    // под данни
    // храстови неща
    showBushCircleLeft: "",
    showBushCircleRight: "",
    bushCircleLeftClass: "",
    bushCircleRightClass: ""
    // методи
    toggleBushCircleLeft: function () {
      this.showBushCircleLeft = true
      this.bushCircleLeftClass = "растеShrinkActive"
      // изчакайте 0,25 секунди, тъй като искаме Bush Circle надясно да хвърли хайвера си, когато Bush Circle Left расте
     setTimeout (() => {
        this.toggleBushCircleRight ()
      }, 250)
    }
    toggleBushCircleRight: функция () {
      this.showBushCircleRight = true
      this.bushCircleRightClass = "растеShrinkActive"
    }

Точно така, Буш се прави с останало само Слънце! Най-накрая!

слънце

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

Слънцето расте и се свива.
// времето
Слънцето ражда и започва да расте, когато Tree Right е завършен.

Стъпка 1: Добавете условното изобразяване

HTML

JS

// под данни
// неща за слънце
showSun: false

Стъпка 2: Създайте функция за включване на Sun. Това трябва да бъде извикано в нов setTimeout под toggleTreeRightCircle, тъй като Sun трябва да се появи, когато Tree Right Circle расте.

   toggleTreeRightCircle: функция () {
      this.showTreeRightCircle = true
      this.treeRightCircleClass = "растеShrinkActive"
      setTimeout (() => {
        this.toggleSun ()
      }, 250)
      // изчакваме 250 секунди, тъй като това е моментът, когато Дървото на правилния кръг расте, а не кога завършва
    }
   //по късно
   toggleSun: function () {
    this.showSun = true
   }

Стъпка 3: Добавете обвързване на класа и присвойте клас rasteShrinkActive веднага след включване на Sun. Ще отбележа също, че обвързването на класа тук ще бъде малко по-различно. Тъй като ние прилагаме това към цялото Sun, вече има слънчев клас в SVG тага. Това ще бъде премахнато и по подразбиране sun ще бъде зададеният клас. Тъй като можем да имаме няколко класа в CSS, ще имаме както клас слънце, така и растениеShrinkActive, присвоено веднага след появата на Sun.

HTML

JS

//данни
// неща за слънце
showSun: false,
sunClass: "слънце"
// методи
toggleSun: function () {
  this.showSun = true
  this.sunClass = "слънцето растеShrinkActive"
}

Готин боб! Завършихме анимацията!

Крайна демонстрация / код: http://codepen.io/mikemang/pen/JWNOrr/

Заключителни мисли

След 15 часа написване на този пост, разбирам, че това не е перфектна реплика и много да се заемете. Надявам се, че имаше някои полезни битове и парчета, които извадихте от четенето на това.

Ако търсите повече практика с анимации, насърчавам ви да направите точно това, което направихме в този пост. Разбийте анимацията и я допълнете парче по парче. Горещо препоръчвам да започнете с по-лесен пример и да напреднете.

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

Ако търсите нещо по-структурирано, можете да резервирате достъп до предстоящия ми SVG курс, който ще обхване всичко - от SVG основи до създаване на подробна векторна графика с Affinity Designer, всички начини за анимиране на SVG с помощта на външни библиотеки и практически приложения, като например създаване библиотека с икони, създаване на анимирана целева страница и UX анимации.

Всяка обратна връзка е добре дошла и оценявана.

Наздраве,
Майк Мангяларди
Основател на художника по кодиране