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