1. CSE 40416 System 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 Animations Draganflyer X6 Procedural
XAML
Reminders
Blog Post (Week)
Project 2
Homework 4
9/21/2018

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

4. DraganFlyer X6
9/21/2018

5. Split into groups of 2-4 students
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
9/21/2018

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
9/21/2018

7. Animation Classes Two important aspects Start
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
9/21/2018

8. Configuration Basic window Canvas container Two buttons Animation
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/21/2018

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

10. Procedural Code DoubleAnimation Change a double value
private void btnAnimate1_Click(object sender, RoutedEventArgs e) {
DoubleAnimation anim;
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
9/21/2018

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

12. Running the code
What happens if an animation is
going on?
9/21/2018

13. Other Twists Can leave out From or To Duration vs. TimeSpan
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?
9/21/2018

14. Other Tweaks BeginTime SpeedRatio 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
9/21/2018

15. Other Tweaks AutoReverse RepeatBehavior 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;
9/21/2018

16. AccelerationRatio DecelerationReatio
More Tweaks
AccelerationRatio DecelerationReatio
How long until constant speed
Ratio from 0 to 1
Default is zero
No speed up
No slow down at the end
9/21/2018

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

18. Example
private void btnAnimateRepeat_Click(object sender, RoutedEventArgs e) {
DoubleAnimation anim;
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); }
9/21/2018

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

20. XAML Code Triggers EventTrigger
<Button Canvas.Top="100">Watch Me Go!
<Button.Triggers>
<EventTrigger RoutedEvent="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
9/21/2018

21. Run the code
9/21/2018

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>
<EventTrigger RoutedEvent="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>
9/21/2018

23. Storyboard + 2 <Button Padding="30">Double Shiny!
.. Same background linear brush ..
<Button.Triggers>
<EventTrigger RoutedEvent="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>
<Storyboard TargetProperty="Background.GradientStops[1].Offset">
<DoubleAnimation From="0" To="1" Duration="0:0:2"
AutoReverse="True" RepeatBehavior="Forever" />
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
9/21/2018

24. Run the code
9/21/2018

25. Types have different animation classes
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
9/21/2018

26. Can have storyboards on styles
Use Event Trigger syntax
EventTrigger, RoutedEvent
Can use property triggers
EnterActions
ExitActions
9/21/2018

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

28. Example Code
9/21/2018

29. Keyframes Specify values Other note 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)”
9/21/2018

30. Questions?
Weekly Blog
Project 2
Homework 4
9/21/2018