Наверх ▲

На грани возможного. 3D, 2D, анимация и эмоции в веб c помощью CSS

Антон Немцев Антон Немцев Независимый frontend-разработчик c 14-летним стажем, создатель Frontender Magazine, докладчик на WSD, представитель ВСТ в Украине.

Антон Немцев: Добрый день! Меня зовут Антон Немцев. Я – веб-разработчик с более чем 10-летним стажем работы в области front-end. За это время я успел приложить руку к самым разным проектам, начиная от большинства брендов JTA, включая "Camel" и "Pall Mall", и заканчивая админкой "Групона".

Сегодня я пришел к вам с благой вестью: CSS "умеет" 3D, анимацию, и вообще.

Остается только один вопрос: зачем?

Давайте попробуем разобраться, что именно он может делать и зачем.

Примерно в 1950-1960 годах была придумана пирамида Маслоу. Я думаю, вы все в той или иной степени с ней знакомы. Это пирамида, которая описывает наши потребности: физиологические, в безопасности, в причастности, в уважении. Вершина этой пирамиды – самоактуализация.

Я думаю, аналогичную штуку можно нарисовать для программного обеспечения:

  • функциональность;
  • надежность;
  • удобство.

Но чего-то явно не хватает. Пирамида не завершена. Этого мало.

Программное обеспечение должно быть офигенным.

Давайте рассмотрим все эти пункты более подробно.

 

Функциональность. Программное обеспечение обязательно должно выполнять функции, которые нужны клиенту. Если оно этого не делает, оно совершенно бесполезно и никому не нужно. Это очевидно.

Надежность

Все мы знакомы изображением кита Fail Whale, который появлялся в связи с неполадками в "Twitter". Впрочем, мало кто знает, что очень многие пользователи после очередного его появления ушли в китобои и прославились отъявленной жестокостью и садизмом по отношению к ни в чем не повинным животным. Скажу честно, я был одним из них.

Программное обеспечение должно быть надежным. Если мы не можем быть уверены в том, что оно отработает так, как надо, когда будем им пользоваться, мы не будем его покупать. Оно нам не нужно. Мы не можем на него положиться.

Программное обеспечение должно быть удобным. Если нам надо прочитать толстую книжку, чтобы пользоваться программой, если нам надо сделать десять кликов, чтобы выполнить элементарнейшую задачу, мы просто не будем пользоваться этой программой. Она нам не нужна. Мы ее не купим. Не заплатим за нее деньги. Соответственно, программное обеспечение должно быть удобным.

Программное обеспечение должно быть офигенным. Это достаточно сложное понятие, как и самоактуализация в пирамиде Маслоу.

Каким образом достигается офигенность программного обеспечения?

Например, мы можем наделить продукты индивидуальностью. У нас есть basecamp. Все видели его в начальном варианте. Он удобен, функционален, надежен. Но когда вы на него смотрите, то понимаете: несмотря на то, что это чудо воплощает дистиллированную надежность и удобство, оно, судя по всему, рисовалось для роботов. Им не слишком приятно пользоваться.  

Однако недавно создатели сделали редизайн. Теперь, пользуясь, мы чувствуем, что это делали люди. Это делалось для людей. Нам приятно этим пользоваться.

Соответственно, в нашем программном обеспечении должна чувствоваться индивидуальность, человеческая рука.

Физика

Дело в том, что мы все живем в реальном, а не виртуальном мире, кто бы что себе не думал. Мы с детства учимся обращаться с какими-то объектами. Это может быть выключатель, кнопка, книга. Если мы каким-то образом создаем подобия этих объектов в виртуальном мире, нам проще ими пользоваться.

Уменьшается время обучения, потому что сразу понятно, что можно сделать с выключателем. Нам более комфортно пользоваться этими вещами, потому что мы к ним привыкли.

Пример

Если есть сервис, который позволяет читать книгу, хорошо, если там будет перелистываться страничка. Если это мгновенная смена, которая выносит мозг, нам некомфортно.

Удовольствие

Работа с программным обеспечением должна приносить люто-бешеный fun! Говоря проще, она должна доставлять удовольствие.  

Например, MailChimp для этого использует маскота. Он абсолютно никак не влияет на рабочий процесс – они существуют в разных плоскостях. Иногда эта обезьянка появится, что-нибудь забавное ляпнет – и у пользователя сразу улыбка до ушей. Все счастливы. Как-то так.

