Animation Rujchai Ungarunyawee Department of Computer Engineering Khon

Animation 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 Type. Name. Animation classes, which use interpolation � 22 Type. Name. Animation. Using. Key. Frames classes, which use key frame animation � 3 Type. Name. Animation. Using. Path classes, which use path-based animation �Common used properties: �From, To, By, Duration, Auto. Reverse, and Repeat. Behavior

Animations in the Code

Simultaneous Animations

Declarative Animation �Storyboard �It’s the XAML equivalent of the Begin. Animation() 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 Target. Property attached properties to point to a specific property �Use Target. Name 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. Desired. Frame. Rate 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 Key. Spline property of key frames.

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

Step 1: 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

Step 2: Create a visual object

Step 3: create the animations