Аз няма да разглобявате цялата библиотека на части и да копаят в кода. Вместо това, аз ще разгледа всички библиотеки от гледна точка на някой, който работи предимно с CSS, но исках да знам какво може да предложи по отношение на JS DOM анимация. Ето защо, аз ще търси инструменти, които манипулират DOM перфектно, динамично добавяне и премахване на CSS стилове и / или класове за създаване на анимация с синтаксис, който е запознат CSS програмист.
Анимация в мрежата
Както е обяснено Сара Drasner в уеб анимация трябва да се прави разлика анимация интерфейс / потребителски опит и независима анимация.
Изследванията са доказали, че хората са много по-възприемчиви към света на базата на движещи се изображения. Това означава, че ние можем да разберем по-добре и асимилира информацията, когато се представи под формата на нещо, движещи се, не под формата на прости изображения или поредица от статични изображения.
Актуални тенденции и подходи за уеб програмиране
Научете алгоритъм бързо професионално израстване с нула в строителна площадка
От друга страна, независима анимация ... "се използва, за да илюстрира концепцията за текст на страницата, заедно с него или поотделно." Сара Drasner - от слайда в конференцията на CSS
Сара илюстрира думите си в CodePen демо.
Разликата е много важно. По време на анимация на интерфейса, който се опитваме да помогнем на потребителите да извършват определени действия, които са съвместими с целите на сайта. И когато създавате независими анимации, която се опитвате да отворите дадена концепция възможно най-пълно.
Въпреки това, и двата вида анимацията трябва да донесе на хората удоволствие. Ето защо, когато създавате анимации всичко зависи от изпълнението и наличността. Тези фактори са резултат от анимация, която ще зарадва, дразня или дори нарани.
Днес, CSS може да предложи на плавни преходи и анимации. Въпреки това, все още JS заема първото място в създаването на анимация. Но защо? Сега можем да направим анимация в чист CSS, защо някой някога да използва това за JS?
За да ви помогне да изберете между СГО и JS Рейчъл Nabors съм съставила списък на разликите. Анимация може да бъде:
Статично: анимацията от началото до края се извършва без никакви разклонения логика. Като пример, товарачи на CSS. Тази анимация може да се запише в чисто CSS;
С постоянство: един добър пример - страничната лента, която се отваря и затваря, като кликнете върху бутона. Този тип анимация може да се запише на CSS JS осеяни с малък за добавяне и премахване на класовете, съответстващи на състоянието на анимацията;
Dynamic: тази анимация може да завърши по различен начин. Това зависи от действията на потребителя, събития в DOM, анимация състояния на други елементи в документа, и т.н. Този тип анимация не може да бъде създаден с помощта на CSS, тук е най-добрия си приятел - JS.
В допълнение към динамична анимация JS може да се използва, ако сте в една от следните ситуации:
което трябва да се слеят или да разделите анимацията на повече елементи. В такъв случай, всеки анимация трябва да започне след предишната. Това може да стане в чист CSS, предписване навсякъде забави собственост. Но ако трябва да смените само една стойност, е изключително неудобно да се пренапише всички останали;
искате да анимирате SVG графики. Тук основният недостатък е, че CSS анимация в SVG неравномерно поддържа от всички браузъри;
ако вашият проект е да подкрепи по-стари браузъри, които не работят CSS анимация, JS надеждно решение за осигуряване на добра подкрепа.
Дългосрочната подмяната: Уеб анимации API
W3C работи по спецификация, която ще събере на едно място CSS, SVG и JS анимации до един общ език, без необходимостта от допълнителни библиотеки JS. API се нарича уеб анимации и чудесно за създаване на динамични анимации, където CSS не могат да направят нищо, за да спре. Можете да прочетете полезна уводна статия в уеб анимации API от Дъдли ЕТАЖ директно на SitePoint уебсайт.
Работата по уеб анимации API се провежда сравнително стабилен темп, както и за браузъри, които не поддържат API, там Полифем.
Всичко звучи готино, и аз активно да насърчава всички да експериментирате с WAAPI. Въпреки това, на това писание, подкрепа браузър смесен букет, а в спецификацията все още може да бъде изменено. Така че, ако WAAPI сега не е подходящ за вашия проект, можете да превключите към библиотека JS.
Библиотека за динамично анимация DOM
Мрежата е пълна с JS библиотеки за анимация. По време на това писание, най-популярни са GreenSock или GSAP (GreenSock Анимация Platform) и Velocity.js.
Основни характеристики на аниме
Името идва от японски аниме анимация, компютъра и ръчни Anime.js ... «гъвкави, но лек JS библиотека за анимация. Работи с CSS, Индивидуални трансформации, SVG, DOM атрибути и JS обекти. "
Anime.js поддържа следните браузъри: Chrome, Safari, Opera, Firefox, Internet Explorer 10+
Много библиотеки, защо аниме?
«GSAP способен много повече, отколкото на Холивуд. Но тази библиотека е далеч по-трудно. Целта ми беше - да се запази API лесно да се съсредоточи върху това, което наистина имам нужда (няколко времена, разполага контрол анимация за възпроизвеждане ...) при запазване на най-ниската възможна тегло (9KB в minifitsirovannom форма) ".
Hacker News
С една дума, аниме е добра за вас, ако имате нужда, за да създадете динамични анимации HTML и SVG елементи, които не се нуждаят от всички характеристики на GSAP или други големи библиотеки.
Как да използвате Anime.js
По-долу съм написал няколко реда код, които илюстрират как да се свържете Anime.js. Най-анимация се забави с демонстрационна цел.
Свързване Anime.js не се различава от JQuery или друг JS библиотека.
Изтеглете .zip файла от страницата на проекта на GitHub. извличате файлове и избройте anime.min.js в маркер скрипт вътре HTML:
Или можете да го направите в NPM или беседка:
Една анимация на един елемент: подскачащи топката
След като инсталирате Anime.js проекта може да започне с най-простия вид анимация: само един елемент, топката подскачащи нагоре и надолу. Първата стъпка - обадете аниме, минавайки обект с настройките на набор анимация. Стандартна структура:
Сега на обекта, изпълвайки я с инструкциите, необходими за да се уточни, че анимираният, анимация, продължителност и т.н.
Имотът на цели отговаря на аниме за елемента, който искате да анимирате. Можете да определите селектор CSS, както го направих по-горе, или една от опциите по-долу:
DOM елемент, например document.querySelector ( "топка. ');
Nodelist, например document.querySelectorAll ( "топка. ');
Актуални тенденции и подходи за уеб програмиране
Научете алгоритъм бързо професионално израстване с нула в строителна площадка
JS масив, например, [ '.ball'].
Ако имотът цели е необходимо да се регистрирате повече от едно значение, което означава, че ще прилага анимация на няколко елемента, можете да използвате масив:
Вторият имот в примера по-горе, елементът се движи вертикално от translateY, този имот ще бъдат запознати с тези, които са работили с CSS. Тифани Браун и други разработчици, се препоръчва да се използва превежда и мащаб да се движи и да промените размера, отколкото свойства, които са отговорни за ширина или височина на елемента. Този подход увеличава производителността и качеството на анимация, тъй като страницата в браузъра не е възстановен отново.
Следващият имота в горния пример - продължителност. Той е отговорен за анимацията в аниме. Ако сте в различни интервали от време, участващи множество анимации, вие също ще дойде по-удобно забавяне собственост.
контур имот в Холивуд е отговорен за броя на повторенията на анимация. По подразбиране тя е настроена да невярно, което означава, че анимацията се изпълнява веднъж. Анимациите могат да се прехвърли с помощта на стойностите на истина, можете да посочите точния брой повторения, като посочва необходимия брой.
посока имот представена в CSS, както и в по Аниме, може да се зададе една и съща стойност, която е в CSS двойната: нормални, обратни и негов заместник. Последната стойност превключва от нормалния ход на анимацията за обратното, идеален за подскачащи топката.
И накрая, последната имота в кода - облекчаване. скорост на анимациите трябва да бъде постоянна? Може би анимацията трябва да започне бавно и да се ускори до края? Трябва ли да се добави в края на отскочилата топка? Правилното функция на анимация - един от ключовите съставки полирани и ефектна анимация.
Всички функции на анимацията могат да се видят с кода по-долу:
Добави втората анимацията да се топка
Да речем, че искате топката леко да се компресира, когато се удря долния ръб на контейнера. Анимето се извършва чрез добавяне на специални параметри анимация под формата на JS обект. На примера на топката, това е как да го направите:
В по-горе, нов имот scaleX, което прави стреля неточно. Самата стойност се дава под формата на обект буквално с определени клавиши, с която можете да контролирате анимацията.
Ключовата стойност позволява да промените ширината на елемента по хоризонталната ос, а продължителността на забавяне и са отговорни за анимацията и отправна точка след приключване на предишно анимация.
Ако инспектира обекта в любимия си Dashboard програмист, можете да видите как Аниме живата елемент, добавяйки inlaynovy атрибут стил и динамично актуализиране на стойността на имота се трансформира.
Анимация последователност от два елемента: рита топка
Кодът по-долу - е един пример за това как да анимирате двата елемента. В нашия случай това е двете изображения. Вторият анимацията започва след първата.
Топката започва да се движи само след удара. В Anime.js можете да посочите допълнителни анимация с помощта на метода на пълна (), в която, в този случай, вторият обект се съхранява с инструкции за анимиране на топката.
Разбира се, CSS може да създаде статично версия на анимацията. Нуждае се от keyframe'ov и странен кубически функция на Безие. В този случай JS е абсолютно не е необходимо, и анимацията е гладко и ще работи роден. Демонстрация на чист CSS:
Завъртете, спрете и рестартирайте анимация
Anime.js ви позволява да започнете, спрете и рестартирайте анимация с помощта на .play () методи. пауза () и .restart (). Така например, по този начин можете да контролирате анимацията ви удари топката.
В кода, трябва да се направят няколко забележки:
да контролира и нацели горната греда с помощта на бутоните съм създал две различни обекти. Това ще бъде възможно да се вкара топката във стачка анимация анимация, но опитът показва, че когато на бутона за контрол само основната анимация, т.е. инсулт;
анимацията не стартира автоматично след пълен зареждането на страницата, трябва да настроите автоматично пускане на фалшиво;
и накрая, за да започне анимацията, просто се обадете .play () метод на обекти и Kickball movingBall.
Като се започне анимацията и пауза, можете бързо да се пресъздаде с помощта на CSS свойства на анимация игра състояние и щипка JS. Въпреки това, този метод няма да работи, за да пресъздаде анимацията да се рестартира след приключването му или тече обратен анимация от всяко място.
Анимирайте inlaynovye SVG атрибути използване Anime.js
В последната демонстрация показва как да анимирате атрибути inlaynovoy SVG графики. По това време, един пример ще бъде сладък коте играе с топка.
Демото използва CSS класове за различни начини и форми, от които SVG изготвени коте. Така че много по-лесно да търсите елементи в кода.
Ето как можете да анимирате окото котка:
Кодът по-горе надолу очите на котката, промяната на стойността на атрибута CY диапазон - котка ученик.
Ако забележите, че очите се движат последователно. Нарочно го направи, за да ви покажа още един начин за създаване на анимация последователност в Anime.js. забавяне собственост може да бъде число, но и в функция. Ако използвате функция в кода по-горе, можете да контролирате програмно началото на анимацията. Проверките на функционални ако елементът да се анимирани, първата (в целите на нулева позиция в масива), т.е. лявото око, анимацията ще бъде закъснение от 300ms. Ако елементът не е на първо място, след това забавяне е резултат от умножаване на индекса (т.е. 1) до 500ms.
заключение
Започнах тази статия с кратък преглед на това как да използвате анимация в мрежата. Следваща обсъждаме кога да използвате JS, CSS анимация и кога. Владее мина през приложния програмен интерфейс на уеб анимации.
Аз също въведе ви Anime.js, първата библиотека в тази серия. Показах я да ви възможности и създаде демо.
Наистина ми харесва да работя с Anime.js: способността му да обхване много начини на приложение, синтаксиса е съвсем проста, както и с помощта на библиотеката, можете да създадете плавни, красиви ефекти.
За тези, които по-рано не е знаел за библиотеката, бих казал, че единствените документи - това README.md файл на GitHub.
въпроси Раздел на GitHub ще намерите някои от отговорите за себе си. Тази тема е активно наблюдение на създателя на аниме, Джулиан Garnier.
Редакция: Екип webformyself.
Актуални тенденции и подходи за уеб програмиране
Научете алгоритъм бързо професионално израстване с нула в строителна площадка
Най-IT новини и уеб разработки на нашия канал Телеграма
Свързани статии