Программное обеспечение во время работы должно доставлять удовольствие.

Давайте посмотрим, как все это переложить на наши задачи, на CSS, о котором мы говорим.  

Я выделил три направления, которые, как мне кажется, актуальны:

  • баннеры;
  • сайты;
  • промо-игры.

Все эти задачи я в течение своей рабочей карьеры мне встречались неоднократно. Давайте рассмотрим их поподробнее.

Начнем с баннеров.

Это HTML5. Нет, это не видео и не flash. Просто CSS. Собственно говоря, используется анимация: кей-фреймы. По-моему, неплохо.

Этой штуке уже, наверное, года два. Ее сделал Вадим Макеев для "Opera Software". Должен заметить, что transition, которые поддерживаются практически всем, чем угодно, прекрасны. Это больше, чем может дать gif-баннер, и явно не меньше, чем может дать flash.

Вы мне не верите... Flash – крут. HTML5 – нет. Проверим!

Два баннера. Один из них flash, а другой HTML5. Скажите, пожалуйста, flash-баннер слева или справа?

Реплика из зала: Я бы сказал, слева.   

Антон Немцев: Итак, баннер слева HTML5. Вы сказали, что левый – flash или HTML5?

Реплика из зала: HTML5.

Антон Немцев: Что же, угадали! Но попробуем еще раз.

Реплика в зале: А правый что?

Антон Немцев: Правый – HTML5. Теперь попробуем угадать: верхний баннер – это flash?

Реплика в зале: Верхний, похоже, HTML5.

Антон Немцев: Проверяем верхний.

Реплика в зале: Flash, flash!

Антон Немцев: Это HTML5. Да.

Реплика в зале: По тексту можно догадаться.

Антон Немцев: Так, последний вариант. Как вы думаете, верхний баннер – это flash или HTML5?

Реплика в зале: Без понятия.

Антон Немцев: Как вы думаете?

Реплика в зале: HTML5 верхний.

Антон Немцев: Ок. Сейчас проверим. Увы, это flash. В общем-то, как бы вы ни отвечали, я думаю, все вы признаете, что эти баннеры похожи. Практически идентичны.

Какие достоинства у HTML5-баннеров?

Это – гомогенность. Что это значит? Очень сложно выделить HTML5-баннер из общего контекста. Везде HTML, везде контекст. Если мы не напишем там большими буквами "баннер", то это проблематично.

Да, есть плагины для мобильного, для десктопа, которые могут выделить такие баннеры. Как правило, они требуют как минимум вмешательства пользователя. Автоматом они работают разве что по спискам, которые составлены на основе опыта пользователей.

В противном случае мы просто сгубим контент. Это делать нельзя.

Таким образом, мы можем сказать, что благодаря гомогенности большая часть HTML5-баннеров будет просмотрена. Вероятность этого больше, чем у flash.

Скорость загрузки. Представьте себе, что у вас крутой iPhone. Вы не в Москве, все равно где – например, приехали в Пермь. В этот момент становится очень не все равно, загружаете вы в качестве рекламы картинку gif или HTML5-баннер.

Почему?

То, что вы видели (вращающееся прекрасное нечто), в несжатом виде занимает меньше 8 килобайт.

Скажите, сколько бы заняло это нечто даже в виде оптимизированного сжатого flash? Я думаю, вряд ли меньше. Мы получаем профит.

Стоимость

Я работал специалистом по flash, верстальщиком, и могу точно сказать: одинакового уровня спрециалист по flash и верстальщик "стоят" очень по-разному. Верстальщик дешевле. Порог вхождения в CSS и в HTML очень невысок. Таким образом, у нас больше специалистов, и они дешевле. Вы можете экономить.

Web-API

Что это значит? Мы можем применять к баннерам, допустим, Media Queries. Все вы понимаете, "растяжка" и баннер типа "tower" – это две разные flash-анимации, две разные картинки. 

Один и тот же HTML-код мы можем приспособить и для того, и для другого. Но Media Queries – это еще не все. У нас огромные возможности.

Например, мы можем использовать геолокацию. Допустим, зашли вы на туристический сайт Дубая, а тут наш баннер! Мало того, что он предлагает вам билеты в Дубай, – он еще и показывает на Google-карте (часть баннера) путь до офиса, где их можно забрать. По-моему, неплохо.

