Анимация, WebReference
Анимацията бива два вида - анимация кадър по кадър и анимация с ключов кадър. При анимацията кадър по кадър важен показател е честотата на кадрите в секунда. За справка, 24 кадъра в секунда се използват в кината, 25 кадъра в секунда по телевизията, съвременните камери могат да снимат с честота от 50 или повече кадъра в секунда. Съответно, за да направите анимационен видеоклип с продължителност половин минута и с честота 24 кадъра, са необходими 720 изображения. Някои аниматори отиват на трика и за да не рисуват огромен брой картини, намаляват броя им наполовина, като същевременно повтарят всеки кадър два пъти.
Анимацията с ключови кадри използва напълно различен подход. Например, трябва да преместим квадрат от една точка в друга. Достатъчно е да зададете началните, крайните координати на квадрата и времето на движение. Изчисляването на междинните рамки се поема от програмата, в нашия случай браузъра, тъй като говорим за уеб технологии.
Ясно е, че това значително опростява процеса на създаване на анимация, тъй като броят на кадрите е значително намален и всяка рутина се изчислява автоматично. Съществуват обаче и редица ограничения. Например, ако искате да направите движение на обект по дъга. Усъвършенстваните програми като Adobe Flash ви позволяват да местите обекти по произволна крива, но браузърите все още са далеч зад тях в това отношение. Движението може да се случи само линейно, така че заместваме кривата с приблизителна полилиния. В математиката този метод се нарича апроксимация. Колкото повече точки поставим, толкова по-близо ще бъде полилинията до оригиналната крива и по-плавно движението, но от друга страна това усложнява работата, като всъщност я доближава до анимацията кадър по кадър. Затова е важно да се намери баланс между качество и разходи за труд.
Самата анимация на уеб страница се прави сизползвайки две неща. Продължителността на анимацията, забавянето преди нейното изпълнение, броят на повторенията и други параметри се определят чрез универсалното свойство на анимацията. А ключовите кадри и стойностите на свойствата на елемента се определят от правилото @keyframes. След това те се свързват помежду си с помощта на променлива, чието име измисляме сами. Схематично това изглежда така.
По този начин, след като сме създали няколко предварително зададени ключови кадри, можем да ги приложим към различни елементи, като посочим желаната променлива. Ето, например, как текстът да се показва гладко на екрана (пример 1).
Пример 1: Външен вид на текст
В този пример създаваме елемент с клас fadeIn, който има свойство за анимация, приложено към него със стойност fadeIn от 3s. Това означава, че анимацията ще продължи три секунди, но какво точно ще се случи през това време анимацията не знае, единствената й задача е да пренасочи към @keyframes с име fadeIn. Вътре в @keyframes има две ключови думи - от и до, те определят началните и крайните стойности на свойствата на елемента. Въз основа на това браузърът плавно променя стойността на непрозрачност от 0 на 1 за три секунди.
Обърнете внимание на префикса -webkit. Браузърът Chrome не поддържа оригиналните свойства, така че трябва да дублирате записи, като добавите този префикс.
Анимацията може да бъде сложна и да съдържа повече от два ключови кадъра, отколкото е показано в примера по-горе. След това ключовите кадри се определят като процент от времето на цялата анимация. 0% е началото на анимацията, 100% е крайният час, 50% е средата и т.н. Ако някои ключови кадри имат едно и също състояние, тогава те могат да бъдат групирани, както е показано в пример 2.
Пример 2 Ключови кадри
Ключовите думи от и до съответстват на 0% и 100%, така че можете да посочите както проценти, така и тезиключови думи, те са взаимозаменяеми.
свойство на анимация
Правилото @keyframes дефинира набор от ключови кадри и това е мястото, където неговата функционалност свършва. Какво да се прави с този набор, към какво да се прилага и как, определя универсалното свойство на анимацията. За да видите някакъв вид движение, трябва да зададете променлива, сочеща към @keyframes и продължителността на движението в секунди (s) или милисекунди (ms).
По подразбиране анимацията продължава определеното време и след това свойствата на елемента се нулират до първоначалното им състояние преди началото на анимацията.
библиотека animate.css
В повечето случаи анимацията се използва за създаване на добре познати типични ефекти. Защо в случая да не се възползвате от готови разработки в тази област? Има няколко различни CSS библиотеки, които просто трябва да свържете към вашия сайт и да добавите даден клас към желаните елементи. От тези библиотеки Animate.css и magic са популярни.
Първо трябва да изтеглите библиотеката. Има две възможности.
След това включваме файла animate.css по същия начин, както се прави с всеки друг стилов файл.
За да приложите анимационен ефект към желания елемент, добавете към него два класа - анимиран и клас с името на ефекта (вижте списъка с всички ефекти и имената им в сайта). Например искате да добавите трептене към изображение на страница. В HTML пишем следното:
След зареждане на страницата изображението ще трепти и анимацията ще спре. За безкрайно повторение добавете класа infinite.
По подразбиране цялата анимация в animate.css продължава една секунда, можете да увеличите времето чрез свой собствен стил. Ако искате да промените само продължителността на избрания ефект, използвайте класа animated.flash, както е показано впример 3. Вместо светкавица посочете приложения ефект. За да промените времето за всички ефекти, оставете само анимирания клас.
Пример 3: Използване на animate.css
Библиотека, подобна на принципа, се нарича магия. Той съдържа малко по-различни ефекти, така че коя библиотека да изберете в крайна сметка зависи единствено от вашия избор. Можете да видите анимацията в действие на този сайт.
Сега към избраните елементи добавяме класа magictime и класа с името на ефекта, избран в сайта (пример 4). Увеличаването на продължителността на анимация се извършва по подобен начин, като се използва свойството animation-duration.