Tải bản đầy đủ - 0 (trang)
17-32. Animate an Object Along a Path

17-32. Animate an Object Along a Path

Tải bản đầy đủ - 0trang

CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION



How It Works

WPF kindly provides you with three ways of animating an object along a path. Each of these methods

takes a System.Windows.Media.PathGeometry as its input, defining the shape of the path that the object

will follow, and produces some kind of output, depending on the timeline’s target type. All three

timelines generate their output values by linearly interpolating between the values of the input path.

Table 17-14 describes each of these three methods.

Table 17-14. Path Animation Types



Type



Description



DoubleAnimationUsingPath



Outputs a single System.Double value, generated from the input

PathGeometry. Unlike the other two path-based timelines, the

DoubleAnimationUsingPath also exposes a Source property that is a

System.Windows.Media.Animation.PathAnimationSource. Table 17-15

describes the value of this enumeration.



PointAnimationUsingPath



Generates a series of System.Windows.Point objects, describing a position

along the input PathGeometry, based on the current time of the animation.

PointAnimationUsingPath is the only timeline of the three that does not

provide any values for the angle of rotation to the tangent of the path at the

current point.



MatrixAnimationUsingPath



Generates a series of System.Windows.Media.Matrix objects describing

a translation matrix relating to a point in the input path. If the

DoesRotateWithTangent property of a MatrixAnimationUsingPath timeline is

set to True, the output matrix is composed of a translation and rotation

matrix, allowing both the position and orientation of the target to be

animated with a single animation.



Table 17-15. Values of the PathAnimationSource Enumeration



Value



Description



X



Values output by the DoubleAnimationUsingPath correspond to the interpolated x component of

the current position along the input path.



Y



Values output by the DoubleAnimationUsingPath correspond to the interpolated y component of

the current position along the input path.



Angle



Values output by the DoubleAnimationUsingPath correspond to the angle of rotation to the

tangent of the line at the current point along the input path.



It should be clear that each of the path timelines has a specific use and offers different levels of

functionality. The MatrixAnimationUsingPath provides the neatest method for animating both the

position and the orientation of an object. The same effect is not possible using a



895



www.it-ebooks.info



CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION



PointAnimationUsingPath, and would require three DoubleAnimationUsingPath timelines, each with a

different PathAnimationSource value for the Source property.

When using a value of PathAnimationSource.Angle for the Source property of a

DoubleAnimationUsingPath timeline or setting the DoesRotateWithTangent property of a

MatrixAnimationUsingPath timeline to True, you ensure that the object being animated is correctly

rotated so that it follows the gradient of the path. If an arrow is translated using a path-driven animation,

its orientation will remain the same throughout the timeline’s duration. If, however, the arrow’s

orientation is animated to coincide with the path, the arrow will be rotated relative to its initial

orientation, based on the gradient of the path. If you have a path defining a circle and the arrow initially

points in to the center of the circle, the arrow will continue to point into the center of the circle as it

moves around the circle’s circumference.

Although the MatrixAnimationUsingPath has the most compact output, controls will rarely expose a

Matrix property that you can directly animate. The target property of a MatrixAnimationUsingPath

timeline will most commonly be the Matrix property of a System.Windows.Media.MatrixTransform, where

the MatrixTransform is used in the render transform or layout transform of the control you want to

animate. In a similar fashion, DoubleAnimationUsingPath can be used to animate the properties of a

System.Windows.Media.TranslateTransform and System.Windows.Media.RotateTransform, or just about

any System.Double property of the target control.



The Code

The following XAML demonstrates how to use a MatrixAnimationUsingPath, where a

System.Windows.Controls.Border is translated and rotated according to the shape of the path. The path

is also drawn on the screen so you can better visualize the motion of the border (see Figure 17-28).


xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Recipe17_32" Height="300" Width="550">




Figures="M 50,150 C 100,-200 500,400 450,100 400,-100 285,400 50,150" />




RepeatBehavior="Forever"

Duration="0:0:5"

AutoReverse="True"

Storyboard.TargetName="BorderMatrixTransform"

Storyboard.TargetProperty="Matrix"

DoesRotateWithTangent="True"

PathGeometry="{StaticResource AnimationPathGeometry}" />








Stroke="Black"

StrokeThickness="1"

Data="{StaticResource AnimationPathGeometry}" />



896



www.it-ebooks.info



CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION




Width="100" Height="50" CornerRadius="5" BorderBrush="Black"

BorderThickness="1" RenderTransformOrigin="0,0">
























Storyboard="{StaticResource MatrixAnimationStoryboard}"/>






VerticalAlignment="Center" />









Figure 17-28. A control midway through a path animation. Notice how the control is oriented such that it

follows a tangent to the gradient of the curve.



897



www.it-ebooks.info



CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION



17-33. Play a Media File

Problem

You need to play a sound or music file and allow the user to control the progress of the playback,

volume, or balance.



Solution

Use a System.Windows.Controls.MediaElement to handle the playback of the media file. Use a

System.Windows.Media.MediaTimeline to control the playback of the desired media through the

MediaElement. Declare the set of controls that will enable the user to control the playback and associate

triggers with the controls that start, stop, pause, and resume the animation controlling the

MediaTimeline. For volume and balance, data-bind controls to the Volume and Balance properties

of the MediaElement.



How It Works

A MediaElement performs the playback of a media file, and you control that playback via animation using

a MediaTimeline. To control the playback, you use a set of EventTrigger elements to start, stop, pause,

and resume the animation Storyboard containing the MediaTimeline.

You can either define the EventTrigger elements in the Triggers collection on the controls that

control the playback or centralize their declaration by placing them on the container in which you place

the controls. Within the Actions element of the Triggers collection, declare the Storyboard elements to

control the MediaTimeline.

One complexity arises when you want a control such as a System.Windows.Controls.Slider to show

the current position within the media file as well as allow the user to change the current play position.

To update the display of the current play position, you must attach an event handler to the

MediaTimeline.CurrentTimeInvalidated event, which updates the Slider position when it fires.

To move the play position in response to the Slider position changing, you attach an event handler

to the Slider.ValueChanged property, which calls the Stoyboard.Seek method to change the current

MediaTimeline play position. However, you must include logic in the event handlers to stop these events

from triggering each other repeatedly as the user and MediaTimeline try to update the Slider position

(and in turn the media play position) at the same time.



The Code

The following XAML demonstrates how to play an AVI file using a MediaElement and allow the user to

start, stop, pause, and resume the playback. The user can also move quickly back and forth through the

media file using a slider to position the current play position, as well as control the volume and balance

of the audio (see Figure 17-29).



898



www.it-ebooks.info



CHAPTER 17 ■ WINDOWS PRESENTATION FOUNDATION




xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Recipe17_33" Height="450" Width="300">






















CurrentTimeInvalidated="Storyboard_Changed">


Storyboard.TargetName="meMediaElement"

RepeatBehavior="Forever" />








































SourceName="sldPosition" >






SourceName="sldPosition" >









899



www.it-ebooks.info



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

17-32. Animate an Object Along a Path

Tải bản đầy đủ ngay(0 tr)

×