Flipboard GDI
Dec. 26th, 2015 01:45 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
ermouthС Рождеством всех католиков в этом чате! На меня сегодня откровение в честь праздника снизошло )
Сегодня случайно на айфоне попал на сайт Флипборда – обычно я через апп читаю – и с сайта просто в восторг пришёл. На мобильном сайте сделан параллакс с фэйдом, и это всё мгновенно реагирует на тач, и всё плавно как в приложениях. Это выглядит примерно как на картинке под катом, но только в 60fps, без рывков.
Кто пробовал такое делать через HTML для телефонов, думаю, понимает, что это исключительная по сложности задача на оптимизацию.
Я, естессно, полез смотреть код – и пропал часа на четыре. Там такая круть, что просто дух захватывает.
Решение вполне под стать сложности челленджа. На мобильном сайте Флипборда HTML играет декоративную второстепенную роль – всё рендерится через canvas. То-есть ребята просто забили на HTML DOM и сделали свою версию GDI. Ни больше, ни меньше.
По-хорошему, вся страница мобильного сайта флиборда состоит из одного <canvas> на который и рендерится весь контент.
Весь этот плавный параллакс при промотке – это в реальном времени отслеживание тач-событий и рендер на канвас. Чуваки пересоздали momentum scrolling, фэйд и тп.
То-есть, суть подхода в том, что мы сложный и тяжёлый DOM+CSS заменяем на очень шустрый, пишущий прямо в GPU, canvas, понимающий минимальный наборо команд. И внезапно манипулировать чистыми битмапами оказывается быстрее, чем HTML-элементами.
Вау, аплодирую стоя. Такой бескомпромиссной крутизны в медиа я ещё не встречал.
Нашёл, как это всё сделано, непосредственно в блоге Флипборда, отличное чтение, очень… мотивирующее.
![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
no subject
Date: 2015-12-26 01:05 pm (UTC)Её можно перефразировать, как «высокооптимизированный, запроганный на С HTML + CSS заменили на интерпретируемый, тормознутый яваскрипт, прорисовывающий каждый пиксель вручную», хотя конечно работает флипборд хорошо.
Я читал, что у них сделано, когда делал свой таймлайн к плееру, но мы сделали круто и без канваса.
no subject
Date: 2015-12-26 08:47 pm (UTC)что наводит на мысли по поводу насколько в HTML/CSS все запущено.
no subject
Date: 2015-12-27 08:30 am (UTC)no subject
Date: 2015-12-27 12:41 pm (UTC)Тут большой вопрос, какое оно должно быть. Чуваки вот не запарились и придумали себе IR-метафайл из спрайтов и таймлайна к ним. Кому-то может и побольше понадобиться, только вот где граница этого «побольше»?
no subject
Date: 2015-12-26 09:16 pm (UTC)> мы сделали круто и без канваса
А посмотреть? Сам не нашёл.
И да, внезапно:
http://erlyvideo.org/vod – 404, это из меню solutions 3й пункт, 404
http://erlyvideo.org/dvr – 404, со страницы http://erlyvideo.org/flussonic третья ссылка
В обеих пропущен /doc в линках.
http://erlyvideo.org/news/2015-05-31-version-4-5-1 – это линк с заглавной в новости, нет ничего по ссылке
no subject
Date: 2015-12-27 05:32 am (UTC)Вот тебе пример нашего плеера: http://demo.erlyvideo.ru/karusel/embed.html?dvr=true
там обычный HTML.
no subject
Date: 2015-12-27 06:31 am (UTC)Зато мультики посмотрел )
no subject
Date: 2015-12-27 06:35 am (UTC)Слайд/зум работают на requestAnimationFrame
no subject
Date: 2015-12-27 12:25 pm (UTC)http://demo.taskwall.ru/mdemo.html, выбирай Эльвиру, смотреть с мобилы лучше.
ы!
Date: 2015-12-26 08:52 pm (UTC)