Edge

Пока это еще только проект, но в скором времени он все-таки выйдет. Ваши HTML5-баннеры с графической средой разработки смогут делать даже пятилетние жители Эфиопии. Естественно, с разрешения родителей.

Еще более широкий круг разработчиков. Еще более дешевые разработчики. Да, это профит.

Обычно у нас идет такая система деградации: от flash откатываемся к изображениям. Это более 80 % случаев.

На мобильных мы можем дать больше: давайте от flash откатываться к HTML5, а потом к изображениям.

Да, это удваивает стоимость разработки. Мы платим лишнее за разработку HTML5-баннера. Но если идет рекламная кампания, которая ориентирована на мобильную среду, это даст выгоду. Вы видели, какой баннер можно сделать. Я думаю, он привлечет внимание и клиентов. Соответственно, даст покупки, коммерцию.

Давайте рассмотрим ключевые моменты изготовления этого баннера.

Вот такая "простыня": это сам код баннера. Давайте посмотрим его в более привлекательном виде.

Собственно говоря, обертка.

Moo-activ – это просто ссылочка. На нее лучше не "навешивать" всякие 3D-штуки. Если навешивать их на ссылки или, скажем, input, есть риск того, что будут какие-нибудь сюрпризы. Неприятные, как правило.

Outer-wrapper отсекает все, что нам не нужно в баннере, и формирует 3D-контекст.

Inner-wrapper мы вращаем. Видели эти безумные повороты? Это вращается inner-wrapper. Почему? Это в плане ресурсов менее затратно, чем вращать три блока, которые внутри.

Внутри находится слоган 1, слоган 2  и "пол" (фон). Вот так это все приблизительно выглядит. Так как сходу не очень понятно, что это вообще такое, давайте посмотрим, как это смотрится в жизни, в движении.


Вот баннер, только в режиме фреймов. Я думаю, теперь просто и понятно, как это сделано. Вы видите, что с точки зрения HTML и CSS3 это тривиальнейшая задача.

Давайте более подробно рассмотрим эффекты.

Эффект размытия текста. Все просто – color:transparent. Фактически буковки прозрачные. Размытость, а потом четкость букв мы получаем за счет тени. Изначально она просто размытая, а потом нулевое размытие (точно повторяет буквы). Как видите, эффектно.


Перспектива

Она достигается за счет трех свойств.

  • ·        Perspective-origin. Грубо говоря, точка зрения камеры (где она расположена).
  • ·        Perspective. Это предполагаемое расстояние от дисплея до камеры.
  • ·        Backface-visibility. Это значит: если .dif, при повороте мы будем видеть его заднюю сторону или нет. Соответственно, если visible, будем.

Более подробно вы можете ознакомиться с этим в спецификации.


Трансформации

Есть трансформации (transform) – с помощью них мы задаем, как именно трансформировать объект.

  • ·        Transform-origin. В какой именно точке вне или внутри объекта мы применяем трансформацию.
  • ·        Transform-style. Есть два варианта. Flat – будет отображена проекция трансформации на плоскость. Preserve-3D – будет трехмерная штука (то, что вы видели).

Подробности в спецификации.


Анимация поворота

Она выглядит примерно так. Мы задаем keyframe (его имя), начальную точку, любые промежуточные точки в процентах и конечную точку.

В данном случае мы анимируем поворот. Был "rotate 90◦" , а стал 0. Эта анимация вот так поворачивает блок.


Анимация появления текста

Идея абсолютно та же, только мы анимируем text-shadow. Как text-shadow работает, я рассказал на несколько слайдов раньше.


Теперь применим анимацию к элементу. Это развернутое описание. Естественно, все это делается одним-единственным свойством "animate".

  • ·        Animation-name – это имя. То, что мы писали после keyframe.
  • ·        Duration – продолжительность анимации по времени.
  • ·        Time-function – насколько она будет линейна.
  • ·        Delay – это промежуток времени, который проходит между присвоением свойства элементу и началом трансформации.  
  • ·        Iteration-count – это количество повторов анимации.
  • ·        Direction – направление. Оно может быть прямым (normal) и обратным. Мы можем проигрывать анимации как прямо, так и обратно.
  • ·        Fill-mode – останется ли состояние анимации после того, как она закончится.

