Filthy Rich Clients: Filthier. Richer. Clientier. Romain Guy, Google Chet Haase, Adobe Systems

Transcription

1 Filthy Rich Clients: Filthier Richer Clientier Romain Guy, Google Chet Haase, Adobe Systems

2 Learn techniques for making cooler, better, and just darned funner applications. Get filthy JavaOne SM Conference java.sun.com/javaone 2

3 Agenda Fluffy Introduction Demos and Explanations Self-Serving Links to More Information 2008 JavaOne SM Conference java.sun.com/javaone 3

4 Where Were We? JavaOne Presentation 6/06 12/06 6/07 12/07 5/ JavaOne SM Conference java.sun.com/javaone 4

5 Where Were We? 6/06 12/06 6/07 12/07 5/08 Wrote book 2008 JavaOne SM Conference java.sun.com/javaone 5

6 Where Were We? 6/06 12/06 6/07 12/07 5/08 Review, edit, review, edit, review, edit, review, edit 2008 JavaOne SM Conference java.sun.com/javaone 6

7 Where Were We? JavaOne Presentation 6/06 12/06 6/07 12/07 5/ JavaOne SM Conference java.sun.com/javaone 7

8 Where Were We? JavaOne Presentation Publisher Misses Date 6/06 12/06 6/07 12/07 5/ JavaOne SM Conference java.sun.com/javaone 8

9 Where Were We? Book Released! 6/06 12/06 6/07 12/07 5/ JavaOne SM Conference java.sun.com/javaone 9

10 Where Were We? 6/06 12/06 6/07 12/07 5/08 Recovery, Therapy 2008 JavaOne SM Conference java.sun.com/javaone 10

11 What s New? Animation is hot. Lots of animated effects everywhere: Desktops/phonetops (Vista, Mac OS X, iphone, Android) Applications Toolkits Scene Graph project New animation engine, based on Timing Framework fundamentals Graphics effects built in JavaFX software New scripting language with animation and graphical effects built in 2008 JavaOne SM Conference java.sun.com/javaone 11

12 Agenda Fluffy Introduction Demos and Explanations Way too many Timers! Animated Layout Bling 59 minutes of Q&A Self-Serving Links to More Information 2008 JavaOne SM Conference java.sun.com/javaone 12

13 Way Too Many Timers! Situation Multiple, simultaneous animations Solution Multiple Animators Problem Choppy Performance 2008 JavaOne SM Conference java.sun.com/javaone 13

14 Demo: Too Many Balls 2008 JavaOne SM Conference java.sun.com/javaone 14

