Наверх ▲

Вращай, двигай, загибай — практика 3D в Вебе

Андрей Ситник Андрей Ситник Фронтендер в Злых марсианах. Работал над русским Групоном, Рокетбанком и Ebay Social. Автор Автопрефиксера и PostCSS.

 


Андрей СитникЯ постараюсь научить вас, как делать 3D не ради wow-эффекта. У нас другая задача, которая состоит в том, чтобы вашим пользователям было удобнее с 3D. Я посвящу больше времени практике, потому что мы в компании Evil Marthians, также известной как "Злые марсиане", все это применяем. 

Вот браузеры, которые поддерживают 3D-трансформации. Здесь есть даже IE. Здесь есть все мобильные браузеры. Не хватает только Opera. Как уже говорилось, поддержка 3D-трансформаций там будет реализована очень скоро, как меня заверил разработчик Opera здесь и двое в интернете. В версии 12 3D-трансформации будут поддерживаться.

Так что 3D уже здесь, и его можно использовать. Это такая же production-технология, как Border Radius.

Главный вопрос – зачем ее использовать? Конечно, когда вы делаете промо-страницу, причина будет очевидной. Но нужно ли использовать 3D на обычном сайте с какими-то своими целями?

Вначале поговорим о том, что мы подразумеваем под 3D. В 1990-х люди думали, что будут виртуальные мейнфреймы, через которые мы будем ходить и общаться. Это практически интерфейс 3D.

В 2000-х представление несколько изменилось: допустим, какие-то люди идут по бизнес-центру и останавливаются у плакатов сайтов, а вверху есть карта.

Само собой, я не говорю о таком 3D. Я не говорю, что 3D должно быть самоцелью при создании интерфейсов. Нет. Не бывает сайтов, построенных на градиенте, не бывает  сайтов, построенных на Border Radius. Точно так же и 3D является просто милым дополнением. Лучше всего это можно продемонстрировать на современных телефонах.

Где сейчас используется 3D?

Интерфейс Metro используется в новой версии Windows Phone и новой версии Windows 8.  Это интерфейс, который скоро будет везде. Его увидят ваши дизайнеры. Это интерфейс, который дизайнер попросит вас нарисовать в верстке.

Здесь 3D гораздо меньше. Например, вот как реализовано нажатие: есть квадратная кнопка без градиентов и скруглений  (в отличие от других телефонов). Но при нажатии она не вдавливается вниз, а слегка наклоняется, как клавиша пианино. Такой легкий 3D-эффект.

Демо-версия Windows Phone. Иконки появляются медленно и красиво. Нажимаем на одну из них – они "уезжают", а следующие появляются, как будто у нас проведена ось, через которую проходит интерфейс.

В Android версии 4 появился новый интерфейс. Наконец-то появилось руководство по стилю – мы знаем, как мы должны делать дизайн. 3D-трансформации объявлены частью языка интерфейса. С помощью него можно доносить идеи.

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

Такое "поведение" списков закреплено в руководстве. Оно реализовано во всех исходных приложениях, входящих в комплект поставки, в том числе в новом Chrome для Android.

Этот пример прекрасно иллюстрирует то, о чем я говорил выше: интерфейс не строится на 3D полностью. 3D – это просто мелкие приятные дополнения.

Зачем верстальщику разбираться в дизайне?   

Резонный вопрос, который вы можете задать: зачем это знать верстальщику? Это не конференция по дизайну. Вы ожидаете, что дизайнер придет и скажет, что ему нужно, а вы это просто реализуете. Вы думаете, что вам не нужно знать, когда использовать 3D и когда делать это правильно. 

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

Где пересекаются интересы программиста и верстальщика, я объяснял на прошлом РИТ++. Вкратце напомню суть: вам нужно самим выбирать языки и стараться использовать какие-то препроцессоры, автоматизировать свою разработку.

Где пересекаются интересы дизайнера и верстальщика, я рассказываю сегодня.

Хороший дизайнер дает максимум инструкций, это правда. Он подробно рассказывает, как работает интерфейс. Но в реальном мире это не так. В реальном мире дизайнеры многого не договаривают, потому что это бизнес-процесс. Он никогда не бывает идеальным.