Подробности в спецификации.

Плавная смена состояний достигается с помошью применения transition. Если мы задаем transition-property (свойство, которое будет изменяться плавно), можно писать "all". Тогда все изменения будут плавными.

Параметр "Duration" определяет, как быстро изменяется свойство.

Time-function указывает, насколько линейно оно изменяется.    

Delay – это задержка между присвоением свойств и началом преобразования.  

Подробности в спецификации.

У вас есть возможность задать два вопроса касательно баннера. Есть желающие?

Реплика из зала: Почему мы от flash переходим к HTML5, а не от HTML5 к flash?

Антон Немцев: Flash на сегодняшний день является основной штукой. У нас есть IE. Если мы делаем одну рекламную кампанию, мы, как правило, не заморачиваемся с разными моделями поведения. В результате в IE и в большинстве браузеров сейчас будет реализована технология flash.

Если flash нет (например, на планшетных компьютерах и мобильных телефонах), отыграет HTML5-рекламка. Если и этого нельзя, покажется изображение.

Через какое-то время старые IE уйдут в прошлое. Тогда во flash больше необходимости не будет. По большому счету, вы можете реализовать баннер так, как вам удобнее. Все зависит от контекста и задач, которые стоят перед рекламной кампанией.

Реплика из зала: В 19 Chrome flash будет или HTML5? Если HTML5, значит, ваша посылка неверна. Все-таки мы деградируем от HTML5 к flash. Просто в IE HTML5 пропускается.

Антон Немцев: Можно и так. Как хотите, так и играйте.

Реплика из зала: Согласно вашему подходу, в 19 Chrome будет flash или HTML5?

Антон Немцев: В 19 Chrome?

Реплика из зала: Это девелоперская версия.

Антон Немцев: Согласно моему подходу (тому, что я описал), там все-таки будет flash. Но можно и наоборот. Тут решайте сами.


Теперь посмотрим, как это все можно "прикрутить" к сайтам.

 

Есть такая замечательная штука, как Beercamp. Они вообще известны своими совершенно провокационными штуками. Мы получаем wow-эффект. Это обычные CSS и HTML. По-моему, очень мило получается. 


Еще один пример wow-эффекта. Как видите, при прокрутке шапочка очень красиво анимируется. Какой смысл? Как я уже сказал, должно чувствоваться присутствие человека.


Impress.js. Это штука, с помощью которой можно делать отличные презентации. Там используются и 3D-эффекты.


Еще одна штука. Пример прогрессивного улучшения (англ. progressive enhancement). Наводим курсор на изображение, и оно в 3D красиво вращается. С другой стороны, если этого не будет, ничего не потеряется. Но оно приятно и радует глаз.


В Wannafun вращаются фотографии. Очень мило вращаются, между прочим.

Тут используется даже не совсем 3D. Собственно говоря, это масштаб. Но получается эффект псевдо-3D. Как видите, оно "выезжает" к нам, становится ближе. Нам сразу понятно, что мы выбрали это. Это красиво.

Еще можно помещать большой объем информации в малый. Примером может быть вот такая штука. Все фишки мы можем посмотреть вот так. Красивый переворот плашки, а с другой стороны фишки, фишки, фишки.

Есть две компании, которые на данный момент очень круто все это внедряют. Во-первых, это "Злые марсиане". Тут их представители, кстати, присутствуют. У них это можно увидеть на таких сайтах, как "Групон", Wannafun, о котором я уже говорил, и не только на них. Золотые, кстати, ребята.

Еще есть Soft Cat. Эти ребята еще не "выкатили" свои проекты, но их сотрудники мне сказали, что у них не меньше трех проектов, в которых активно используется 3D, и что скоро они будут в продакшн.

Ребята, а вы не используете 3D-эффекты у себя в проектах? Выпадаете из тренда! Все заказы идут им.

Еще я делаю вот такую штуку. Так мы экономили место в приложении для Facebook. Нам надо было в малый объем вместить много информации. Наводим курсор на фотографию товара и видим цену. Причем с приличным эффектом.

Обычно при деградации можно либо откатиться, как я уже сказал, к статике, либо сделать как-нибудь так. Это либо альтернативная версия представления контента, либо скрипты.

Часто альтернативная версия делается за счет Modernizer. Это библиотека. Подключаешь – она в HTML в БАД добавляет нужные классы. Потом по ним можно определить, поддерживается у нас 3D или нет. Соответственно, просто использовать это в CSS.

