Защо да правя анимацията в чисти JS
Вие може да бъде ужасен. В действителност има много библиотеки. например, любимия ни JQuery. Това може да е така, но чиста анимация полезно да бъде в състояние да пиша тук, в какви ситуации.
- Той е малък сайт с минимум ефекти. Библиотеки на трети страни не са свързани. И изведнъж има нужда да се направи постепенен разтваряне на елемента при кликване. Заслужава ли си да го за такава дреболия да се свържете JQuery. Много от тях ще бъдат свързани, а в действителност ще направи правилното - в днешния свят 98Kb не е от значение. Въпреки това, когато се работи в екип има такива упорит екип олово, което няма да позволи на малките анимации, вградени в проекта библиотека от трета страна. Така че трябва да се разбере самата анимация.
- Използвайте готов библиотека, и това не е най-желания ефект. Например, вие трябва да получите елемент, преди да изчезне, той се обърна три пъти по посока на часовниковата стрелка, скочи и след това изчезна. В този случай, библиотеката ще бъде разширен. и отново се нуждаете от основни познания за организацията на анимационни ефекти.
Ето защо, да разберат как да се организират анимационни елементи, както и очевидно няма. В тази статия ще разгледаме основните техники и най-простият пример - пиша функция, която е в състояние да се скрие безпроблемно DOM елемент, намаляване на нейната прозрачност.
Ние ще имаме два файла: index.html и script.js. HTML-документ е много проста:
Направихме Разделение 300h200 пиксела, напълни я с цвят, даде една малка външна облицовка и назначен ИД = елемент. Нищо повече за сега не ни трябват.
Сега ние организира работата в JS. Да започнем нашия Разделение виси на всеки случай:
След това използвайте document.getElementById стигнем Разделение с идентификатор = т и задайте OnClick събитие, което ще се проведе при настъпването на теста за предупреждение на дисплея. В действителност, вместо сигнала, ние поставяме тук по-късно предизвикателство функции избледняват сега започват да се разгледа.
Така че, това, което ни е нужно, за да анимирате? Опитайте се да разглежда незабавно такава функция интерфейс, който в бъдеще ще го направи много лесно! Получи се нещо като това:
В действителност, всяка анимация е елемент от който е направен, както и времето, през което ние виждаме, плавни промени. Но какъв вид кадъра в секунда?
Така че, тази функция може да отнеме втори параметър в милисекунди, след което тя трябваше да повтори изпълнението му. Оказва се, че ако се напише:
= Ще видим сигнал на всеки 20 милисекунди. И ако пишем
С кадъра в секунда, че е много лесно да се отнасят. В една секунда хиляди милисекунди, така че ако искаме да покажем лицето на 50 кадъра в секунда, 1000/50 = 20 mS - на всеки 20 милисекунди, ние трябва да се повтаря действието в интервала.
Въз основа на изложеното по-горе, ние вече можем да се направи основен гръбнак на нашите характеристики:
Конструкции Var кадъра = F || 50 Var време = т || 500 декларира настройките по подразбиране. Това е, ако обаждането ние няма да даде на функцията на втория и третия елементи, техните стойности ще бъдат равни на 50 и 500.
Дизайнът на самата организация setInterval твърде логично. Ние настроите интервала с честота 1000 / кадъра в секунда. След анимацията е пълна, този интервал, ние трябва да се премахне.
Обърнете внимание на "няма" Онлайн elem.style.display =. Това показание е необходимо, че след възстановяване на непрозрачност елемент, той освободил седалката. Ако не го направите, елементът няма да се вижда, но мястото му ще остане празен - по-ниските елементи не се движат там.
За почти всичко! Остава да се добави само една промяна в видимите свойства и се проверява за завършване на анимацията.
Zanesom всичко е в кода:
Основният контрол ролята на изпълнявана от променливите стъпки, в които се съхранява информация за това как все още остава много да се показват кадри. Когато стъпки достигне нула, анимацията е завършена.
Всичко. Остава само да премине правилно параметрите на нашата функция:
Единственият финес - това - това е индикация за текущия елемент, в който се натисне.
Свързани статии