Анимация на изследователска работа в javascript. Обещаващи JavaScript библиотеки и добавки за анимация
Под термина „анимация“ най-често имаме предвид анимационните филми – „карикатурите“, които обичаме от детството си. Но ако се вгледате в Речник, тогава научаваме, че в превод от френски означава „съживяване“, „оживление“. И тук се оказва, че това значение изненадващо точно пасва не само на филмовата индустрия, но и на уеб технологиите.
Използването на различни анимационни ефекти (преходи, движения, трансформации и т.н.) значително „оживява“ уебсайта, позволява ви да контролирате вниманието на потребителя, превключвайки го към необходимия елемент и давайки определени визуални знаци.
Говорейки за анимация, няма как да не споменем добре познатите 12 принципа, формулирани от аниматорите на студиото Disney, чието използване е изключително важно за разумното и качествена употребаанимационни ефекти.
Говорейки за технологии, които позволяват използването на анимация в уеб страници, можем да подчертаем няколко, но може би нито една от тях не е толкова мощна, колкото . Само преди няколко години технологията за Flash анимация беше страхотен конкурент и много популярна. Но сега изглежда, че тя най-добрите годиниизостава и постепенно се заменя от страниците на уебсайтове с по-мощни и гъвкави Java скриптове. И ако решите да използвате сериозно анимация на уебсайта си, тогава трябва да разчитате на JavaScript. И за да направя интелигентен избор на библиотека, направих днешния преглед.
Dynamics.js Ще започна с Dynamics.js. Това е сериозна и мощна библиотека, която ви позволява да създавате физически точни анимации (като хармонични затихващи трептенияточки върху начална страницасайт). Библиотеката може да управлява свойствата на всеки DOM елемент. Dynamics.js се използва за създаване на менюта, бутони, индикатори за процеси, маркери. В този случай са налични голямо разнообразие от параметри, като честота, декремент на затихване, параметри, характеризиращи еластичността или продължителността на процеса и др.
Здравейте всички! С тази статия откривам поредица от публикации по темата за създаване на анимации в чист javascript.
Защо изобщо правят анимации в чист js?може да се ужасиш. В крайна сметка има много библиотеки, например любимата ни jQuery. Това е така, но е полезно да можете да пишете чисти анимации в тези ситуации.
Следователно разбирането как са организирани анимациите за елементи очевидно няма да бъде излишно. В тази статия ще разгледаме основните техники и най-прост пример- нека напишем функция, която може плавно да скрие DOM елемент, намалявайки неговата прозрачност.
Всъщност такъв подход за прости анимациивече могат да се считат за остарели. По-добре е да правите анимации с помощта на CSS и с използвайки javascriptконтролирайте началото и края на анимацията.
Ще имаме два файла: index.html и script.js. HTML документът е много прост:
JS #item(ширина: 300px; височина: 200px; фон: #f9b; поле: 20px; )
Направихме div 300x200 пиксела, напълнихме го с цвят, направихме го малък маржи присвоен id=item. За сега не ни трябва нищо повече.
Организация на анимация в javascript.Сега нека организираме работата в js. Първо, нека прикачим някакво събитие към нашия div:
// След зареждане на документа window.onload = function())( // Когато щракнете върху елемент с id=item document.getElementById("item").onclick = function())( // показва предупреждение alert( 1);))
Няколко коментара за този дизайн. Традиционно поставяме целия javascript код във функция, зададена на събитието window.onload. Така чакаме окончателното зареждане на документа и формирането на DOM - обектен моделдокумент.
След това, използвайки document.getElementById, получаваме div с id=item и задаваме събитието onclick, което ще задейства предупреждение за проверка. Всъщност, вместо предупреждение, малко по-късно ще поставим тук извикване на функцията за избледняване, която сега ще започнем да разглеждаме.
И така, какво ни трябва за анимация? Нека се опитаме веднага да измислим интерфейс за функцията, който ще я направи наистина удобна в бъдеще! Ще получите нещо подобно:
// Функция за разтваряне на елемент: // elem - DOM обект // t - време на анимация // f - брой кадри в секунда функция fade(elem, t, f)( // код)
Всъщност всяка анимация има елемент, върху който се създава, и време, през което виждаме плавни промени. Но какво да кажем за кадрите в секунда?
Тук първо трябва да разберете как се появява анимацията като цяло. Анимацията е просто стъпкова промяна във визуално забележима стойност на определен интервал. Тази стойност за нас е свойството opacity - прозрачността на елемента. И ние създаваме интервала, използвайки стандарта javascript функции- setInterval.
И така, тази функция приема като втори параметър времето в милисекунди, след което трябва да повтори своето изпълнение. Оказва се, че ако напишем:
SetInterval(function())(alert(1); ), 20);
тогава ще виждаме предупреждение на всеки 20 милисекунди. Ами ако пишем
SetInterval(function())(alert(1); ), 50);
след това на всеки 50 ms.
Това се отнася много лесно до кадрите в секунда. В една секунда има хиляда милисекунди, което означава, че ако искаме да покажем на човек 50 кадъра в секунда, то 1000 / 50 = 20 ms - на всеки 20 милисекунди трябва да повтаряме действията в интервала.
Въз основа на горното вече можем да изобразим основния гръбнак на нашата функция:
Функция fade(elem, t, f)( // кадри в секунда (по подразбиране 50) var fps = f || 50; // време за изпълнение на анимацията (по подразбиране 500ms) var time = t || 500; var timer = setInterval (функция ())( // промяна на непрозрачността // ако анимацията е завършена if(/* проверка */)( // премахване на интервала за изпълнение clearInterval(timer); // и премахване на елемента от документния поток elem.style.display = "няма" ; ) ), (1000 / fps)); )
Конструкции var fps = f || 50 и var time = t || 500 декларират параметри по подразбиране. Тоест, ако не предадем втория и третия елемент на функцията при извикване, тогава техните стойности ще бъдат равни съответно на 50 и 500.
Дизайнът на самата организация setInterval също е логичен. Задаваме интервала с честота 1000/fps. След като анимацията приключи, трябва да премахнем този интервал.
Обърнете внимание на реда elem.style.display = "none"! Тази инструкция е необходима, така че след като непрозрачността на елемента бъде нулирана, тя ще освободи място. Ако това не бъде направено, елементът няма да се вижда, но мястото му ще остане празно - долните елементи няма да се местят там.
Почти е готово!Всичко, което трябва да направим, е да добавим промяна към свойството visible и да проверим за завършване на анимацията.
Как да организираме промяната правилно свойства на непрозрачност. Математиката тук е елементарна. Имаме време и кадри в секунда. Например време = 2000 и брой кадри в секунда fps = 50. fps = 50 означава, че ще показваме кадър на всеки 1000 / fps милисекунди, т.е. 1000/50 = 20.
Това означава, че общо ще покажем на потребителя n = време / (1000 / fps) = 2000 / (1000 / 50) = 1000 кадъра. Оказва се, че също трябва да променим стойността на свойството opacity 1000 пъти. Спомнете си, че непрозрачността варира от x0 = 0 до x1 = 1. Общата формула е dx = (x1 - x0) / (време / (1000 / fps)). Казано по-просто, разделяме 1 на 1000 и получаваме 0,001.
Нека поставим всичко това в код:
Функция fade(elem, t, f)( // кадри в секунда (по подразбиране 50) var fps = f || 50; // време за изпълнение на анимацията (по подразбиране 500ms) var time = t || 500; // колко общо показване на кадри var steps = време / (1000 / fps); // текуща стойност на непрозрачност - първоначално 0 var op = 1; // промяна на прозрачността на кадър var d0 = op / стъпки; // задаване на интервала (1000 / fps) / / например 50fps -> 1000 / 50 = 20ms var timer = setInterval(function())( // намаляване на текущата стойност на непрозрачност op -= d0; // задаване на непрозрачност на DOM елемента elem.style.opacity = op; // намалете броя на оставащите стъпки на анимацията steps--; // ако анимацията е завършена if(steps