Очень редко обговаривается анимация, потому что .psd – это статичные картинки. Они пришли к вам готовыми. Анимация будет максимум объяснена на словах. Вы должны это понять.

Плюс нужно учесть деградирование в старых браузерах и реальные данные. Это тоже важно. Но главное - это понять, что анимация и эффекты полностью на вас. Очень редко бывают ситуации, в которых именно дизайнер говорит об анимации и 3D-эффектах. 

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

Чтобы понять, когда и какие анимации нужны, когда нужно использовать 3D, а когда нет, нужно понять, что такое дизайн.

Дизайн – это передача информации и эмоций. Это не хаотичное расположение элементов. У дизайна всегда есть конкретная цель.

Несколько слов об анимации

Анимация появилась в телефонах и EOS не потому, что это мило и красиво, а потому, что это решает конкретные проблемы. Интерфейс без нее изменялся бы слишком резко. В реальном мире ничего не происходит мгновенно. Ящик не становится открытым в тот же миг, когда вы этого хотите. Он открывается медленно, давая вам понять, что открывается.

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

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

Также с помощью анимации мы можем показать дополнительную взаимосвязь объектов. Это фактически дополнительный канал информации.

Анимация дает нам не только ощущение эстетики, хотя это тоже важно.

Примеры грамотного использования анимации

Анимация может нам помогать. Например, знакомый попросил меня оформить его блог. Но он не хотел создать не обычный блог, а иллюзию книги.

Я сделал главную страницу, при нажатии на которую блог "открывается", как книга. Это создает нужные ощущения, эмоции, настраивает на восприятие последующей информации.


Другой пример. У многих из нас есть сайты, для создания которых был использован открытый исходный код (англ. open source). Мы делаем там небольшую заглушку, которая ведет на ссылку репозитория, на ссылку, где можно посмотреть исходный код. Это может быть реализовано в виде небольшого анимированного уголка. При наведении курсора он "загибается", показывая исходный код страницы.

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

Переворот был показан.

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

С помощью 3D-трансформаций мы можем провести параллели с реальным миром. С помощью 3D мы можем создать какое-то ощущение.

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

Мне бы хотелось, чтобы вы знали: 3D – это не обязательно и не только промо-инструмент. Его можно использовать и для других целей. Попробуйте сделать сайт полезным и удобным с помощью 3D.

Немного теории

Ранее существовал и использовался CSS Transforms (в основном в 2D).

У CSS есть особое свойство – Transform. Мы указываем команды, разделенные пробелами. Эти команды могут как-то трансформировать реальный .div. Собственно, его нельзя использовать просто так. Вы должны указывать префиксы.

Главными в стандарте были только 2D-команды. Они представлены на иллюстрации. Здесь все понятно. Единственное исключение – это команда skew, которая "изгибает" предмет.

Недавно эта спецификация была расширена: дополнительно появились CSS 3D Transforms. Не знаю, считается ли это отдельной спецификацией или просто расширением прежней.  Появилась третья ось. Ранее все изменения выполнялись в двухмерном пространстве, а теперь можно работать в трехмерном, используя три оси - Z, X, Y.

Это правило, например, позволяет задавать изменения сразу для нескольких осей.

Пример. Команда "Transform: rotate". Поворачиваем по оси X на 45. Поворачиваем по оси Y. Есть rotate 3D, чтобы поворачивать сразу по нескольким осям. У него не очень понятное применение, потому что сначала задаются коэффициенты для каждой из осей, а потом угол.

Угол для каждой оси получается путем умножения коэффициента на значение угла.

Не знаю, почему так сделали, но это так. Пока придется с этим мириться.

Пример. Команда "Transform: translate".

Главный вопрос: зачем нужно использовать translate, когда есть огромные возможности передвижения предметов с помощью таких команд, как "margin" и "position relative"?

Смысл в том, что команда "translate" двигает блок относительно центра вращения. Кроме того, что с помощью "translate" мы можем эмулировать видимость обратной стороны (англ. backface visibility), мы можем управлять вращением предмета.

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