Тут я сделал все по-хитрому с помощью головоломных хаков, без Modernizer. Зачем? На самом деле, так делать не стоит. Но я хочу показать, что так можно сделать. Возможно, в ситуации, когда нельзя использовать Modernizer, это кому-нибудь поможет. По крайней мере, я очень на это надеюсь.

Давайте рассмотрим ключевые моменты внутри "крутилки", которую я сделал.

Кроме того, что я описал, это код нашего товара. Есть: "a href". Есть блок "window". Все это HTML5, поэтому .div можно "запихнуть" в ссылку. Это вполне легитимно. Нам надо как-то это вращать.

С самого начала мы берем цену (price). Отодвигаем ее на один пиксель дальше от пользователя так, что она скрывается за фотографию.  Поворачиваем на 180. При наведении на окно мы начинаем поворачивать само окно. В результате поворота цена будет к нам "лицом". Причем развернутая так, как нам надо.

Есть ли какие-то вопросы по реализации этой штуки?

Реплика из зала: Почему скрытие цены в повернутом (оригинальном) состоянии сделано с помощью translateZ, а не backface visibility?

Антон Немцев: При использовании backface visibility у нас получится развернутый на 180рисунок. При повороте окна цена будет повернута не справа налево,а слева направо. Это нехорошо.

Реплика из зала: Можно просто повернуть ее полностью.

Антон Немцев: Так я, собственно, и повернул ее полностью. Да, backface visibility там есть. За счет этого мы его и видим. У меня такое впечатление, что мы говорим об одной вещи.

Реплика из зала: Нет-нет-нет. Я предлагаю у обоих .div выставить для backface visibility значение hidden, и повернуть цену заранее, а при наведении разворачивать ее обратно в видимое состояние. 

Антон Немцев: При использовании значения hidden бывают глюки. Отнюдь не везде оно будет показываться стабильно. Если Safari в этом плане хорош, то Chrome и Firefox будут давать мерцание при повороте. Будут небольшие ошибки в расчете видимости. Этого можно избежать, если visibility все-таки есть.

Реплика из зала: Спорно.

Антон Немцев: Может быть, и спорно, но я эту проблему наблюдал. И решил ее таким образом. Если вы можете решить ее иначе, вы круты.

Промо-игры

Это еще одна область, где, на мой взгляд, можно применять CSS3. Почему, скажем, не WebGL, не Canvas? Странно слышать о CSS3 применительно к играм… Я не прошу отказываться от всего этого. Как и от flash, в принципе. Я говорю, что это снизит порог вхождения и увеличит количество нужных специалистов. Соответственно, это будет дешевле. И выбор у вас будет больше.

В конечном итоге, многие задачи решаются по следующему принципу. Лучший язык для разработки тот, в котором у нас кто-то хорошо разбирается. Специалистов не всегда просто найти. Если есть хороший специалист по HTML, вполне реально поручить ему эту задачу.  

Я думаю, вы сейчас сомневаетесь. Как можно делать "игрушки" таким образом?

Совершенно свежая демонстрация. Это облака. Это не WebGL. Давайте сделаем взрывы. Вот взрыв, и это тоже не WebGL. По-моему, выглядит вполне достойно для казуальной игры, а именно такими играми, по моему опыту, сопровождается практически любая рекламная активность.

Я делал все это на flash. Обычно делается движок игры, а потом он брендируется под определенную акцию. Стоит качественно сделать движок на CSS3 и после этого брендировать его. Это имеет смысл. Это окупится.

Пример трехмерной штуки.  Это CSS3. Как видите, выглядит вполне достойно и верстается в полпинка.

Пример такой "игрушки". Она мило вращается, показывает рекорды. Если очень захотеть, можно даже правила увидеть и сменить имя.

Игра. Нам нужно найти одинаковые перчики, причем как можно быстрее. Можно нажать на ботинки и сбежать, что я и сделаю. По-моему, "игрушка" неплохая.

  

Давайте рассмотрим ключевые моменты, которые были в этой игре.

Вы видели меню. У него нехитрый код. У нас есть одна обертка, вторая обертка, меню и картинки с артефактами: перчиками и звездочками.

