Bubble effect

Рубрика: Java | 24 September 2008, 15:56 | juriy

Когда пишешь приложение, хочется чтобы пользователь получал удовольствие от работы с ним. Пользователь любит, когда приложение ведет себя предсказуемо и естественно. Недавно, в одном из моих хобби-проектов возникла задача сменить в форме один компонент на другой. В Swing это делается совсем просто, главное не забыть вызвать revalidate, а то эффекты, порой, весьма забавные. Решение “в лоб” выйдет визуально не очень приятным. Один компонент резко уходит вникуда, второй так же резко появляется из неоткуда. Никакой визуальной связи между ними нет. Это поведение неестественно, и таких эффектов в Rich приложениях лучше избегать.

Вот относительно несложное, но более интересное решение той же задачи.

web-start

Компонент не пропадает сразу, а темнеет и теряет резкость (эффект blur). Так, чтобы пользователь понял, что с ним больше работать нельзя. Затем из-под “старого” компонента постепенно “проступает” новый.

Я не стану описывать все подробности реализации: исходники расскажут все за меня. Вкратце, вот что происходит, когда пользователь нажимает кнопку “Test Fade”.

Сначала создается BufferedImage размером с исходный компонент (у меня это таблица). Затем, компонент отрисовывается на изображении. Таким образом у нас выходит “скриншот” компонента. Изображение обрабатывается фильтром Gaussian Blur (я позаимствовал код создания ядра преобразования из Filthy Rich Clients). Изображение становится размытым.
Когда картинка готова, мы заменяем реальный компонент картинкой. Под скриншот подкладывается “целевой” компонент (тот, что нужно показать). Затем, используя альфа-композит Clear “выгрызаем” кружочки из изображения. Параллельно, “затемняем” изображение коричневым цветом (снова используем альфа-композит, на этот раз SrcOver).
Вот таким образом и выходит нужный эффект. Пользуясь этой же техникой можно получить другие красивые эффекты, к примеру, если увеличивать на каждом шагу прозрачность картинки, вместо “выгрызания” кругов, можно получить классический fade-in fade-out.

P.S. Я взял первые компоненты, которые попали под руку. Не обращайте внимания на их функциональность.

Вот исходники.

Комментариев: 11

11 Responses to “Bubble effect”

Комментарии:

  1. Vadim Voituk

    Скриншот в студию! (не хочет у меня JNLP стартовать)

  2. Vladimir

    Рекомендую взглянуть на то как реализованы многие фишки во flex’е:

    http://www.adobe.com/devnet/flex/quickstart/defining_state_transitions/
    (пролистать вниз до примера и нажать “Need to register?”)

    так же многие там вкусняки есть типа easyFunction – допустим, исчезает объект – как зависит изменяемый параметр от времени ? линейно, по синусоиде, по экспоненте и т.п

  3. Juriy

    Нее, это принципиальный вопрос, каждый тру-девелопер должен настроить себе Веб-Старт. :-) А те, у кого нет веб-старта – берут исходники и компилят, компилят, компилят :-))))

  4. kVn

    Это мне напомнило мою первую мобилу, в которой я в опциях сразу снимал галочку “Показывать анимацию в меню”..:)
    Иначе при нажатии кнопки, пол часа смотришь мультики, перед тем как получить результат.
    Так что, как по мне, то сомнительная нужность такого наворота..
    Выглядит прикольно, но если представить такой мультик в рабочем приложении (как на примере с теми же таблицами), то чур меня…

  5. Farcaller

    > Нее, это принципиальный вопрос, каждый тру-девелопер должен настроить себе Веб-Старт. :-) А те, у кого нет веб-старта – берут исходники и компилят, компилят, компилят :-))))

    Та да, уже сел компилить :)

  6. Farcaller

    Кстати, Юра, ты когда успел записатся в гентушники? От “компилят, компилят, компилят :-))))” попахивает красноглазием ;)

  7. Juriy

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

    То приложение, что я пишу – не рабочее, а игровое :-) Вообще – согласен.

  8. Juriy

    >> так же многие там вкусняки есть типа easyFunction – допустим, исчезает объект – как зависит изменяемый параметр от времени ? линейно, по синусоиде, по экспоненте и т.п

    Есть классная штука: TimingFramework (для Java): он позволяет легко создавать анимации с нелинейной зависимостью от времени. Я довольно активно использую эту библиотеку.

  9. corsair

    2Vadim Voituk
    На убунті все працює з коробки %)

    2juriy
    читав, що такий прийом використовується у iPhone для ефектів звертання і листання – робиться знімок екрану а далі вже операції над картинкою

  10. Anton Naumov

    красиво, можно конечно и проще, но мне такие штуки нравятся. самое интересное это то, что пракрически все действия сделаны на чистом Swing.
    у меня один вопрос, а без TimingFramework, просто средствами Swing, обойтись нельзя?

  11. Anton Naumov

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

Leave a Reply