Навіщо взагалі робити анімації на чистому js
можете жахнутися ви. Адже є ж маса бібліотек. наприклад, наша улюблена jQuery. Так-то воно так, але чисті анімації корисно вміти писати ось в яких ситуаціях.
- Робиться невеликий сайт з мінімумом ефектів. Сторонні бібліотеки не підключаються. І раптом виникає необхідність зробити плавне розчинення елемента при кліці. Чи варто через одного таку дрібницю підключати jQuery. Багато підключать і за фактом зроблять правильно - в сучасному світі 98Кб нікого не цікавлять. Однак, при роботі в команді бувають такі вперті тімліда, які не дозволять через дрібну анімації впроваджувати в проект сторонню бібліотеку. Ось і доведеться вам розбиратися в анімації самим.
- Використовується готова бібліотека, і в ній не знаходиться потрібного ефекту. Наприклад, вам потрібно, щоб елемент, перед тим як зникнути, три рази повернувся за годинниковою стрілкою, підстрибнув і тільки потім розчинився. В такому випадку бібліотеку доведеться розширювати. і вам знову ж знадобиться розуміння основ організації анімаційних ефектів.
Тому розуміння того, як організовуються анімації для елементів, зайвим явно не буде. У даній статті ми розглянемо базові прийоми і найпростіший приклад - напишемо функцію, яка вміє плавно приховувати елемент DOM, зменшуючи його прозорість.
У нас буде два файли: index.html і script.js. HTML-документ дуже простий:
Ми зробили div 300х200 пікселів, залили його кольором, дали невеликий зовнішній відступ і привласнили id = item. Нічого більше поки що нам і не потрібно.
Тепер організуємо роботу в js. Для початку повісимо на наш div якусь подію:
Після цього за допомогою document.getElementById ми отримуємо div з id = item і встановлюємо подія onclick, при настанні якого відбудеться показ перевірочного Алерта. Насправді, замість Алерта ми трохи пізніше помістимо сюди виклик функції fade, яку зараз почнемо розглядати.
Отже, що ж нам потрібно для анімації? Спробуємо відразу продумати такий інтерфейс функції, який в подальшому дозволить зробити її по-справжньому зручною! Вийде щось таке:
Дійсно, у будь-який анімації є елемент, над яким вона проводиться, і час, протягом якого ми бачимо плавні зміни. Але що за кадри в секунди?
Так ось, ця функція другим параметром приймає час в мілісекундах, через яке їй потрібно повторювати своє виконання. Виходить, що якщо ми напишемо:
= То будемо бачити Алерт кожні 20 мілісекунд. А якщо напишемо
З кадрами в секунду це співвідноситься дуже легко. В одній секунді тисяча мілісекунд, значить, якщо ми хочемо показувати людині 50 кадрів в секунду, то 1000/50 = 20мс - кожні 20 мілісекунд ми повинні повторювати дії по інтервалу.
Виходячи з усього вищесказаного, ми вже можемо зобразити базовий хребет нашої функції:
Конструкції var fps = f || 50 і var time = t || 500 оголошують параметри за замовчуванням. Тобто, якщо при виклику ми не передамо в функцію другий і третій елементи, то їх значення будуть рівні відповідно 50 і 500.
Сама конструкція організації setInterval теж логічна. Ми встановлюємо інтервал з періодичністю 1000 / fps. Після завершення анімації цей інтервал нам потрібно видалити.
Зверніть увагу на рядок elem.style.display = 'none'. Це вказівка потрібно, щоб після обнулення непрозорості елемента, він звільнив місце. Якщо цього не зробити, елемента не буде видно, але його місце буде залишатися порожнім - нижні елементи не перемістяться туди.
Уже майже все! Нам залишилося додати тільки зміна видимого властивості і перевірку на завершення анімації.
Занесемо це все в код:
Основну керуючу роль тут відіграє змінна steps, в якій ми зберігаємо інформацію про те, скільки ще кадрів залишилося показати. Коли steps досягне нуля, анімація завершена.
Усе. Залишилося тільки правильно передати параметри в нашу функцію:
Єдина тонкість - this - це вказівка на поточний елемент, за яким був проведений клік.