Rujchai Ung-arunyawee Department of Computer Engineering Khon Kaen University

Understanding WPF Animation Timer-Based Animation Developers have to build their own animation systems from scratch Set Timer->Event Handler->Trigger Painting-> 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

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

Animations in the Code

Simultaneous Animations

Declarative Animation Storyboard It’s 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.

The Storyboard Can use it to group multiple animations, to control the playback of animation—pausing 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

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

Event Triggers

Simultaneous Animations

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

Key Frame Animation An animation that’s 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.

Linear Key Frame Animations Transitions smoothly between the key frame values

Discrete Key Frame Animations No interpolation is performed When the key time is reached, the property changes abruptly to the new value

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.

Path-Based Animation Helps you move a visual object along a path

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 you’ve defined

Step2: Create a visual object

Step3: create the animations