Уютно устроившись под пледом. Пусть идет снег...

На Сиэтл надвигается метель — у нас это редкость. Вот я и подумал, что самое время опубликовать это описание тестирования нашего праздничного ролика «Пусть идет снег». — Редактор

Если браузер эффективно использует базовое аппаратное обеспечение, возможности становятся безграничными. За минувшие праздники мы выпустили ролик, который поможет продемонстрировать преимущества сенсорного интерфейса для Internet Explorer 10 с полным аппаратным ускорением. В этой статье подробно рассказано, как был создан ролик Пусть идет снег. Шаблоны в этом ролике типичны для интерфейсов HTML5, появляющихся в Интернете сегодня, и для ранних приложений в стиле Metro. Давайте обратим внимание не столько на внешний вид, сколько на функциональность.

По мере того, как набирают популярность энергоэффективные мобильные устройства и сенсорные интерфейсы, быстро растут и потребительские ожидания в отношении производительности браузеров. Теперь производительность браузеров характеризуется также плавностью перемещения по странице при движении пальца, скоростью отклика страницы на касание, а также эффективностью использования аккумулятора браузером. В рамках Internet Explorer 10 и Windows 8 мы задались целью создать самый быстрый в мире браузер для реально применяемых сценариев.

Создание ролика «Пусть идет снег»

	Праздничная открытка Мы начали с тематической открытки, которая содержит область, предназначенную для поздравлений. Эта открытка создана в среде выполнения с помощью полотен HTML5 и с применением многих известных способов рисования, включая создание изображений, формирование градиентов, регулирование прозрачности и наклона и т. п.
	Анимированный снегопад Затем добавляем множество падающих снежинок — создаем снегопад. Для этого мы применяем второе полотно, наложенное поверх открытки. Каждая снежинка представлена как объект в коллекции JavaScript, которая управляет состоянием снежинки, ее текущим местоположением, скоростью, а также общей картинкой. Полотно очищается при каждой смене кадра, и картинка воссоздается с исходной модели.
	Скопление снежинок Через некоторое время снежинки скопятся поверх таблички. Используя методики проверки нажатий, мы определяем, когда снежинка будет поверх таблички, а затем произвольно назначаем снежинке целевую точку на табличке. По мере приближения снежинки к целевой точке мы используем композитные режимы полотна HTML5, чтобы собрать снежинки на полотне.
	Стряхиваем снег Снег можно стряхнуть с открытки, проведя по ней пальцем или указателем мыши. Мы отслеживаем введенные пользователем данные через новое событие MSPointer с возможностью единого последовательного API-интерфейса для различных моделей указателей. Это позволяет создать превосходный мультисенсорный интерфейс в Internet Explorer 10 под управлением Windows 8. Мы используем эти записанные точки, чтобы стереть части полотна, создавая иллюзию того, что снег стряхивается.
	Полная картинка Слои, используемые в сочетании, создают интерактивную праздничную картинку. Шаблоны, применяемые в этом ролике, представляют методики, встречающиеся в таких играх, как Angry Birds или Cut The Rope, включая анимацию на основе скриптов, сложный пользовательский ввод, игровую логику на основе физики и прочее.

Мы воодушевлены тем, какие быстрые и гибкие интерактивные интерфейсы стали реальностью в Internet Explorer 10 и Windows 8 с полным аппаратным ускорением и сенсорной платформой HTML5. Лучше всего об этих преимуществах можно узнать из первых рук, ознакомившись с Windows 8 Developer Preview.

— Богдан Бринза (Bogdan Brinza), руководитель программы, Internet Explorer