"Programming WPF" translation 8th 1. Animation Basics

Original: "Programming WPF" translation 8th Chapter 1. Animation basics

animations include changing some of the visible features of the user interface over time, such as its size, position, or color. You can do it very hard by creating a timer and modifying the appearance of the user interface in each of the Timer_tick handles. Of course, this is the typical practice of animations in Win32 or Windows Forms . Fortunately,WPF takes care of these low-level details. Animations, like other features in WPF, simply require that we declare what we want to do. The system will take care of its implementation for us.

all the WPF Animation support boils down to changing one or more properties over a period of time. This means there are a lot of limitations on what the WPF animation system can do for you. For example, the visual tree all maintains the same structure. An animation cannot add or remove elements for you (although it is possible to set properties for an animation to make the element visible). There is no way to provide ascenario of "before" and "after", or to have WPF add a new scene between the two. This means that there is no automatic way of doing an animation, from one look to another, to the extent that it is enough to slide an element from its starting position to the terminating position.

The key to understanding what animations can or cannot be achieved is to understand the nature of its focused properties. It just changes your notifications regardless of any attributes. When deciding any of the UI design animations, ask yourself what you want to see exactly-through the middle of the animation, and figure out how to set the required properties-so you can capture the halfway point. If you apply this to the animation process: converting from a horizontal StackPanel to a vertical one, there is obviously a problem. You can't set a property on a StackPanel so that it shows what's in the middle of a horizontal layout and a vertical layout. If you can't do this, then the animation system can't! (If you want to achieve this type of effect, you can use Canvas, which allows elements to be placed anywhere.) You may need to manually set the position and size of the animation for each element. )

before we see any part of the animation in detail, let's examine a simple example. Example 8-1 shows a form tag that contains a separate red ellipse. The Height of the ellipse element is set to , but he does not directly declare a Width property. Instead,the Width property is determined by an animation. The ellipse changes its width over a period of time.

Example 8-1

<WindowText= "Simple Animation"Width= " the"Height= "Max"
Xmlns:x= "http://schemas.microsoft.com/winfx/xaml/2005"
xmlns= "http://schemas.microsoft.com/winfx/avalon/2005">

<Window.storyboards>
<SettertimelineTargetName= "Myellipse"Path= "(ellipse.width)">
<DoubleAnimation from= "Ten" to= "+"Duration= "0:0:5"
RepeatBehavior= "Forever" />
</Settertimeline>
</Window.storyboards>

<Ellipsex:name= "Myellipse"Fill= "Red"Height= "+" />

</Window>

The animation is declared in the Window.storyboards property. Storyboard A collection of animations that you use to adjust multiple animations. When animations are defined in tags, they always appear in the Storyboard , in simple examples- there is only one animation in Storyboard.

The animation In this example consists of two parts, Settertimeline and doubleanimation. Settertimeline determines What animation is designed through the TargetName attribute, which involves the x:name attribute of the ellipse . Its Path property indicates that the Width of the Ellipse has an animated effect.

#Path canvas.left

embedded to settertimeline DoubleAnimation double" in the doubleanimation double int32 point size point is a two-dimensional value that means we might want to control its animated appearance-for a one-dimensional type such as Double properties--we animate it here--yes Double Doubleanimation

example 8-1 sets the from property to aproperty of $,and the Duration property to 0:0:5 . As you may have guessed, this means that Width starts at ten andchanges gradually to a time of 5 seconds. the RepeatBehavior property is set to Forever, which indicates that once the animation reaches the end point, it should return to the beginning and indeterminate repetition. Figure 8-1 shows how the ellipse shows various shapes in the animation.

Figure 8-1

Make sure that you specify the values of all 3 parts of any Duration in the animation in detail . a value of 2 is interpreted as 2 hours. If you mean 2 seconds, you have to use 0:0:2, which means 0 hours , 0 minutes , and 2 seconds.

