Bubble effect - записки шукачів

Коли пишеш додаток, хочеться щоб користувач отримував задоволення від роботи з ним. Користувач любить, коли додаток поводиться передбачувано і природно. Нещодавно, в одному з моїх хобі-проектів постало завдання змінити в формі один компонент на інший. У Swing це робиться зовсім просто, головне не забути викликати revalidate, а то ефекти, часом, досить кумедні. Рішення "в лоб" вийде візуально не дуже приємним. Один компонент різко йде в нікуди, другий так само різко з'являється з нізвідки. Ніякої візуального зв'язку між ними немає. Це поведінка неприродно, і таких ефектів в Rich додатках краще уникати.

Ось відносно нескладне, але більш цікаве рішення тієї ж задачі.

Компонент не пропадає відразу, а темніє і втрачає різкість (ефект blur). Так, щоб користувач зрозумів, що з ним більше працювати не можна. Потім з-під "старого" компонента поступово "проступає" новий.

Я не стану описувати всі подробиці реалізації: вихідні розкажуть все за мене. Якщо коротко, ось що відбувається, коли користувач натискає кнопку "Test Fade".

Спочатку створюється BufferedImage розміром з вихідний компонент (у мене це таблиця). Потім, компонент промальовується на зображенні. Таким чином у нас виходить "скріншот" компонента. Зображення обробляється фільтром Gaussian Blur (я запозичив код створення ядра перетворення з Filthy Rich Clients). Зображення стає розмитим.
Коли картинка готова, ми замінюємо реальний компонент картинкою. Під скріншот підкладається "цільової" компонент (той, що потрібно показати). Потім, використовуючи альфа-композит Clear "вигризати" кружечки з зображення. Паралельно, "затемнюємо" зображення коричневим кольором (знову використовуємо альфа-композит, на цей раз SrcOver).
Ось таким чином і виходить потрібний ефект. Користуючись цією ж технікою можна отримати інші красиві ефекти, наприклад, якщо збільшувати на кожному кроці прозорість картинки, замість "вигризання" кіл, можна отримати класичний fade-in fade-out.

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

11 Responses to "Bubble effect"

Схожі статті