Как мы позиционируем артефакты – перчики и звездочки? Просто transform. Мы создали трехмерные контексты у обеих оберток. Задали, что перспектива есть. Transform-type у нас – preserve 3D. Все отображается в 3D. Дальше мы просто поместили их поближе к пользователю и масштабировали.

Зачем масштабировать? Когда мы начинаем что-то приближать к пользователю, картинка фактически увеличивается, если это не вектор, a растр, и появится пикселизация. Имеет смысл взять картинку побольше, а потом ее уменьшить в два раза масштабированием. Пикселизации особой, как вы видите, было незаметно.  

Как мы вызывали кинетоз у пользователей? Мы смотрели, каков размер экрана. За счет положения мышки определяли, насколько надо все это повернуть, и применяли transform. Для этого можно использовать  "Modernizer prefixed". В результате не надо писать 10 тысяч префиксов. Он выберет тот, который будет работать в нашем браузере.

Мягкая деградация подобных проектов происходит следующим образом. Обычно есть 3D-анимация. От нее "откатываемся" к transitions. От них – к скриптингам, а дальше показываем статику.

Естественно, все это зависит от задач и контекста, но, по моему опыту, в большинстве случаев происходит именно так.

Еще у меня для вас есть новость. Нас ждут фильтры. Вы скажете: "Где-то это уже было". А именно – в Trident. А именно – 12 лет назад. Да, сейчас это сделано на основе SFG-фильтров. Это очень круто, но, по сути, это одно и то же.

Те же пятна, те же искажения. Почему это не "взлетело" в прошлый раз? Помешала проприетарность. Раньше это была проприетарная штука. Теперь это стандартная вещь, теперь все ее будут поддерживать. Вывод: ребята, не будьте проприетарными и ждите фильтров. Они дадут совершенно замечательные возможности.

Не бойтесь экспериментировать. Да, изначально может получиться весьма неожиданная штука, совсем не похожая на тот велосипед, который вы планировали. Да, это велосипед.

Но если вы не будете сдаваться, будете пробовать, пробовать и еще раз пробовать, это окупится.

Вот и весь доклад.

Если у вас остались какие-то вопросы, я с удовольствием на них отвечу.

Вопросы и Ответы

Реплика из зала: По поводу баннеров. Не страшно ли, что какие-то сторонние сайты будут использовать очень мощный код на вашем сайте? Не приведет ли это к проблемам. Самое главное: их стили не начнут конфликтовать со стилями сайта, если это будет HTML-баннер?

Антон Немцев: Если говорить о стилях, то такие баннеры, во-первых, зачастую показываются во фреймах. Во-вторых, в Chrome, например, сейчас появится свойство, которое позволяет применять стили только к "внутренностям" определенного "дерева". Я думаю, тут это будет вполне уместно. 

Касательно возможностей. По моему опыту работы в "Зеркале недели", мы всегда смотрим баннеры, которые будем выкладывать. Это естественно.

Реплика из зала: У меня не вопрос, а предупреждение тем, кто будет баловаться с 3D-transform. Совсем недавно встретился с такой проблемой.  Backface visibility, убрав ошибку в "MyQuest" (Webkit) – там было черное мерцание – тем самым убил рендеринг шрифтов на "Windows" в Webkit.

На всем сайте полностью (даже на блоках, где не было применено свойство backface visibility) сломался рендеринг шрифтов. Причем таким способом, что вообще было непонятно, из-за чего.

Антон Немцев: Да, есть такая проблема. Должен сказать, что какое-то время все, о чем я рассказывал, будет работать несколько нестабильно. Но оно все равно дает профит. Если мы говорим о промо-игре, то видим только ее. В общем-то, никаких проблем со шрифтами мы наблюдать не будем.

Реплика из зала: Первый вопрос у меня совсем тупой (это для людей, которые не очень в курсе). В каких браузерах это сейчас поддерживается?

Антон Немцев: Мне для игры пришлось делать деградацию в старых версиях IE и новых версиях Opera.

Реплика из зала: Старые – это какие? 9 или 10?

Антон Немцев: До девятки. Версия 9 еще не, 10 – уже да. Кстати говоря, Opera обещает реализовать анимации в самое ближайшее время. Говорят, скоро 3D. Но после анимации.

Реплика из зала: Насколько это все ресурсоемко?  