Так выглядит управление видимостью обратной стороны. Второе значение ("hidden") его скрывает.

Перспектива задается с помощью команды "perspective".

Мы воспринимаем трехмерность,  в первую очередь, в виде перспективы. Даже если мы закроем один глаз, мы все равно будем видеть мир трехмерным. Она указывает, насколько сильно предметы искажаются. Нормальное значение в большинстве случаев – 2000. Правда, если вы не хотите ощущения того, что человека приложили лицом к экрану, как в случае с 200.

Существует команда "perspective-origin", с помощью которой задается положение перспективы (местоположение глаз наблюдателя). Мы им пользуемся редко, хотя все зависит от задачи. Здесь показано, как ее использовать. 

Скажу пару слов о параметре "Transform-style". Он указывает, какой характер преобразований будет использоваться для потомков .div (блока, если быть более точным). По умолчанию используется оптимизация: блок вращается как двухмерное пространство, поэтому все его потомки не будут вращаться как трехмерные объекты.

Если у вас внутри есть 3D-трансформации, используйте команду "preserve-3D".

Попробуем сделать что-то реальное?

Задача очень простая. Вначале показывается эта картинка. Наводим курсор – она вращается. Показывается вторая картинка.

Три .div: task, hal9000, любовь.

Еще немного теории

К огромному сожалению, то, что у вас новейший браузер, еще не гарантирует, что есть возможность работать с  3D: это зависит от поддержки видеокарты. Firefox, даже если у вас установлены драйверы и есть 3D-дискретная видеокарта, считает ее слишком слабой. Он не будет поддерживать 3D-преобразования.

Вы должны использовать Modernizr, либо какой-нибудь самописный JavaScript. Лучше используйте "Modernizr". Как уже говорилось, он добавляет класс. Этот класс указывает, что поддержка есть.

Если вам нужно проверить поддержку в JavaScript, вот пример.

Как было показано раньше, каждое свойство (transform, transition или animation)  должно идти с префиксом. Это ужасно неудобно.

Существует прекрасное решение в виде Sass. Здесь я буду использовать Sass, чтобы показать реальный код. Самое главное: в Sass на конце нет точек с запятой. 

Обязательно должна быть точка с запятой!

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

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

Вы можете даже не писать "transform". Вы просто пишете "повернуть" - "rotate".

Небольшая подготовка была сделана. Я здесь не пишу класс от "Modernizr", потому что мало места.

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

При наведении курсора главную картинку мы разворачиваем, а вторую поворачиваем обратно.

Все это успешно работает. У нас получилась реализация дисплея (блок "none") с помощью 3D-карты. Самая сильнонагружающая реализация этой штуки.

Теперь нужно анимировать картинки. Конечно, можно было бы анимировать их с помощью JavaScript. По умолчанию "jQuery" не будет заниматься "transform", потому что это список команд, а не число.

Вам нужно установить расширение TransformJS. У вас появятся такие же дополнительные параметры.


Но анимирование с помощью JavaScript противоречит идее о том, что стили должны быть в стилях, а поведение – в JavaScript.

В итоге, если вы исправите стили, вы можете забыть поправить те же самые стили в JavaScript. В итоге коды будут перемешаны.

Но кроме этого: анимации типа "transition" гораздо быстрее (особенно на телефонах), потому что они рисуют анимацию с помощью браузера. Они гораздо проще.

Самое главное, о чем часто забывают занимающиеся jQuery аниматоры: нужно учитывать, что будет, если анимация прервется. Если она еще не завершится, а пользователь уведет мышку, либо что-то произойдет. Анимации типа "transition" все это учитывают.

Есть резонный вопрос с наведением курсора. Как сделать, если у меня анимация происходит по какому-то событию JavaScript? Просто подставьте к блоку нужный класс и определите его свойства. Это гораздо быстрее. Это один из самых действенных способов оптимизации анимаций.    

Добавляем анимацию.  Мы пишем свойство "transition: (all 1s linear)". "All" означает, что мы должны анимировать все поля. "Transition" отвечает за изменение указанных полей. Мы можем указать конкретные поля через запятую, либо указать их все.

