Bubble effect
Рубрика: Java | 24 September 2008, 15:56 | juriy
Когда пишешь приложение, хочется чтобы пользователь получал удовольствие от работы с ним. Пользователь любит, когда приложение ведет себя предсказуемо и естественно. Недавно, в одном из моих хобби-проектов возникла задача сменить в форме один компонент на другой. В Swing это делается совсем просто, главное не забыть вызвать revalidate, а то эффекты, порой, весьма забавные. Решение “в лоб” выйдет визуально не очень приятным. Один компонент резко уходит вникуда, второй так же резко появляется из неоткуда. Никакой визуальной связи между ними нет. Это поведение неестественно, и таких эффектов в Rich приложениях лучше избегать.
Вот относительно несложное, но более интересное решение той же задачи.
Компонент не пропадает сразу, а темнеет и теряет резкость (эффект blur). Так, чтобы пользователь понял, что с ним больше работать нельзя. Затем из-под “старого” компонента постепенно “проступает” новый.
Я не стану описывать все подробности реализации: исходники расскажут все за меня. Вкратце, вот что происходит, когда пользователь нажимает кнопку “Test Fade”.
Сначала создается BufferedImage размером с исходный компонент (у меня это таблица). Затем, компонент отрисовывается на изображении. Таким образом у нас выходит “скриншот” компонента. Изображение обрабатывается фильтром Gaussian Blur (я позаимствовал код создания ядра преобразования из Filthy Rich Clients). Изображение становится размытым.
Когда картинка готова, мы заменяем реальный компонент картинкой. Под скриншот подкладывается “целевой” компонент (тот, что нужно показать). Затем, используя альфа-композит Clear “выгрызаем” кружочки из изображения. Параллельно, “затемняем” изображение коричневым цветом (снова используем альфа-композит, на этот раз SrcOver).
Вот таким образом и выходит нужный эффект. Пользуясь этой же техникой можно получить другие красивые эффекты, к примеру, если увеличивать на каждом шагу прозрачность картинки, вместо “выгрызания” кругов, можно получить классический fade-in fade-out.
P.S. Я взял первые компоненты, которые попали под руку. Не обращайте внимания на их функциональность.
Tweet
Скриншот в студию! (не хочет у меня JNLP стартовать)
Рекомендую взглянуть на то как реализованы многие фишки во flex’е:
http://www.adobe.com/devnet/flex/quickstart/defining_state_transitions/
(пролистать вниз до примера и нажать “Need to register?”)
так же многие там вкусняки есть типа easyFunction – допустим, исчезает объект – как зависит изменяемый параметр от времени ? линейно, по синусоиде, по экспоненте и т.п
Нее, это принципиальный вопрос, каждый тру-девелопер должен настроить себе Веб-Старт. :-) А те, у кого нет веб-старта – берут исходники и компилят, компилят, компилят :-))))
Это мне напомнило мою первую мобилу, в которой я в опциях сразу снимал галочку “Показывать анимацию в меню”..:)
Иначе при нажатии кнопки, пол часа смотришь мультики, перед тем как получить результат.
Так что, как по мне, то сомнительная нужность такого наворота..
Выглядит прикольно, но если представить такой мультик в рабочем приложении (как на примере с теми же таблицами), то чур меня…
> Нее, это принципиальный вопрос, каждый тру-девелопер должен настроить себе Веб-Старт. :-) А те, у кого нет веб-старта – берут исходники и компилят, компилят, компилят :-))))
Та да, уже сел компилить :)
Кстати, Юра, ты когда успел записатся в гентушники? От “компилят, компилят, компилят :-))))” попахивает красноглазием ;)
>> Выглядит прикольно, но если представить такой мультик в рабочем приложении
То приложение, что я пишу – не рабочее, а игровое :-) Вообще – согласен.
>> так же многие там вкусняки есть типа easyFunction – допустим, исчезает объект – как зависит изменяемый параметр от времени ? линейно, по синусоиде, по экспоненте и т.п
Есть классная штука: TimingFramework (для Java): он позволяет легко создавать анимации с нелинейной зависимостью от времени. Я довольно активно использую эту библиотеку.
2Vadim Voituk
На убунті все працює з коробки %)
2juriy
читав, що такий прийом використовується у iPhone для ефектів звертання і листання – робиться знімок екрану а далі вже операції над картинкою
красиво, можно конечно и проще, но мне такие штуки нравятся. самое интересное это то, что пракрически все действия сделаны на чистом Swing.
у меня один вопрос, а без TimingFramework, просто средствами Swing, обойтись нельзя?
в предыдущем комменте вкралась досадная ошибка, прошу выражение “сделать проще”, читать как “сделать переход от компонента к компоненту проще, без эффектов”. спасибо.