Антон Немцев: Все зависит от того, какие преобразования и в каком объеме. Как вы видели, игрушка, в которой было не слабое 3D (много всяких элементов)…

Реплика из зала: Вы про облака говорите? 

Антон Немцев: Нет, не про облака. Про мою игру, где перчики. Там много всего. Она не тормозит в Chrome, Firefox. На моей машине она нигде не тормозит. На паре других пробовал, тоже вполне достойно отработала. Я думаю, если есть поддержка прямой работы с видеокартой (она есть сейчас в большинстве случаев), это не проблема.

Реплика из зала: Привет! У меня вопрос по баннерам.

Антон Немцев: Мимими.

Реплика из зала: Вставлял ли ты загрузку процессора при сравнении flash и 3D? Что из этого "жирнее"?

Антон Немцев: Скажите, пожалуйста, а вы знаете, почему Apple не разрешает на мобильных flash и разрешает HTML5? Это ответ.

Реплика из зала: Я не знаю.  

Антон Немцев: Сравниваем. Flash будет более ресурсоемким и медленным. Я сталкивался с этим неоднократно. Например, в свое время я делал для "Активии" крутую штуку во flash. Там был рендеринг, видео, всякие штуки.

Мы сдавали ее около 3-х месяцев по одной-единственной причине. Я сделал ее где-то недели за две. Она "тормозила". Причем "тормозила" по объективным причинам обработки видео, 3D. Избежать этого было практически невозможно.

Здесь эта проблема будет проявляться гораздо меньше.

Реплика из зала: Тут готовый вариант уже на flash. Точно такой же на HTML5. Уникальная возможность сравнить производительность того и этого.

Антон Немцев: Скажу честно, перед докладом не замерял. Но если хотите, презентация доступна. Доступны flash и HTML5-баннеры. Вы можете сравнить сами.

Реплика из зала: Читал, что разные интересные штуки, начиная с банальных градиентов, очень сажают батарею телефона. Вы как-то исследовали этот вопрос?

Антон Немцев: Не исследовал.

Реплика из зала: Насколько примерно тысяч оборотов раскручивается вентилятор, когда ты показываешь баннеры на своем компьютере? Или процентов использования ресурсов ЦПУ?

Антон Немцев: Проценты использования ресурсов ЦПУ особо не скачут. Вентилятор? Ноутбук ни разу не взлетел.

Реплика из зала: А яичницу жарить можно?

Антон Немцев: Нельзя. Я держу его на животе и на коленках, поэтому нельзя жарить яичницу.

Андрей Ситник: Ответ на самом деле очень простой. При использовании 3D-трансформации все будет гораздо быстрее. Большинство эффектов, которые вы делаете (градиенты и им подобные) рендерятся через процессор. Но все 3D-трансформации включают специальный процессор.

Если вы когда-нибудь слышали музыку на современных телефонах, то видели, что это не разряжает аккумулятор, потому что там специальный чип декодирования MP3.

Точно так же, когда у вас специальный чип отображения графики, в итоге все рендерится очень быстро.

Самое интересное. Когда вы начинаете использовать хоть одну 3D-трансформацию, это включает особый режим рендеринга. Вся другая анимация будет работать быстрее. Если ваша текущая анимация тормозит в телефоне, просто добавьте translateZ0. Будет магия.

Реплика из зала: Я так понимаю, для трансформации нужно аппаратное ускорение, а на XP его практически нет. 

Андрей Ситник: Я потом скажу, как этого избегать. В данном случае просто надо делать failback. 

Комментарии

Нет ни одного комментария

Только пользователи могут оставлять комментарии

Возможно, вам будет интересно:

Эмин Алиев

Эмин Алиев

Генеральный директор ведущего итальянского агентства интерактивного маркетинга Buongiorno RUS LLC, ранее — исполнительный директор Mindshare Interaction.

Мир Digital-Агентства полного цикла с точки зрения менеджера проектов.

Дмитрий Сатин

Дмитрий Сатин

Советник министра в Министерстве связи и массовых коммуникаций Российской Федерации, евангелист юзабилити

Дмитрий Сатин объясняет, как ввести команду в состояние потока и не потопить ее.

Андрей Гулин

Андрей Гулин

Ведущий разработчик в Яндекс.

Представители крупнейших ИТ-компаний Рунета и мирового Интернета обсуждают вопросы использования потоков и особенности применения многоядерных процессоров.