Если поле изменилось любым способом (из CSS, либо мы поменяли его из JavaScript), его изменение будет анимировано в течение указанного времени по указанному линейному закону, по указанному ускорению.

Одной строчкой мы добавляем анимацию. Когда на предмет наводится курсор, он медленно вращается.

Но сделать такую анимацию было бы неправильно, потому что у нее ощущение искусственности. Как я уже говорил, весь смысл 3D-трансформации в том, что она добавляет ощущение реальности при просмотре сайта. 

Почему возникает ощущение искусственности?

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

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

Вторая вещь: реальные предметы не двигаются линейно. Пример с ящиком: он, конечно же, не открывается мгновенно, но когда мы подходим и пытаемся его открыть, его скорость постепенно изменяется. Мы сначала его ускоряем, а когда он прошел половину пути – замедляем.

Все в нашем мире движется по нелинейным законам. Здесь ускорение и замедление. Чтобы сделать это в вашей анимации, не нужно писать какой-то сложный код, реализующий это. Для этого есть Easing-функция. Вы наверняка видели ее в документации.

Все, что вам нужно сделать, это выбрать Easing-функцию.

Например, на сайте easing.net есть список. Мы видим, что анимация не линейна.

Если вам нужно это подправить, можете воспользоваться прекрасным сайтом cubic-bezier.com. Он позволяет править easing для CSS через кривые Безье. 

В общем, мы выбираем нужную easing-функцию и указываем ее в свойстве transition.

В CSS мы вынуждены использовать очень хитрые параметры кривых Безье, но в Compass можно использовать дополнительную возможность и писать easing по имени.

Скорость меняется не линейно, меняется освещение. Теперь анимированный элемент движется более реально. Это улучшает восприятие.

Как быть со старыми браузерами?

Само собой, мы должны учесть старые браузеры. Я не считаю, что мы должны поддерживать старые браузеры так же хорошо, как современные. Если у вас такое ТЗ, это плохо.

Лучше предоставлять максимум возможностей тем, у кого хороший браузер. Какой смысл пользователю переходить на последний Chrome с IE, если он и так может работать "ВКонтакте"?

Когда вы придете к пользователю и покажете, как "ВКонтакте" выглядит в Chrome, он перейдет мгновенно. Никакой проблемы с IE не будет.

Примерно за 7 шагов мы сделали настоящее 3D. Сделать его легко. 3D – это то, что происходит сейчас.

За какими технологиями будущее?

WebGL – это не совсем будущее. Он поддерживается практически всеми браузерами, в том числе как раз Alpha 12 Opera. Это тоже 3D. Важно их не путать.

WebGL обеспечивает передачу указаний для видеокарты напрямую. Вы передаете OpenGL-инструкцию. Это примерно как Canvas: очень низкоуровневый способ работы с 3D-графикой. В большинстве случаев он вам не нужен. Он нужен, только если вы делаете игры или трехмерные обзоры товаров (например, как это делает Google).

Что он может. Трехмерные графики. Уже сейчас это работает на Google. Вы, наверное, слышали новости об этом. Он строит трехмерные функции.


Реальный сайт Galaxy Nexus. Вот его трехмерный обзор с помощью  "WebGL". Как вы видите, здесь есть освещение и другие эффекты.

Это игра, которая работает прямо в браузере. Как вы видите, там видны взрывы. Еще там есть огромные человекоподобные роботы, которые трансформируются в самолет. Я играл в такую игру лет 5 назад на обычном ПК. Теперь она работает прямо в браузере без всяких замедлений и проблем. 

 Вот что можно сделать с освещением с помощью WebGL.

Просчитывается, как вода влияет на освещение внизу, как через нее проходит свет. Очень реалистично, такое можно сделать с помощью WebGL.

Другая вещь – это CSS-фильтр. Это бесподобная технология. К ней надо присматриваться, потому что за ней будущее. Она обязательно себя покажет.

