300 likes | 428 Views
In this lecture from the Department of Computer Science and Engineering at the University of Notre Dame, Prof. Aaron Striegel delves into the intricacies of animation in system interface design using the Draganflyer X6 as a case study. Key topics include procedural code animation, XAML integration, and event-driven animations utilizing Storyboards and triggers. Participants engage in small group discussions about gesture-based systems. The lecture concludes with practical coding examples in XAML, showcasing animation properties like duration, auto-reverse, and speed ratio. Discover innovative ways to enhance user interactions through effective animations.
E N D
CSE 40416System Interface Design Prof. Aaron Striegel Department of Computer Science & Engineering University of Notre Dame Lecture 18 – October 5, 2009
Today’s Lecture • Physical system • Draganflyer X6 • Animations • Procedural • XAML • Reminders • Blog Post (Week) • Project 2 • Homework 4
Where do we go next? • Monday • Animations • Storyboard + triggers • Wednesday • Raw Rendering -> Animations • Multimedia • Sound, video, speech • Next Friday • Code sprint in the lab
DraganFlyer X6 http://www.draganfly.com/uav-helicopter/draganflyer-x6/gallery/videos/video-18.php
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
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
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
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
Example Code <Canvas> <Button x:Name="btnTarget">Watch me Animate!</Button> <Button Canvas.Top="100" Click="btnAnimate1_Click"> Animation 1</Button> </Canvas>
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
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); }
Running the code What happens if an animation is going on?
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?
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
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;
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
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
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); }
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
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
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>
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>
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
Styles • Can have storyboards on styles • Use Event Trigger syntax • EventTrigger, RoutedEvent • Can use property triggers • EnterActions • ExitActions
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” />
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)”
Questions? • Weekly Blog • Project 2 • Homework 4