Анимация чрез requestAnimationFrame
Но в действителност, ние никога не трябва да се използва setInterval. setInterval винаги ще изготви една и съща скорост, без значение какъв вид потребител на компютър, което прави потребителят и дали текущата страница е активна. С една дума, тя работи, но не и ефективно. Вместо това, ние трябва да използваме новата requestAnimationFrame API.
requestAnimationFrame е създаден да направи анимацията гладко и ефективно по отношение на разходите. Можете да го указател към функция рисунка се обади. В един момент в бъдеще браузърът ще се обадите на вашия чертеж функция, браузърът ще бъде готов. Това дава на браузъра пълен контрол върху чертежа, така че тя може да намали честотата на кадрите, ако е необходимо. Браузърът може да направи по-гладка анимация, определяне честота на опресняване на екрана на 60 кадъра в секунда. За да контур анимация просто се обадете requestAnimationFrame рекурсивно в началото.
requestAnimationFrame превръща в стандарт, но повечето браузъри поддържат само собствените си префикс версии. Например, Chrome използва webkitRequestAnimationFrame. и подкрепя Mozilla mozRequestAnimationFrame. За да поправите това, ще използваме сценария Павел Irisha. Той просто се свързва различните версии на новите функции: requestAnimFrame.
Нека се опитаме един прост пример, в който се съживи правоъгълник на екрана.
Основна анимация правоъгълник с requestAnimFrame (щракнете, за да започнете)
фон за почистване
Сега виждате проблема. Нашата правоъгълник се движи по екрана, обновява пет пиксела на всеки 100 милисекунди (или 10 кадъра в сек.), Но старата правоъгълника остава. И прилича на правоъгълника става само по-дълго и по-дълго. Не забравяйте, че платното е просто един куп пиксела. Ако инсталирате няколко пиксела, те ще останат там, докато не се променя. Така че нека да изчистите платното във всеки кадър, преди да се направи правоъгълник.
Рисуване чрез пречистване на фона правоъгълник (щракнете, за да започнете)
симулатор частици
Това е всичко, което наистина трябва да анимирате. Нарисувайте нещо отново и отново. Нека се опитаме нещо малко по-сложно: симулаторът на частиците. Искаме да направим някои от частиците падат надолу по екрана като сняг. За тази цел ние сме за прилагане на класически алгоритъм за симулация на частиците:
Симулатор частици изброява Loop частици. Във всеки кадър, позицията на всички частици се актуализира на базата на определена уравнение, частиците са разрушени / се основават на определени условия, ако е необходимо. След това частиците се изготвят. Ето един прост пример за снега.
На първо място, ние създаваме симулатор частици на основата. Тази функция цикъл, който се нарича на всеки 30 милисекунди. За структури от данни, ние се нуждаем един празен масив от частици и мерки за противодействие. На всяка итерация на цикъла се извършва четири парчета.
CreateParticles функция проверява колко частици. Ако те са по-малко от 100, той създава нова частица. Моля, имайте предвид, че проверката се извършва само веднъж на всеки 10 цикъла. Това ви позволява да започнете с празен екран, а след това постепенно да се увеличи броят на частиците, а не създаване на сто от началото. Можете да промените настройките в зависимост от желания ефект. Използвам math.random () и други аритметиката да се уверите, че снежинките са разположени на различни места и да не изглежда по същия начин. Така че снегът става все по-естествено.
функция updateParticles е много проста. Тя актуализира координатите на всяка частица, като към скоростта си. Това прави снежинка ход надолу по екрана.
Тук killParticles. Тя проверява, че частицата е под долния ръб на платното. В някои симулатори ви унищожи частиците и го премахва от списъка. Тъй като това заявление показва трайно сняг, ние пренасочват частицата, то създаването на 0.
Накрая се направи частиците. Отново, това е много проста: чист фон, начертайте кръг с техните координати, радиус и цвят на частиците.
Сега тя изглежда така.
Симулатор за частици сняг (щракнете, за да започнете)
Това е, което аз обичам тренажори частици, така че това е факт, който можете да създадете много сложна и органично, естествено изглеждащи анимация с доста прости математика, съчетана с малко контролиран инцидент.
спрайт анимация
Какво е спрайт?
Крайният основният тип анимация е спрайт анимация. И така, какво е спрайт?
Sprite - малък образ, който можете бързо да се направи на екрана. Обикновено Sprite всъщност представлява отрязък от по-голямо изображение, наречен списък спрайт или майстор изображение. Този списък може да съдържа няколко различни спрайтове, като различни герои в играта. списък Sprite също може да съдържа един символ на различни позиции. В резултат на това, той ви дава различни рамки на анимация. Това е класически стил на анимация: само с едно натискане чрез различните снимките отново и отново.
Защо и кога да се използва спрайтове?
Sprites са добри за няколко неща.
- На първо място, спрайт е изображение, което най-вероятно се основава по-бързо от вектори, особено сложни.
- На второ място, спрайтове са изключително удобни, когато трябва да се направи едно нещо отново и отново. Например, в игра Space Invaders на имате куп куршуми на екрана, които всички изглеждат по същия начин. Много по-бързо изтегляне спрайт куршум веднъж и да го направи отново и отново.
- Трето: спрайтовете се зареждат бързо и са изготвени като част от листа. Тя ви позволява да качите един файл за целия набор от спрайтове много по-бързо, отколкото един куп отделни изображения, получени. Sprites обикновено са също компресират по-добре. И накрая, той използва по-малко памет за съхранение на по-голямо изображение от един куп по-малки.
- В крайна сметка, най-спрайтове са лесни за работа с анимация, тъй като те са получени от инструменти за рисуване, като например Photoshop. Кодът просто прелистваше изображенията и не ме интересува какво на снимката. Това означава, че си художник може лесно да се актуализират графики и анимации, без да докосвате на кода.
Рисуване спрайтове
Sprites са лесни за боя, с помощта на функцията drawImage. Тази функция може да се направи и се простират на част от изображението, като се посочва друг източник и целеви координати. Да предположим, че имаме следния списък спрайт, а ние просто искаме да привлече спрайт петата си тръгна.
Можем да се направи само спрайт, чрез определяне на координатите на изходния код:
спрайт анимация
Както можете да видите на пълен спрайт лист, в действителност те са различни рамки на анимацията на един обект, така че сега преминете през различните духове, за да създадете анимация. Ние правим това чрез следене на текущия блок с помощта на мерки за противодействие.
Всеки път, когато се актуализира на екрана се изчислява текущата кадър от анимацията гледа мерките за контраатака. Операция модул (%) 10 означава контур конструкция 0-9 отново. Тогава х-координата се изчислява в зависимост от броя на кадрите. След това, изображението се съставя и актуализира мерки за противодействие. Разбира се, това може да бъде твърде бързо, така че можете да споделяте цикли модул 2 или 3, анимацията се работи бавно.
Анимация на всеки 10 кадъра за детайл (щракнете, за да започнете)
В следващата глава, ние ще създадем една проста игра, която показва как да използвате основния анимация, спрайт анимация, клавишни събития и прост симулатор на частиците за експлозии.
Свързани статии