Уже есть бесподобная технология так называемых шейдеров. В специальном файле OpenGL вы указываете, как будет гнуться ваш .div. Что мы делали с 3D-трансформациями? Только вращали .div. Мы не могли гнуть сам блок. С помощью шейдеров можно сделать из обычного блока "мятую газету".


Берем обычный обычный виджет Google Maps. Нам нужен всего лишь файл. Прямо в CSS указываем этот файл. Это действительно работает - вот сгибы. Есть сборка Chrome для разработчиков, которая это показывает.

WebCL.

Знаете, в свое время говорили, что JavaScript очень медленный. Мне кажется, после появления WebCL на это можно будет что-то отвечать. Большинство алгоритмов можно переписать на видеокарту. Они будут работать в 100-200 раз быстрее. Это реальные показания для многих алгоритмических задач.

WebCL позволит нам делать это прямо из JS. Мы можем считать какие-то баснословные операции, делать криптографию, взламывать wi-fi коды прямо на нашей HTML-странице.

У Samsung, если мне не изменяет память, тоже есть девелоперская сборка Chromium, которая это поддерживает.

Собственно, 3D уже здесь. Реализуйте его там, где можно вставить. Это нормально.

На этом все. Ваши вопросы.

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

Реплика из зала: У меня вопрос по синхронизации анимации разных элементов. Во-первых, про синхронизацию анимаций, которые заданы с помощью CSS. Во-вторых, про синхронизацию анимации с браузерными событиями. Там было написано, что мы разворачиваем обложку за одну секунду. Нам нужно в конце разворачивания сделать что-то посредством JavaScript (послать ajax-запрос куда-нибудь)?

Андрей Ситник: О начале анимации мы можем узнать по событию, которое ее запускает. По наведению курсора на предметы и так далее. Конец анимации обозначается с помощью специального события, которое посылается в браузеры. Все браузеры, которые поддерживают CSS-animation и CSS-transition, имеют специальное событие для окончания анимации.

Реплика из зала: Какой контекст у события. Оно говорит, что анимация на этом блоке закончилась?

Андрей Ситник: Да.

Реплика из зала: Я уже могу в середине, допустим, поставить 2-й класс, 3-й? Может идти несколько параллельных анимаций?

Андрей Ситник: В таком случае я, честно говоря, просто считываю значение "transition". Использую это время у себя в JavaScript-коде, устанавливаю тайм-аут.

Реплика из зала: Как ты считываешь "transition"?   

Андрей Ситник: Я, собственно, считываю время, которое будет идти анимация.

Реплика из зала: Это не синхронизуется. Время, которое будет длиться анимация в браузере, не гарантированное. Время, которое ты ставишь в JavaScript, тоже не гарантированное, поэтому это не сихронизированные события.

Антон Немцев: Ребята, есть такая замечательная штука, как событие анимации, transition и всего-всего на свете. За счет этих событий можно отлично синхронизировать все что угодно. Это работает.   

Андрей Ситник: Только в конце. А как делать в середине?

Антон Немцев: Нет! Можно использовать итерации. Каждая итерация измерения "файрит" событие. Это работает, я проверял.  

Андрей Ситник: Тогда да – я был неправ.

Антон Немцев: Не совсем вопрос. Скорее, замечание. Любые проблемы начинаются только после какого-то критического объема элементов. На одном, двух, трех и даже десяти проблемы не возникнут, даже если есть предпосылки к ним. Когда речь пойдет о десятках и даже сотнях, могут появиться проблемы. Надо будет думать, что делать с отображением обратной стороны, например.

Андрей Ситник: Верно. Поэтому я не применяю 3D-трансформации, пока они не требуются. Если предмет выглядит двухмерным, я скрываю заднюю сторону с помощью "display:none", а не с помощью его поворота. Конечно, если мы поворачиваем все, это просто бессмысленная нагрузка на браузер.

Плюс я рассказывал про сайты, в которых анимация – это улучшение юзабилити, а не самоцель. Если вы делаете сайт полностью на 3D, возможно, вам стоит посмотреть в сторону WebGL.

