Download - CSE 40416 System Interface Design
CSE 40416
System Interface Design
Prof. Aaron StriegelDepartment of Computer Science & Engineering
University of Notre Dame
Lecture 18 – October 5, 2009
04/22/2023 2
Today’s Lecture Physical system
Draganflyer X6 Animations
Procedural XAML
Reminders- Blog Post (Week) - Project 2- Homework 4
04/22/2023 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
04/22/2023 4
DraganFlyer X6
http://www.draganfly.com/uav-helicopter/draganflyer-x6/gallery/videos/video-18.php
04/22/2023 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
04/22/2023 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
04/22/2023 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
04/22/2023 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
04/22/2023 9
Example Code<Canvas> <Button x:Name="btnTarget">Watch me Animate!</Button> <Button Canvas.Top="100" Click="btnAnimate1_Click"> Animation 1</Button></Canvas>
04/22/2023 10
Procedural Codeprivate 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
04/22/2023 11
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);}
04/22/2023 12
Running the code
What happens if an animation is going on?
04/22/2023 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?
04/22/2023 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
04/22/2023 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;
04/22/2023 16
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
04/22/2023 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
04/22/2023 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);}
04/22/2023 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
04/22/2023 20
XAML Code
<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
04/22/2023 21
Run the code
04/22/2023 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>
04/22/2023 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> <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>
04/22/2023 24
Run the code
04/22/2023 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
04/22/2023 26
Styles Can have storyboards on styles
Use Event Trigger syntax EventTrigger, RoutedEvent
Can use property triggers EnterActions ExitActions
04/22/2023 27
Timeline Storyboard
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” AutoReverse=“True” />
04/22/2023 28
Example Code
04/22/2023 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)”
04/22/2023 30
Questions?
- Weekly Blog- Project 2- Homework 4