Многие уже научились строить чистые интерфейсы и писать «отменить-повторить» в несколько строк.
А как насчет анимации? Их часто упускают из виду, и они не всегда вписываются в подход (состояние) ↦ DOM. Есть отличные решения, такие как React Motion, но что, если вам нужно создавать сложную анимацию или работать с Canvas с использованием физического движка? В нашем тексте объясняется, как работать с анимацией в приложениях React, и сравнивается несколько подходов (D3, React-Motion, грязные компоненты).
А также о том, как «запускать» анимацию в приложениях Redux. Материал основан на расшифровке доклада Алексея Тактарова с нашей декабрьской конференции HolyJS 2017 Москва.
Прилагаю видеозапись этого доклада: Будьте осторожны, трафик: под катом много картинок и гифок (сами понимаете, материал про анимацию).
Я хотел бы начать с истории.
Если бы вы были в Древнем Риме примерно в первом веке до нашей эры, вы могли бы встретить Витрувия.
Витрувий – один из самых известных архитекторов того времени.
Он написал 10 томов об архитектуре.
Многие были вдохновлены его работами.
Но самое интересное то, что в одной из своих книг он обозначил три главных качества, которыми должна обладать хорошая архитектура: сила, полезность и красота.
Мне кажется, эту триаду можно найти и в дизайне вещей, которыми мы пользуемся.
Для чего все это? Мы, разработчики, пишем приложения и сайты.
Мы делаем вещи, которыми люди пользуются.
Поэтому мне кажется, что и нам следует посмотреть на правила, выведенные две тысячи лет назад. Ведь приложения, которые мы делаем, должны решать конкретные проблемы людей.
Я думаю, все дело в обратной связи.
Это ключевой момент. И в какой-то степени обратная связь — это анимация, переходы между состояниями.
Далее я расскажу об анимации в приложениях с сохранением состояния на примере React.
Паттерны анимации на основе демо-версий реальных проектов.
Прежде чем говорить о React, давайте подумаем о том, как обычно работают анимации в браузерах и что они из себя представляют.
В идеальном мире анимация должна работать плавно.
Наивно полагать, что их можно сделать, например, с помощью setinterval или settimeout. И здесь есть два заблуждения.
Заблуждение №1
Мы ошибаемся .Потому что мы не можем использовать setTimeout для анимации.
Ведь setTimeout не гарантирует, что ваша функция действительно будет работать в течение указанного периода времени.
Это может привести к таким эффектам, как совмещение кадров.
То есть вы будете думать, что ваша анимация придет через 16 миллисекунд, это примерно 60 кадров в секунду, но на самом деле это займет больше времени, и этот долг будет накапливаться и накапливаться.
К счастью, есть функция, позволяющая бороться с этой проблемой — requestAnimationFrame. Это гарантирует, что обратный вызов будет выполнен в удобное для планировщика браузера время.
При этом хочу отметить, что он может работать и с нерегулярными интервалами.
Если вы хотите использовать requestAnimationFrame, я настоятельно рекомендую посмотреть, на какие браузеры вы ориентируетесь.
Если вы хотите использовать requestAnimationFrame в своих проектах, вам понадобится что-то вроде этого шаблона.
То есть вы объявите функцию, которая будет срабатывать в тот момент, когда должна произойти анимация.
Затем вы вызовете requestAnimationFrame — это будет означать, что мы выполним нашу функцию в нужный момент. Дальше интересный момент. В принципе, в конце функции мы могли бы вызвать планирование следующего кадра, но такой шаблон заключается в вызове requestAnimationFrame для следующего кадра в самом начале.
Так как никто не знает, что может произойти во время выполнения функции.
Может быть, она, например, выдаст исключение.
Поэтому следующий кадр лучше сразу планировать в самом начале.
Теги: #JavaScript #react.js #animation #holyjs #holyjs #Taktarov// Or use a polyfill: // import requestAnimationFrame from 'raf' const { requestAnimationFrame } = window const animate = () => {
-
Xpath, Xslt И Другие Спецификации Xml
19 Oct, 24 -
Какой Ты, Macbook Air 13,3″ 2013 Г.?
19 Oct, 24 -
Наблюдатель, Объект, Поток, Среда
19 Oct, 24 -
Как Захватить Мир, Доказав, Что P=Np
19 Oct, 24
