This document discusses animation in WPF. It explains that WPF uses a timing system to animate properties over time using animations like ColorAnimation and DoubleAnimation. It provides examples of how to define animations in XAML using Storyboards and Timelines to animate values like opacity, width, and color. Key aspects covered include using properties like Duration, From and To to control the animation, and organizing multiple animations into timeline hierarchies.

1. Animation

2. Animation Process
• The program creates a timer.
• The program checks the timer at set intervals to see how
much time has elapsed.
• Each time the program checks the timer, it computes the
current opacity value for the
rectangle based on how much time has elapsed.
• The program then updates the rectangle with the new
value and redraws it.

3. WPF Concepts
• WPF includes an efficient timing system that is exposed
through managed code and Extensible Application
Markup Language (XAML)
• Timeline
• Clocks
• Local animations

4. Animation and Properties
• animation subsystem in WPF relies heavily on
DependencyProperties
Property
Animation
Definition
Color
ColorAnimation
Animates the color on a Brush or
GradientStop.
Double
DoubleAnimation
Animates the Opacity, Angle, or
Length properties.
Point
PointAnimation
Animates a specific spot on the X,Y
plane in a linear fashion.
PointAnimation is commonly used
for lines and paths.
String
None
Animates the TextContent of a
TextBlock or the Content of a
Button.

5. Common key properties
• By - Acts as a measurement in that it determines how
much of an animation will occur.
• From - Determines the initial stage for which the
transition will begin. The double type valued
range is from 0 to 1.
• To - Determines the final stage of the transition. The
double type valued range is from 0 to 1.

6. Timelines
• System.Windows.Media.Animation namespace
• Timeline - public base class that determines a period of
time
<Storyboard>
<DoubleAnimation From="200"
To="400" Duration="0:0:5"
Storyboard.TargetName="btnAnimated"
Storyboard.TargetProperty="Width"/>
</Storyboard>

7. Timeline Hierarchies
<Storyboard x:Name="A">
<DoubleAnimation x:Name="B" Duration="0:0:3" ... />
<ParallelTimeline x:Name="C" BeginTime="0:0:3">
<DoubleAnimation x:Name="D" Duration="0:0:2" ... />
<ParallelTimeline x:Name="E" BeginTime="0:0:l" Duration="0:0:4" >
<DoubleAnimation x:Name="F" BeginTime="0:0:l" Duration="0:0:2"
... />
<DoubleAnimation x:Name="G" Duration="0:0:10".../>
</ParallelTimeline>
</ParallelTimeline>
</Storyboard>

8. Timeline Hierarchies

9. • Acceleration and deceleration: AccelerationRatio and
DecelerationRatio
• Key frame timelines
• Storyboards: BeginStoryboard, PauseStoryboard and
ResumeStoryboard

10. Questions?