Animation

1
Animation

• Rujchai Ung-arunyawee
• Department of Computer Engineering
• Khon Kaen University

2
Understanding WPF Animation

• Timer-Based Animation
• Developers have to build their own animation
  systems from scratch
• Set Timer-gtEvent Handler-gtTrigger Painting-gt
  Render in Painting code
• Property-Based Animation
• WPF animation is simply a way to modify the value
  of a dependency property over an interval of time
• Every animation acts on a single dependency
  property
• To animate a property, you need to have an
  animation class that supports its data type

3
Animation Classes

• System.Windows.Media.Animation namespace
• 17 TypeNameAnimation classes, which use
  interpolation
• 22 TypeNameAnimationUsingKeyFrames classes, which
  use key frame animation
• 3 TypeNameAnimationUsingPath classes, which use
  path-based animation
• Common used properties
• From, To, By, Duration, AutoReverse, and
  RepeatBehavior

4
(No Transcript)
5
Animations in the Code
6
Simultaneous Animations
7
Declarative Animation

• Storyboard
• Its the XAML equivalent of the BeginAnimation()
  method. It allows you to direct an animation to
  the right element and property.
• Event trigger.
• It responds to a property change or event (such
  as the Click event of a button) and controls the
  storyboard. For example, to start an animation,
  the event trigger must begin the storyboard.

8
The Storyboard

• Can use it to group multiple animations, to
  control the playback of animationpausing it,
  stopping it, and changing its position
• Use TargetProperty attached properties to point
  to a specific property
• Use TargetName attached properties to point to a
  specific element

9

• To put several animations in the same storyboard
  but allow each animation to act on a different
  element and property.

10
Event Triggers
11
Simultaneous Animations
12
Animation Frame Rate

• WPF always attempts 60 frames per second, unless
  you tell it otherwise.
• Use the Timeline.DesiredFrameRate attached
  property on the storyboard

13
Key Frame Animation

• An animation thats made up of many short
  segments.
• Each segment represents an initial, final, or
  intermediary value in the animation.
• When you run the animation, it moves smoothly
  from one value to another.

14
(No Transcript)
15
Linear Key Frame Animations

• Transitions smoothly between the key frame values

16
Discrete Key Frame Animations

• No interpolation is performed
• When the key time is reached, the property
  changes abruptly to the new value

17
Spline Key Frame Animations

• Use spline interpolation to move smoothly from
  one key value to another
• You define a cubic Bézier curve to the KeySpline
  property of key frames.

18
Path-Based Animation

• Helps you move a visual object along a path

19
Step1 Build the path

• Simply define as a resource
• To show the path, you simply need to add a Path
  element that uses the geometry youve defined

20
Step2 Create a visual object
21
Step3 create the animations
22
(No Transcript)