讓Swing打造出Parleys網站中的效果(一)
在看到Parleys後,有個想法,目前的Java Swing可以做到這樣嗎? 可以是一定的,但花費的功夫,我想一定很龐大。
雖說Java推出了JavaFx,可以讓我們更容易打造出類似這種的RIA,不過我還是比較喜歡Swing。至於JavaFx,可能等網站出JavaFx版本(目前是用Flex,之後會有JavaFx版本),再看看如何好了...
不管怎麼樣,裡頭的一些小效果還是可以拿出來研究、玩玩。
在Parleys中,當滑鼠進入/離開"資料項"的時候,會產生出一個立體陰影效果的邊框(Border)。
在Swing中要做到這樣的效果是很容易的一件事,只要在滑鼠事件中/加入/移掉這類的邊框就好了。
要自己打造一個有 立體陰影效果的邊框 現在也不用花功夫自己寫Java2D了,在SwingX中有提供一個類別來幫助我們產生一個立體陰影效果的邊框 - DropShadowBorder
建造方式很容易,請直接參考API
private static final DropShadowBorder px = new DropShadowBorder(new Color(
10, 10, 10), 15, 0.88f, 22, true, true, true, true);
然後在滑鼠事件 - public void mouseEntered(MouseEvent arg0)加入、在滑鼠事件 - public void mouseExited(MouseEvent arg0)移掉就行了
@Override
public void mouseEntered(MouseEvent arg0) {
setBorder(px);
}
@Override
public void mouseExited(MouseEvent arg0) {
setBorder(BorderFactory.createEmptyBorder(insets.top, insets.left, insets.bottom, insets.right));
}
}
移掉 - 指的是讓它消失,但如果只是用setBorder(null)的話,會讓容器內的元件上下移動。這是因為Border在設定的時候會改變component insets,所以必須要開始時就讓 component 有著與滑鼠移進時的 border 有相同 margin 的 empty border (感謝Duncan的指導)
做法很容易,先利用getBorderInsets(Component c)取得相對應的component insets,接著利用它做一個EmptyBorder,就可以了
當完成時,執行起來卻可以發現到:立體陰影效果的邊框(Border)出現/消失的太快了,雖然說這不是什麼太大的問題,但和Parleys的效果有點不太一樣(它是緩慢出現/消失)
要完成這樣的動作(顏色漸變),一樣不用再自己寫動畫了【有自虐傾向的人,可以自己試試XD】,直接發揮Project Scene Graph的威力吧:)
這裡是簡單做好的二個SimpleDemo、ParleysEffectDemo,有興趣的可以研究看看