as we can see, there are a lot of ways of how the right choice of properties is changed, to make sure how it directly supports the movement of curves and the changes in speed, but it is these ways that need WPF Sets the correct value at the correct time.

8.1.1 properties that animate effects can be set

Most properties that can affect the appearance of an element can animate. There are three requirements, a property that can be animated: The property must be a dependency property, an appropriate animation type must be available, and the target element must derive from FrameworkElement.

the animation system relies on a dependency property system-it can automatically update property values. The dependency property is described in detail in section 9. Most WPF element properties are dependency properties.

The second requirement is that the type of the property must have a corresponding animation type, which involves like The type of DoubleAnimation or pointanimation . WPF provides animation types for most types that use attributes to affect the appearance of a skin. The only exception is the enumeration type. For example,the Orientation type used by StackPanel does not have a corresponding animation type. This is meaningful-when you think this enumeration supports only two values,horizontal or Vertical. There is no way to represent intermediate values between the two choices, so animations are not supported.

You can write your own animation type. If you write a control--the property contains these custom types that can be animated--this is usually useful. Technically, nothing can stop you. Write an animation type for a system type that does not support animation effects. For example, you can theoretically write a orientationanimation horizontal or Vertical

the last requirement listed above is that the target element of the animation must be a FrameworkElement. This is usually not an issue, because WPF user interface elements are derived from this class. However, this is sometimes the number of animations you might want to animate, not actually the FrameworkElement property, but the inline property of the property. For example, the ellipse in example 8-1 is red, but we might want to animate the color. the type of the Fill property is the Brush, andthe XAML compiler interprets the Red value as shorthand for the Solodcolorbrush property. Example 8-2 shows the full version of this tag. This is the exact equivalent of the Ellipse of the single line declared in the example 8-1.

Example 8-2

<Ellipsex:name= "Myellipse"Height= "+">
<Ellipse.fill>
<SolidColorBrushColor= "Red" />
</Ellipse.fill>
</Ellipse>

This full extended version makes it clearer to change the color of an ellipse for a certain amount of time, and we need to animate the Solodcolorbrush property. But here's a question. Solodcolorbrush is not a FrameworkElementbecause the brush is not part of the user interface tree. Brushes are very lightweight objects that describe the appearance of elements, rather than as visible elements with their own capabilities. You cannot assign a x:name to a Brush, and it cannot be a direct target for an animation.

This may seem to be a fairly strict constraint. Fortunately, there is a solution. Animations can target inline properties. The Path property of Settertimeline can affect sub-objects inside a property, and we can use it to animate a brush or other similar lightweight type of property.

example 8-3 shows any animations that animate the color of an ellipse.

Example 8-3

<Window.storyboards>
<SettertimelineTargetName= "Myellipse"
Path= "(Ellipse.fill). (Solidcolorbrush.color) ">
<ColorAnimation
Duration= "0:0:7" from= "Red" to= "Purple"
RepeatBehavior= "Forever"AutoReverse= "True" />
</Settertimeline>
</Window.storyboards>

This animation requires a FrameworkElement as its target, so its TargetName once again points to the ellipse. the Settertimeline.path property uniquely flags the Ellipse.fill property, as well as indicates that it wants to drill down to this Solodcolorbrush property, as well as set the inline the Color property. The ColorAnimation then specifies in detail that every 7 seconds The color will fade between red and purple.

If you use a low-level geometry type (see Chapter 7) to generate a drawing, you need to use the technique shown in the example 8-3, because Geometry is not directly derived from FrameworkElement 's. You can animate the geometry in the Data property of path -by specifying an animation target for path and using the settertimeline path property to specify the properties of the geometry embedded in Path in detail . The same technique is also used to animate the-I base.

Settertimeline and various animation types are examples of timeline. Timeline is the basis of animation, so we will look at these techniques in detail.

"Programming WPF" translation 8th 1. Animation Basics