НОУ ИНТУИТ, Лекція, Анімація у JavaScript
Як знає кожен любитель мультфільмів, анімація насправді складається з багатьох невеликих змін, які створюють ілюзію якогось руху. Анімація є потужним засобом, вона добре підходить для привернення уваги. Недолік тут у тому, що вона привертає увагу, хочете ви цього чи ні. Анімаційні ефекти можуть зробити web-додаток вражаючим, але головне тут - вчасно зупинитися.
Простий приклад: метод згасання жовтого кольору
Одним із найпоширеніших застосувань анімації є метод згасання жовтого кольору (http://www.37signals.com/svn/archives/000558.php), коли для зміненої області на сторінці задається жовтий колір фону, який потім поступово знову повертається до вихідного кольору. Це хороший, ненав'язливий спосіб показати, що щось змінилося (наприклад, з'явився додатковий контент , або повідомлення зворотного зв'язку форми), не заважаючи тому, що робить користувач . Подивіться приклад згасання жовтого кольору в дії (http://dev.opera.com/articles/view/javascript-animation/yft_pure_js.html).
Принцип в основі згасання полягає в тому, що визначається жовтий колір фону елемента згасання, а потім, за деяку послідовність кроків його колір повертається до вихідного. Тому, якщо вихідний колір фону був червоний, потім колір задається жовтим, потім оранжево-жовтим, потім оранжевим, потім червоно-оранжевим, і потім червоним. Кількість використаних кроків визначає, наскільки плавно відбувається зміна кольору, а час між кроками визначає, як довго триває зміна кольору. При зміні кольору можна використовувати корисний факт із CSS: колір можна визначити як трійку звичайних чисел або як шістнадцятковий рядок. Тому #FF0000 (червоний колір) можна визначити як rgb(255,0,0) .Зміна від жовтого до червоного за п'ять кроків означає, тому, перехід від rgb(255,255,0) (жовтий) до rgb(255,0,0) за п'ять наступних кроків:
Ви задаєте колір фону елемента як rgb(255,255,0) , потім через деякий час (припустимо, 100 мілісекунд), змінюєте колір фону на rgb(255,192,0) , а потім через 100 мс задаєте колір фону як rg2 0) , і т.д.:
| rgb(255,255,0) | |
| rgb(255,192,0) | 100 мс |
| rgb(255,128,0) | 200 мс |
| rgb(255,64,0) | 300 мс |
| rgb(255,0,0) | 400 мс |
Весь процес займає 400 мс (менше ніж половина секунди), і виходить плавний перехід між жовтим та червоним кольором. Зручно те, що ми змінюємо лише одну частину кольору (зелений канал; три частини кольору rgb становлять червоний, зелений та синій канали), але цілком можлива зміна більше одного каналу. У цьому прикладі значення зеленого каналу змінюється від 255 до 0 за чотири кроки, що означає зміну на 64 одиниці за кожен крок.
Очевидно, що не завжди потрібна зміна від жовтого до червоного кольору, тому функція повинна мати загальний вигляд. Якщо відомі початковий і кінцевий кольори та кількість кроків, то зміна кольору на кожному кроці визначатиметься звичайною математикою. Якщо визначити масив startcolour як список із трьох чисел ( [255,255,0] ), а endcolour як аналогічний список ( [255,0,0] ), тоді величина зміни кожного кольору на кроці буде:
Потім ми використовуємо setInterval для зміни кольору фону елемента на кроці:
На кожному кроці беремо поточний колір і змінюємо червоний канал на величину red_change, зелений канал на величину green_change, і синій канал на величину blue_change. Потім задаємо для реального кольору фону новий елементколір: [255,255,0].toString() буде "255,255,0", тому ми використовуємо toString() для створення rgb(255,255,0) , і задаємо це як колір тла елемента.
Однак функція setInterval викликатиме функцію дії нескінченно; вона не зупиниться, коли буде досягнуто заданого кольору. Щоб зупинити її, використовуйте clearInterval() ; наступний код підраховує, скільки разів була викликана дія, та очищає інтервал виклику через задану кількість кроків:
Так і робиться анімація: невеликі зміни на одному кроці.
Як задати startcolour та endcolour? Один простий спосіб полягає в розміщенні наведеного вище коду функції fade :
а потім можна запускати згасання жовтого кольору на елементі за допомогою виклику функції наступного виду:
або "згасання червоного кольору", яке задає для елемента червоний колір і потім згасає до синього (колір фону елемента), таким чином:
Цей приклад змінює колір фону, але може використовуватися для чого завгодно, що змінюється: колір переднього плану (для пульсуючих психоделічних текстових ефектів), напівпрозорість (щоб зробити щось зникаючим і таким, що з'являється), висота і ширина (для збільшення елемента, або для його стиснення в ніщо, перш ніж він зникає).
та функцію animate () для більш складної спеціальної роботи:
Це цілком інтуїтивно зрозуміло - береться елемент і змінюється атрибут CSS width протягом 1500 мілісекунд, з вихідного поточного стану до 70% - функція animate описана тут (http://docs.jquery.com/Effects).
Середовище розробкиPrototype's scriptaculous(http://script.aculo.us/) пропонує аналогічні засоби, такі як Effect. Fade ('id_of_element'), і багато, багато інших. БібліотекаYahoo UI(http://developer.yahoo.com/yui/3/animation/)також може створювати аналогічні ефекти:
Саме тому ми розглянули приклад, починаючи з перших принципів, перш ніж звертатися до бібліотек.
Більш складний приклад: переміщення та зміна розміру
Хоча метод згасання жовтого кольору демонструє анімацію, він дещо нудний. Коли більшість людей уявляють собі анімацію, вони зазвичай мають на увазі рух. Цікавий прийом попередження користувача про те, що щось сталося, не перериваючи його робочого процесу, полягає у немодальному повідомленні. Замість виведення діалогового вікна alert() , яке вимагає від користувача клацанняOK, перш ніж він зможе продовжити, помістіть повідомлення просто в плаваючий div на сторінці, який ненав'язливо залишається там, поки не отримає підтвердження. Другою досить цікавою річчю може бути надання користувачеві можливості повернутися до повідомлення, для якого він підтвердив бажання прочитати його ще раз. Тому давайте реалізуємо плаваюче повідомлення, яке, після клацання на ньому, "сплескується" в кут екрану, і потім по клацанню може бути знову відновлено. Ви можете подивитися невелику демонстрацію такого повідомлення, що "схлопується" (http://dev.opera.com/articles/view/javascript-animation/moving_messages_jq.html), щоб зрозуміти загальну ідею.
Наведений вище демонстраційний приклад використовує для роботи бібліотеку jQuery (http://jquery.com/), але як згадувалося, більшість бібліотек надають досить схожу концепцію анімації, і тому ви зможете реалізувати принципову частину, використовуючи бібліотеку, що віддається перевагу. По суті, необхідно зробити таке:
- Показати плаваюче повідомлення в центрі екрану
- Коли на ньому робиться клацання:
- Перемістити його горизонтальнупозицію у крайнє праве становище
- Перемістити вертикальну позицію вгору
- Задати його ширину рівною 20px
- Задати його висоту рівною 20px
- Зробити його щільність рівною 20%, тому воно стає майже прозоро і приховати в ньому текст
Виконати анімацію за допомогою jQuery дуже легко: просто використовуйте функцію . animate () та надайте бажаний кінцевий результат анімації (і як довго вона має виконуватися):
Функція отримує нашоб'єкт і, за 300 мілісекунд, замінює його ширину і висоту на 20px, його верхню і праву позиції на 20px, його властивість стилю margin-right на 0px, і його щільність (у браузерах, які підтримують щільність зображення) на 20%. Потім це просто питання програмування в стилі jQuery, щоб отримати необхідну анімацію, коли відбувається клацання на повідомленні:
Для відновлення повідомлення, коли на ньому знову відбувається клацання, потрібно просто ще один дзвінок . animate () :
і з невеликою логікою, яка визначає, чи буде повідомлення в даний момент показано або стиснуто (щоб знати, яка анімація виконується), і невеликим кодом CSS для опису початкового стилю повідомлення (велике, зелене, центроване по горизонталі), маємо все, що потрібно. Не більше тридцяти рядків коду. Саме тому бібліотеки є гарною ідеєю!
Переходи CSS
змусить div плавно зникнути протягом однієї секунди в браузері, що підтримує, коли над ним знаходиться покажчик миші. Однак ці переходи CSS є дуже новими, і підтримуються тільки в найсучасніших браузерах, тому якщо потрібно, щоб анімація працювала для більшої частини користувачів, то для цього потрібно використовувати сценарії DOM .