CSE 40416 System Interface Design

1. CSE 40416System Interface Design Prof. Aaron Striegel Department of Computer Science & Engineering University of Notre Dame Lecture 18 – October 5, 2009

2. Today’s Lecture • Physical system • Draganflyer X6 • Animations • Procedural • XAML • Reminders • Blog Post (Week) • Project 2 • Homework 4

3. Where do we go next? • Monday • Animations • Storyboard + triggers • Wednesday • Raw Rendering -> Animations • Multimedia • Sound, video, speech • Next Friday • Code sprint in the lab

4. DraganFlyer X6 http://www.draganfly.com/uav-helicopter/draganflyer-x6/gallery/videos/video-18.php

5. Small Group Exercise • What gesture-based systems have you used (outside of the Surface)? • What gestures would you like to see supported on the Surface? Split into groups of 2-4 students

6. Animation – Procedural Code • Two ways – old school • Timer via callback • Callback for next “frame” • Avoid if possible • Monitor sync, WPF internal rendering • Event handler on Rendering • System.Windows.Media.CompositionTarget • Post-layout, pre-render once per frame • Best for games / etc. • Lots of stuff • New way • Animation class – need to include • System.Windows.Media.Animation

7. Animation Classes • Two important aspects • Can only vary the value of a dependency property • Data types / ranges • Time resolution independent • Better H/W -> Better frame rate • Start • Procedural code first • XAML next

8. Configuration • Basic window • Canvas container • Allows us to modify position / size properties • Two buttons • One to modify • One to trigger • Animation • Small to big over the course of 1 second

9. Example Code <Canvas> <Button x:Name="btnTarget">Watch me Animate!</Button> <Button Canvas.Top="100" Click="btnAnimate1_Click"> Animation 1</Button> </Canvas>

10. Procedural Code private void btnAnimate1_Click(object sender, RoutedEventArgs e) { DoubleAnimationanim; anim = new DoubleAnimation(); anim.From = 50; anim.To = 100; btnTarget.BeginAnimation(Button.WidthProperty, anim); } DoubleAnimation Change a double value Animate over the course of a second

11. Duration • Control how long it takes • days.hours:minutes:seconds.fraction • Add another button private void btnAnimateSlow_Click(object sender, RoutedEventArgs e) { DoubleAnimationanim; anim = new DoubleAnimation(); anim.From = 50; anim.To = 100; anim.Duration = new Duration(TimeSpan.Parse(“0:0:5”)); btnTarget.BeginAnimation(Button.WidthProperty, anim); }

12. Running the code What happens if an animation is going on?

13. Other Twists • Can leave out From or To • Needs to have an initial value • Leave out From • Goes from current value to the To value • Leave out To • Goes from From to current value • Duration vs. TimeSpan • Automatic -> 1 second • Forever • To infinity and beyond?

14. Other Tweaks • BeginTime • Delay when the animation starts • a.BeginTime = TimeSpan.Parse(“0:0:5”); • Negative values are possible • Fills in via linear interpolation • SpeedRatio • Any value greater than zero • Applied to Duration • > 1 -> Take longer • < 1 -> Go faster

15. Other Tweaks • AutoReverse • Play backwards on completion • True / false value • Speed ratio affects both • RepeatBehavior • Repeat number of times • a.RepeatBehavior = new RepeatBehavior(2); • Repeat until time elapses • a.RepeatBehavior = new RepeatBehavior(TimeSpan.Parse(“0:0:20”)); • a.RepeatBehavior = RepeatBehavior.Forever;

16. More Tweaks • AccelerationRatioDecelerationReatio • How long until constant speed • Ratio from 0 to 1 • Default is zero • No speed up • No slow down at the end

17. More tweaks • IsAdditive • Base From or To off of the current value • Does not keep adding on repeat • IsCumulative • Works with RepeatBehavior to keep adding

18. Example private void btnAnimateRepeat_Click(object sender, RoutedEventArgs e) { DoubleAnimationanim; anim = new DoubleAnimation(); anim.BeginTime = TimeSpan.Parse("0:0:1"); anim.From = 50; anim.To = 100; anim.AutoReverse = true; anim.Duration = new Duration(TimeSpan.Parse("0:0:5")); anim.RepeatBehavior = RepeatBehavior.Forever; btnTarget.BeginAnimation(Button.WidthProperty, anim); }

19. XAML Animations • Storyboard • Collection of events to do • Triggers • Seen them with styles • Can base off of a RoutedEvent • Button.Click • Slider.ValueChanged • EventTrigger • Actions

20. XAML Code <Button Canvas.Top="100">Watch Me Go! <Button.Triggers> <EventTriggerRoutedEvent="Button.Click"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard TargetProperty="Width"> <DoubleAnimation From="50" To="100" Duration="0:0:5" AutoReverse="True" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Button.Triggers> </Button> Triggers EventTrigger

21. Run the code

22. Storyboard +1 <StackPanel> <Button>The Old</Button> <Button Padding="30">Shiny! <Button.Background> <LinearGradientBrush> <GradientStop Color="Blue" Offset="0" /> <GradientStop Color="Black" Offset="0.5" /> <GradientStop Color="Blue" Offset="1" /> </LinearGradientBrush> </Button.Background> <Button.Triggers> <EventTriggerRoutedEvent="Button.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard TargetProperty="Background.GradientStops[1].Color"> <ColorAnimation From="Black" To="White" Duration="0:0:2“AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Button.Triggers> </Button>

23. Storyboard + 2 <Button Padding="30">Double Shiny! .. Same background linear brush .. <Button.Triggers> <EventTriggerRoutedEvent="Button.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard TargetProperty="Background.GradientStops[1].Color"> <ColorAnimation From="Black" To="White" Duration="0:0:2“AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> <BeginStoryboard> <Storyboard TargetProperty="Background.GradientStops[1].Offset"> <DoubleAnimation From="0" To="1" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Button.Triggers> </Button>

24. Run the code

25. Key Points • Types have different animation classes • Interpolate between number • DoubleAnimation • Interpolate between colors • ColorAnimation • Can do some property-element • Array access looks C# like • Zero-indexed • Background.GradientStops[1].Color • Multiple parallel storylines – dbl shiny • Can have them work in tandem

26. Styles • Can have storyboards on styles • Use Event Trigger syntax • EventTrigger, RoutedEvent • Can use property triggers • EnterActions • ExitActions

27. Timeline • Storyboard • Give events a BeginTime • Otherwise they start all together (doh!) • Example <Grid> <Grid.Triggers> <EventTriggerRoutedEvent=“Grid.Loaded”> <BeginStoryboard> <Storyboard TargetProperty=“Opacity” RepeatBehavior=“Forever”> <DoubleAnimationStoryboard.TargetName=“text1” BeginTime=“0:0:2” From=“0” To=“1” Duration=“0:0:2” AutoReverse=“True” /> <DoubleAnimationStoryboard.TargetName=“text2” BeginTime=“0:0:2” From=“0” To=“1” Duration=“0:0:6” AutoReverse=“True” />

28. Example Code

29. Keyframes • Specify values • DoubleAnimationusingKeyFrames • Give values at particular times • <DiscreteDoubleKeyFrame Value=“0” KeyTime=“0:0:0” /> • Other note • Need parentheses if you want to modify an attached property • Storyboard.TargetProperty=“(Canvas.Top)”

30. Questions? • Weekly Blog • Project 2 • Homework 4