Comments 19
Я такие вкусные эффекты по демосценерской привычке называю eye-candy.
"eye-candy" всё-таки семантически является чисто "визуальным" комплиментом.
а "squash and stretch" оживляет и очеловечивает любой интерфейс при самых скупых графических возможностях (хоть в текстовом режиме), так как рассчитано на особенности восприятия человеком окружающих объектов с опорой на предыдущий опыт.
предположим, у нас есть прямоугольное (информационное/модальное) окно, которое должно вылететь из-за границ экрана, скажем сверху. возможны несколько вариантов решения:
1) самый отвратительный и неестественный: окно с постоянной скоростью выезжает из-за границ экрана. мгновенно останавливается в заданном месте. затем также, с постоянной скоростью улетает.
Именно такой эффект реализован в Firefox, как уведомление об окончании загрузки. Тут сразу несколько ошибок: ни один обьект в реальном мире не движется прямолинейно и с постоянной скоростью (обьекты разгоняются и тормозят). Ни один обьект в реальном мире не останавливается мгновенно - перед остановкой он замедляется. Именно по-этому данный эффект так неприятен: невозможно предугадать где остановится окно, так-как оно не замедляется. Неприятно смотреть как прямолинейно и с одинаковой скоростью "летит" окно. В лучшем случае возникают ассоциации с ползущим слизнем или улиткой, так как только они двигаются с такими скоростями, на которых ни ускорение, ни замедление - не ощущается. Весь look&feel летит в тар-тарары.
2) второй вариант: окно на высокой скорости вылетает из-за границ экрана. затем резко замедляясь (по масштабированному графику y = (1-sin(x)), при x=(0 -> pi/2)) останавливается. Затем, с ускорением улетает.
Уже гораздо лучше, движение хоть и прямолинейное, но совершается с ускорением/замедлением, что позволяет определить район остановки окна, что гораздо ближе к реальному миру и к реальным обьектам. Однако остаётся несколько неучтённых моментов: обьект движется по прямолинейной (вертикальной) траектории, у его расположения изменяется только одна координата, в жизни так не бывает.
3) "идеальный" вариант: окно вылетает на высокой скорости из-за границ экрана, при этом у него изменяется не только координата y, но и координата x (в соотношении 1 к 10 или 1 к 15), затем замедляется, почти останавливается, но "промахивается" мимо целевых координат на 2-3 пикселя по ходу движения, затем переходит в систему координат связанную с целевыми координатами и по промасштабированной затухающей косинусоиде встаёт на место. Вот это и будет тот самый "Squash and Stretch".
Скоростью затухания и частотой колебаний можно изменять такие условные характеристики эффекта как "исполнительность" и "упругость". Например окно может промахнувшись вальяжно встать на место (низкая частота и высокая скорость затухания). А может суетливо подёргавшись "выслужиться" (высокая частота + средняя скорость затухания).
Важно, чтобы в анимировании не было задействовано слишком много параметров, иначе это перегрузит эффект и вместо естественности - получится интерфейс больной базедовой болезнью :)
а "squash and stretch" оживляет и очеловечивает любой интерфейс при самых скупых графических возможностях (хоть в текстовом режиме), так как рассчитано на особенности восприятия человеком окружающих объектов с опорой на предыдущий опыт.
предположим, у нас есть прямоугольное (информационное/модальное) окно, которое должно вылететь из-за границ экрана, скажем сверху. возможны несколько вариантов решения:
1) самый отвратительный и неестественный: окно с постоянной скоростью выезжает из-за границ экрана. мгновенно останавливается в заданном месте. затем также, с постоянной скоростью улетает.
Именно такой эффект реализован в Firefox, как уведомление об окончании загрузки. Тут сразу несколько ошибок: ни один обьект в реальном мире не движется прямолинейно и с постоянной скоростью (обьекты разгоняются и тормозят). Ни один обьект в реальном мире не останавливается мгновенно - перед остановкой он замедляется. Именно по-этому данный эффект так неприятен: невозможно предугадать где остановится окно, так-как оно не замедляется. Неприятно смотреть как прямолинейно и с одинаковой скоростью "летит" окно. В лучшем случае возникают ассоциации с ползущим слизнем или улиткой, так как только они двигаются с такими скоростями, на которых ни ускорение, ни замедление - не ощущается. Весь look&feel летит в тар-тарары.
2) второй вариант: окно на высокой скорости вылетает из-за границ экрана. затем резко замедляясь (по масштабированному графику y = (1-sin(x)), при x=(0 -> pi/2)) останавливается. Затем, с ускорением улетает.
Уже гораздо лучше, движение хоть и прямолинейное, но совершается с ускорением/замедлением, что позволяет определить район остановки окна, что гораздо ближе к реальному миру и к реальным обьектам. Однако остаётся несколько неучтённых моментов: обьект движется по прямолинейной (вертикальной) траектории, у его расположения изменяется только одна координата, в жизни так не бывает.
3) "идеальный" вариант: окно вылетает на высокой скорости из-за границ экрана, при этом у него изменяется не только координата y, но и координата x (в соотношении 1 к 10 или 1 к 15), затем замедляется, почти останавливается, но "промахивается" мимо целевых координат на 2-3 пикселя по ходу движения, затем переходит в систему координат связанную с целевыми координатами и по промасштабированной затухающей косинусоиде встаёт на место. Вот это и будет тот самый "Squash and Stretch".
Скоростью затухания и частотой колебаний можно изменять такие условные характеристики эффекта как "исполнительность" и "упругость". Например окно может промахнувшись вальяжно встать на место (низкая частота и высокая скорость затухания). А может суетливо подёргавшись "выслужиться" (высокая частота + средняя скорость затухания).
Важно, чтобы в анимировании не было задействовано слишком много параметров, иначе это перегрузит эффект и вместо естественности - получится интерфейс больной базедовой болезнью :)
Регулярно применяю основные принципы анимации при создании флеш-анимашек, интерфейсов и прочей дребедени. К слову, один из ведущих аниматоров студии Диснея как-то отлично описал все прелести этого дела. Рекомендую... :)
хабракат не помешает :)
Эппловцам плюс за чувство меры, за использование это дела с умом. Сейчас железо позволяет делать почти что угодно. В том же Бериле этого анимационного добра - хоть чем ешь, желание поразить явно победило хороший вкус и здравый смысл.
И интересно, причем здесь вообще Pixar? С таким же правом можно на кота Феликса, Микки Мауса или "Ну, погоди" ссылаться.
И интересно, причем здесь вообще Pixar? С таким же правом можно на кота Феликса, Микки Мауса или "Ну, погоди" ссылаться.
Шикарно! Реально я это все ощутил, когда приобрел iPod Touch! ^_^
Хотелось бы посмотреть на то, о чём вы говорите (хотябы видео).
Вот именно. НАДОЕДАЮТ. А Apple'вские Дизайнеры умудряются сделать так, чтобы они не то чтобы надоедали, а наоборот — без них казалось бы неправильным всё.
Ни в Tiger ни в Leopard мне ни разу не пришла мысль отключить какую-либо анимацию — пока всё гармонично...
2 Alaska: В Leopard очень забавна сделана (по своему революционная?) подсветка пункта меню, находимая через поле поиска в справке.... брр... кто видел тот поймет короче :)
Ни в Tiger ни в Leopard мне ни разу не пришла мысль отключить какую-либо анимацию — пока всё гармонично...
2 Alaska: В Leopard очень забавна сделана (по своему революционная?) подсветка пункта меню, находимая через поле поиска в справке.... брр... кто видел тот поймет короче :)
Всему своё время. Поддержка всех этих эффектов появилась ещё в NextStep'овском железе, в Mac OS 10.0 хотелось кого-то убить, до того они отвлекали, но постепенно всё было приведено в рабочее состояние и выглядит красиво и отключать не хочется (хотя в MacOS хватает других проблем, так что использовать её для реальной работы я не могу, но проблема не в графических спецэффуктах нынче). Compiz же фактически только начинает: многие разработчики всё ещё думают на тему "а оно нам нада?" (ибо работает не на всех видеокартах, на nVidia приходится использовать самые новые драйвера, etc). Со временем отшлифуют...
Если не ошибаюсь, эффект относится больше к изменению персонажа (вытягиванию, сжатию) во время различных действий, таких как прыжки, бег и т.п., чем к "залипающему" носу.
Sign up to leave a comment.
Дизайнеры пользовательских интерфейсов Apple практикуются в Pixar?