Flipboard GDI

[ermouth]

С Рождеством всех католиков в этом чате! На меня сегодня откровение в честь праздника снизошло )

Сегодня случайно на айфоне попал на сайт Флипборда – обычно я через апп читаю – и с сайта просто в восторг пришёл. На мобильном сайте сделан параллакс с фэйдом, и это всё мгновенно реагирует на тач, и всё плавно как в приложениях. Это выглядит примерно как на картинке под катом, но только в 60fps, без рывков.

Кто пробовал такое делать через HTML для телефонов, думаю, понимает, что это исключительная по сложности задача на оптимизацию.

Я, естессно, полез смотреть код – и пропал часа на четыре. Там такая круть, что просто дух захватывает.

Решение вполне под стать сложности челленджа. На мобильном сайте Флипборда HTML играет декоративную второстепенную роль – всё рендерится через canvas. То-есть ребята просто забили на HTML DOM и сделали свою версию GDI. Ни больше, ни меньше.

По-хорошему, вся страница мобильного сайта флиборда состоит из одного <canvas> на который и рендерится весь контент.

Весь этот плавный параллакс при промотке – это в реальном времени отслеживание тач-событий и рендер на канвас. Чуваки пересоздали momentum scrolling, фэйд и тп.

То-есть, суть подхода в том, что мы сложный и тяжёлый DOM+CSS заменяем на очень шустрый, пишущий прямо в GPU, canvas, понимающий минимальный наборо команд. И внезапно манипулировать чистыми битмапами оказывается быстрее, чем HTML-элементами.

Вау, аплодирую стоя. Такой бескомпромиссной крутизны в медиа я ещё не встречал.

Нашёл, как это всё сделано, непосредственно в блоге Флипборда, отличное чтение, очень… мотивирующее.