Реплика из зала: Ты обещал рассказать чуть больше про обратное ускорение на XP. Есть ли статистика, какие браузеры и на каких платформах "умеют" ускорять? Хотя бы обзорно. Сколько процентов браузеров в интернете могут сделать анимацию с поворотами?

Андрей Ситник: Нет. Я хотел сказать, что вам в любом случае надо делать failback (обратный процесс).

Реплика из зала: Допустим, ты потратишь месяц на обучение. Еще две недели, чтобы сделать анимацию. Ради какого процента пользователей ты это сделаешь? Если вы этого не понимаете, то это странно.

Андрей Ситник: Это как приятная деградация.

Реплика из зала: Мелочь, но приятно?

Андрей Ситник: Да.

Реплика из зала: Если бы было какое-то исследование, был бы классный аргумент.

Андрей Ситник: Да. В Google Analytics это не отслеживается, а специально мы этим не занимались.

Реплика из зала: В принципе, можно "смапить" статистику "Can I use". Совместить эти данные. Посмотреть какую-нибудь мировую статистику.

Андрей Ситник: "Can I use it" показывает только позицию по браузерам. Все последние браузеры это поддерживают. 

Реплика из зала: Очень сильно усреднить платформы распространенные и браузеры. Плюс "Can I use it" и "смапить", чтобы хотя бы примерное представление было.

Андрей Ситник: Там драйверы нужны, видеокарты. Везде, где я запускал эту презентацию, работало (это далеко не топовый компьютер), все Mac. Mac в России это 1% – 2%.

Реплика в зале: Солидно!

Андрей Ситник:  Нет. Имеются в виду все, у кого есть Chrome. Наверное, можно по размеру экрана. Тот, у кого большой экран, явно геймер. У него хорошая видеокарта. Но встроенные видеокарты в ноутбуках "Intel" тоже поддерживают эти трансформации. Тут вопрос – какие видеокарты не поддерживают трансформации.

Реплика в зале: Надо просто запустить "Modernizr" на всех известных сайтах.

Андрей Ситник: Да.

Реплика в зале: Можно скрестить статистику видеокарт. Я не помню адрес. Тебе оттуда идет статистика использования видеокарт. Скрестить это с "Can I use it" и примерно то, что нужно, получить. Конечно, более продвинутые видеокарты используют Chrome, например, и IE8, но все равно примерно можно вектор увидеть.

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

Если вы используете WebGL, там другие ситуации, потому что вы передаете им особые параметры, которые зависят от версии поддержки OpenGL. Отдельные параметры для NVIDIA, для ATI, потому что там примерно те же самые вендерные префиксы используются.

В 3D-transform поддерживаются все, у кого стоит 3D-драйвер и нет каких-то особо старых видеокарт, особых ситуаций и проблем.

Реплика из зала: На 12-м слайде упоминался некий Константин Константинопольский. Кто это?

Андрей Ситник: Имеется в виду, что дизайн сделан под какие-то шаблонные данные. Реальные данные всегда другие. В первую очередь, они могут быть длиннее. Имя может не влезать и всему мешать. Константин Константинопольский – это самый главный пример.

Реплика из зала: Это известное среди тестировщиков имя, которое люди вбивают, чтобы проверить, что ничего не ломается. Одно из самых длинных имен.

Андрей Ситник: Кроме того, что это увеличение длины, то же самое бывает наоборот. Очень часто дизайнер не знает, что некоторых данных может не быть. Верстальщик должен додумать, как действовать в этой ситуации. Что-то скрывать, что-то двигать и так далее.   

Реплика из зала: Ок, спасибо. Расскажу нашим дизайнерам!  

Реплика из зала: Расскажи еще подробнее про failback, про деградации. Скажем, до чего откатываться – до анимации JavaScript, до отсутствия перехлестной анимации?

Андрей Ситник: Я не считаю, что нужно откатываться до JavaScript-анимации. Мы должны как-то влиять на пользователей. Если анимации не будет, ничего страшного не произойдет. Transition спроектирован так: если это свойство не поддерживается, мгновенно будет все меняться. Поддерживать JavaScript failback для анимации – это лишний труд ради фенечек у пользователей, которые не любят разработчиков.

