Flipboard GDI
Dec. 26th, 2015 01:45 pmС Рождеством всех католиков в этом чате! На меня сегодня откровение в честь праздника снизошло )
Сегодня случайно на айфоне попал на сайт Флипборда – обычно я через апп читаю – и с сайта просто в восторг пришёл. На мобильном сайте сделан параллакс с фэйдом, и это всё мгновенно реагирует на тач, и всё плавно как в приложениях. Это выглядит примерно как на картинке под катом, но только в 60fps, без рывков.
Кто пробовал такое делать через HTML для телефонов, думаю, понимает, что это исключительная по сложности задача на оптимизацию.
Я, естессно, полез смотреть код – и пропал часа на четыре. Там такая круть, что просто дух захватывает.
Решение вполне под стать сложности челленджа. На мобильном сайте Флипборда HTML играет декоративную второстепенную роль – всё рендерится через canvas. То-есть ребята просто забили на HTML DOM и сделали свою версию GDI. Ни больше, ни меньше.
По-хорошему, вся страница мобильного сайта флиборда состоит из одного <canvas> на который и рендерится весь контент.
Весь этот плавный параллакс при промотке – это в реальном времени отслеживание тач-событий и рендер на канвас. Чуваки пересоздали momentum scrolling, фэйд и тп.
То-есть, суть подхода в том, что мы сложный и тяжёлый DOM+CSS заменяем на очень шустрый, пишущий прямо в GPU, canvas, понимающий минимальный наборо команд. И внезапно манипулировать чистыми битмапами оказывается быстрее, чем HTML-элементами.
Вау, аплодирую стоя. Такой бескомпромиссной крутизны в медиа я ещё не встречал.
Нашёл, как это всё сделано, непосредственно в блоге Флипборда, отличное чтение, очень… мотивирующее.