15 Code: Animator Setup bouncer = PropertySetter.createAnimator( 2000, this, "y, 0, maxy, 0); bouncer.setrepeatcount(animator.infinite); bouncer.setacceleration(.5f); bouncer.setdeceleration(.5f); bouncer.setresolution(1); bouncer.start(); 2008 JavaOne SM Conference java.sun.com/javaone 15

16 Problem: Timer Resolution Swing Timer uses low-resolution mechanism of OS Each Timer event services only one request Multiple Timers clog the queue Timer event = single Timer n milliseconds FPS = 1000 / n 2008 JavaOne SM Conference java.sun.com/javaone 16

17 Problem: Timer Resolution (cont d) More Timers means more events Which means more time between events for any particular Timer Timer event = Timer 1 = Timer 2 = Timer 3 n milliseconds FPS = 1000 / n / JavaOne SM Conference java.sun.com/javaone 17

18 Solution: Use Single Timing Source Idea: Have only one Timer in the system send pulses to multiple targets Problem: TimingTarget doesn t work here Unless all of your animations are exactly the same 2008 JavaOne SM Conference java.sun.com/javaone 18

19 Solution #1: TimingSource Interface for providing external timer to Animators Can be used to provide non-default Timer Caution: Still have to be on EDT to be Swing-friendly Can also be used to provide multiple pulses from single timing source = Timer 1 = Timer 2 pulse pulse pulse = Timer 3 = TimingSource Timer event n milliseconds FPS = 1000 / n 2008 JavaOne SM Conference java.sun.com/javaone 19

20 TimingSource: The code public class SingleTimingSource extends TimingSource implements ActionListener { Timer timer; // Swing timer public SingleTimingSource() { timer = new Timer(20, this); timer.setinitialdelay(0); } public void actionperformed(actionevent ae) { super.timingevent(); // sends pulse to listeners } public void setresolution(int resolution) { timer.setdelay(resolution); } public void setstartdelay(int delay) { timer.setinitialdelay(delay); } } 2008 JavaOne SM Conference java.sun.com/javaone 20

21 Timing Source: Using It static SingleTimingSource timer = new SingleTimingSource(); bouncer = PropertySetter.createAnimator( 2000, this, "y, 0, maxy, 0); bouncer.setrepeatcount(animator.infinite); bouncer.setacceleration(.5f); bouncer.setdeceleration(.5f); bouncer.setresolution(1); bouncer.settimer(timer); bouncer.start(); 2008 JavaOne SM Conference java.sun.com/javaone 21

22 Demo: TimingSource Solution 2008 JavaOne SM Conference java.sun.com/javaone 22

23 Solution #2: Scene Graph Animation Scene Graph animation engine has single-timer concept built in already Clip is the new Animator But gets its timing events from a single timing source = Timer 1 = Timer 2 pulse pulse pulse = Timer 3 = Timeline Timer event n milliseconds FPS = 1000 / n 2008 JavaOne SM Conference java.sun.com/javaone 23

24 Scene Graph Animation: The Code clip = Clip.create(2000, this, "y", 0, maxy, 0); clip.setrepeatcount(clip.indefinite); clip.setinterpolator( Interpolators.getEasingInstance(.5f,.5f)); clip.setresolution(1); clip.start(); 2008 JavaOne SM Conference java.sun.com/javaone 24

25 Demo: Scene Graph Animation Solution 2008 JavaOne SM Conference java.sun.com/javaone 25

26 Agenda Fluffy Introduction Demos and Explanations Way too many Timers! Animated Layout Bling 59 minutes of Q&A Self-Serving Links to More Information 2008 JavaOne SM Conference java.sun.com/javaone 26

27 Animated Layout Transitioning between layout states One approach: Capture before Capture after Animate items between the two states Items do one of three things between states Appear Disappear Change 2008 JavaOne SM Conference java.sun.com/javaone 27

28 Animated Layout Transitioning between layout states One approach: Capture before Capture after Animate items between the two states Items do one of three things between states Appear Disappear Change 2008 JavaOne SM Conference java.sun.com/javaone 28

29 Animated Transitions Captures before/after state Via callback: setupnextscreen() Applies standard effects to each component Appearing: FadeIn Disappearing: FadeOut Changing: Move/Resize No Change: (nothing) Runs animation, which runs all effects Hides container with glass pane Runs animation in glass pane, absolute layout Removes glass pane when done, showing real container 2008 JavaOne SM Conference java.sun.com/javaone 29

30 Demo: Lone Rearranger, Resizing 2008 JavaOne SM Conference java.sun.com/javaone 30

31 Resizing Transition, the Code // Set up transition Animator resizeanimator = new Animator(500); ScreenTransition resizetransition = new ScreenTransition(this, new ResizeTransitionTarget(), resizeanimator); // Handle slider events to change thumbnail size public void statechanged(changeevent ce) { currentsize = slider.getvalue() * 25; if (!resizetransition.getanimator().isrunning()) { resizetransition.start(); } } // Handle transition callback to set up next state public class ResizeTransitionTarget implements TransitionTarget { public void setupnextscreen() { BufferedImage img = images.get(i).getimage(currentsize); // other code to set up background image for slide slides[i].seticon(new ImageIcon(background)); validate(); } } 2008 JavaOne SM Conference java.sun.com/javaone 31

32 Rearranging the Order What about changing the order of items displayed? Can we animate transitions of order changes? Of course we can 2008 JavaOne SM Conference java.sun.com/javaone 32

33 Moving Items Around is a Drag Need lots of visual indicators Show item being dragged Show insertion marker where item would be placed if dropped Indicate insertion marker with different graphics Animate insertion marker to distinguish it and mark is as dynamic Move marker as appropriate with animated transitions, of course! Animate dropping dragged item into place 2008 JavaOne SM Conference java.sun.com/javaone 33

34 Show Dragged Item Drag it around on the glass pane remove() it from container add() it to glass pane setlocation() as the mouse moves // in first drag event remove(draggedcomponent); draggingglasspane.add(draggedcomponent); draggingglasspane.setvisible(true); // for every drag event // [calculate drag location] // set location of component on glass pane draggedcomponent.setlocation(dragx, dragy); 2008 JavaOne SM Conference java.sun.com/javaone 34

35 Make Dragged Item Translucent Differentiates it from other slides Allows user to see everything else below it // Each slide is a custom JLabel public class TranslucentLabel extends JLabel { private Composite translucentcomposite = AlphaComposite.getInstance(AlphaComposite.SRC_OVER,.5f); boolean beingdragged = false; } protected void paintcomponent(graphics g) { if (beingdragged) { Graphics2D g2d = (Graphics2D)g; g2d.setcomposite(translucentcomposite); } super.paintcomponent(g); } 2008 JavaOne SM Conference java.sun.com/javaone 35

36 Show Insertion Marker Create marker based on contents of dragged component Get component s index in container Place marker at component s former index insertionmarker = new InsertionMarker((JLabel)draggedComponent); int componentindex = // query container for index add(insertionmarker, componentindex); 2008 JavaOne SM Conference java.sun.com/javaone 36

37 Give Marker a Different Look Show original image, but fade it out around the edges Uses DstIn composite with an alpha mask, like Romain s reflection panel protected void paintcomponent(graphics g) { Graphics2D g2d = markerimage.creategraphics(); g2d.drawimage(origimage, 0, 0, markerimagew, markerimageh, null); float fractions[] = {0f,.2f,.8f, 1f}; Color colors[] = {Color.WHITE, Color.WHITE, new Color(1f,1f,1f,outerAlpha), new Color(1f,1f,1f,outerAlpha)}; gradient = new RadialGradientPaint((float)markerImageW/2, (float)markerimageh/2, (float)markerimagew/2, fractions, colors); g2d.setpaint(gradient); g2d.setcomposite(alphacomposite.dstin); g2d.fillrect(0, 0, markerimagew, markerimageh); g.drawimage(markerimage, 0, 0, null); } 2008 JavaOne SM Conference java.sun.com/javaone 37

38 Animate Marker Indicate that it is dynamic and something the user probably wants to keep tabs on But make it subtle, not too annoying We modulate its look by varying the alpha mask 2008 JavaOne SM Conference java.sun.com/javaone 38

39 Animate Marker: the code // Set up the animation insertionpulse = PropertySetter.createAnimator(500, insertionmarker, "outeralpha", 0f,.7f); insertionpulse.setrepeatcount(animator.infinite); insertionpulse.setrepeatbehavior( Animator.RepeatBehavior.REVERSE); insertionpulse.setstartdelay(500); insertionpulse.start(); // In InsertionMarker, our property setter gets called public void setouteralpha(float alpha) { outeralpha = alpha; repaint(); } // Meanwhile, in paintcomponent(): Color colors[] = {Color.WHITE, Color.WHITE, new Color(1f, 1f, 1f, outeralpha), new Color(1f, 1f, 1f, outeralpha)}; 2008 JavaOne SM Conference java.sun.com/javaone 39

40 Move Marker As user drags component around, move insertion marker Animate these moves by calling insertiontransition int insertionindex = getinsertionindex(dragx, dragy); if (insertionindex!= currentinsertionindex) { currentinsertionindex = insertionindex; insertiontransition.start(); } 2008 JavaOne SM Conference java.sun.com/javaone 40

41 Move Marker (cont d) insertiontransition handles animation of marker moves // Declare transition for marker moves ScreenTransition insertiontransition = new ScreenTransition(this, new InsertionTransitionTarget(), insertionanimator); // InsertionTransitionTarget handles the callback public class InsertionTransitionTarget implements TransitionTarget { public void setupnextscreen() { remove(insertionmarker); add(insertionmarker, currentinsertionindex); validate(); ((JComponent)getRootPane().getGlassPane()). add(draggedcomponent); } } 2008 JavaOne SM Conference java.sun.com/javaone 41

42 Animate the Drop private void insertintoplace() { dragging = false; Point endlocation = insertionmarker.getlocation(); Animator inserter = PropertySetter.createAnimator( 200, draggedcomponent, "location", endlocation); inserter.setacceleration(1f); inserter.addtarget(insertionend); inserter.start(); } public TimingTarget insertionend = new TimingTargetAdapter() { public void end() { remove(insertionmarker); insertionpulse.stop(); insertionpulse = null; add(draggedcomponent, currentinsertionindex); draggedcomponent = null; validate(); } }; 2008 JavaOne SM Conference java.sun.com/javaone 42

43 Demo: Lone Rearranger, What a Drag 2008 JavaOne SM Conference java.sun.com/javaone 43

44 Agenda Fluffy Introduction Demos and Explanations Way too many Timers! Animated Layout Bling 59 minutes of Q&A Self-Serving Links to More Information 2008 JavaOne SM Conference java.sun.com/javaone 44

45 Soft Clipping Clipping is mostly used for performance Graphics.clipRect(x, y, width, height) Clipping can also be used for effects Framing Drawing complex shapes Clipping complex shapes is easy Graphics2D.setClip(Shape) or Graphics2D.clip(Shape) But it sucks! Anti-aliasing does not work 2008 JavaOne SM Conference java.sun.com/javaone 45

46 Soft Clipping Use AlphaComposite Graphics2D g2 = //... // Prepare the clip (instead of calling clip()) g2.fill(clipshape); Composite c = g2.getcomposite(); g2.setcomposite(alphacomposite.srcin); // Draw content g2.setcomposite(c); 2008 JavaOne SM Conference java.sun.com/javaone 46

47 Demo: Showing some love 2008 JavaOne SM Conference java.sun.com/javaone 47

48 Photo Composites Blending in Java2D is easy AlphaComposite But very limited Only affect the alpha channel More composites = more flexibility Photoshop has 20+ composites SwingX offers 30 composites swingx.dev.java.net org.jdesktop.swingx.image.blendcomposite 2008 JavaOne SM Conference java.sun.com/javaone 48

49 Photo Composites 2008 JavaOne SM Conference java.sun.com/javaone 49

50 Photo Composite BlendComposite is used like AlphaComposite Graphics2D g2 = image.creategraphics(); g2.setcomposite(alphacomposite.src); g2.drawimage(imagea, 0, 0, null); g2.setcomposite(blendcomposite.colordodge); g2.setpaint(gradient); g2.fill(getbounds()); g2.dispose(); 2008 JavaOne SM Conference java.sun.com/javaone 50

51 Demo: Animated splash screen 2008 JavaOne SM Conference java.sun.com/javaone 51

52 For More Information (Shameless Self-Promotion) Book defacing (signing) 5:15 (right after this session), bookstore in Moscone South Romain s blog Chet s blog: graphics-geek.blogspot.com Book site demos, libs, links, cool gradient, nifty JavaScript technology animation filthyrichclients.org 2008 JavaOne SM Conference java.sun.com/javaone 52

53 Romain Guy, Google Chet Haase, Adobe Systems 2008 JavaOne SM Conference java.sun.com/javaone 53