Реплика из зала: А если анимация критичная? Анимация перелетания товара в корзину или что-нибудь такое.

Андрей Ситник: Это тоже не критично.

Реплика из зала: Нечто, что влияет на восприятие.

Андрей Ситник: Тут вторая ситуация. Где нет поддержки трансформаций типа "transition"? В старых браузерах. Где стоят старые браузеры? На слабых компьютерах. Если мы пытаемся сделать failback для анимации, то с большой вероятностью, когда будет срабатывать failback, анимация будет тормозить.

В случае корзины я бы сделал: при добавлении мгновенно появляется штучка  "Товар добавлен".  Заменил бы интерфейс. Сделал бы очень простым.

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

Например, вы видели цены. В Opera они закономерно не работают. В результате снизу поднимается плашечка с помощью transition, которые там есть. В IE она появляется мгновенно.

В результате это работает везде. Каждый пользователь получает свой user experience. Везде он хорош.

Реплика из зала: Все равно. Почему бы не воспользоваться failback в JavaScript? Это точно так же там можно сделать. Будет появляться плавно.

Андрей Ситник: Лишний труд. Не создается мотивация перехода пользователей.

Реплика из зала: Наоборот, не лишний! Есть JavaScript фреймворки, которые инкапсулируют наличие или отсутствие transition. Можно наоборот: ты пишешь один и тот же код. Он будет автоматически failback до JavaScript.

Андрей Ситник: Эти фреймворки неправильны тем, что приводят к смешиванию стиля анимации, стиля документа. Вся идея transition: мы описываем, как происходит анимация в CSS. В JavaScript мы описываем, когда происходит анимация. У нас стандартное разделение view и control.

Антон Немцев: Кроме того, что рушится указанная модель, представление должно быть в CSS. Использовать JS для представления, мягко говоря, нежелательно. Не стоит забывать, как быстро работает CSS в браузере, и как работает JavaScript. Причем JavaScript, который не Corp., а написан разработчиком.

У разработчиков, как правило, откуда растут руки? Посмотрите на меня.

Андрей Ситник: Раз вопрос про failback, интересный нюанс. С помощью scew можно эмулировать 3D в браузерах, где не поддерживается 3D.  

Здесь что-то очень похожее. Как будто она повернулась. Это нереалистично, но кому-то может показаться, что это 3D. (Смех в зале). Если у вас действительно есть задача поддерживать 3D там, где его нет, вы можете сделать это с помощью scew.

Так делал Google на Google+ при смене фотографий. Он их вращал с помощью 3D сначала. Потом они почему-то для всех браузеров скатились на scew. Потом вообще убрали. Ну, это Google (улыбается).

Реплика из зала: Я хотел услышать что-нибудь типа "мы пробовали в 3D – у нас тормозит". Или "пробовали в 3D – нормально работает, можно делать". Практическая выжимка. "Мы фейлбэчились на JS. Это приемлемо работает в тех браузерах, где нет 3D-трансформации". Или наоборот: убедились на своем опыте, что это неправильно работает.

Андрей Ситник: Мы не "фейлбэчимся".  У нас политика – не фейлбэчиться.


Комментарии

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

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

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

Андрей Аксенов

Андрей Аксенов

Всю жизнь пишет низкоуровневый код, в 2018 все еще делает поисковый движок Sphinx.

В докладе будет рассказано о том, как оно устроено внутри, как мы дошли до жизни такой, и в целом мы поделимся странным личным опытом жизни в компании, построенной вокруг открытого бесплатного продукта.

Евгений Лисицкий

Евгений Лисицкий

Ведущий разработчик компании "Спорт Сегодня".

Евгений Лисицкий рассказывает о стремительно развивающейся технологии WebSocket, которая позволяет создавать веб-приложения, работающие в режиме, близком к реальному времени.

Владимир Малашенко

Владимир Малашенко

Участник команды разработки Windows 7.

Владимир Малашенко делает обзор улучшений в Windows Server R2, Internet Information Server 7.5, операционной системе, области HTTP-запросов и настройки под конкретного пользователя.