mirror of https://github.com/Stone-Red-Code/docs-desktop.git synced 2026-09-04 09:06:04 +02:00

Files

T

Andy (Steve) De George be103da07e Replace various WPF include files with content (#1335 )

* net-current-v30plus-md.md

* net-current-v40plus-md.md

* tla2sharptla-ui-md.md

* tla2sharptla-uiautomation-md.md

* tla2sharptla-winclient-md.md

* tla2sharptla-xaml-md.md

* tlasharptla-ui-md.md

* tlasharptla-uiautomation-md.md

* tlasharptla-winclient-md.md

* tlasharptla-xaml-md.md

* fix warnings

2022-03-16 12:14:11 -04:00

12 KiB

Raw Blame History

title, ms.date, dev_langs, helpviewer_keywords, ms.assetid

title

ms.date

dev_langs

helpviewer_keywords

ms.assetid

Property Animation Techniques Overview

03/30/2017

csharp

cpp

animation [WPF], properties [WPF], methods for

properties [WPF], methods for animating

74f61413-f8c0-4e75-bf04-951886426c8b

Property Animation Techniques Overview

This topic describes the different approaches for animating properties: storyboards, local animations, clocks, and per-frame animations.

Prerequisites

To understand this topic, you should be familiar with the basic animation features described in the Animation Overview.

Different Ways to Animate

Because there are many different scenarios for animating properties, WPF provides several approaches for animating properties.

For each approach, the following table indicates whether it can be used per-instance, in styles, in control templates, or in data templates; whether it can be used in XAML; and whether the approach enables you to interactively control the animation. "Per-Instance" refers to the technique of applying an animation or storyboard directly to instances of an object, rather than in a style, control template, or data template.

Animation technique	Scenarios	Supports XAML	Interactively controllable
Storyboard animation	Per-instance, xref:System.Windows.Style, xref:System.Windows.Controls.ControlTemplate, xref:System.Windows.DataTemplate	Yes	Yes
Local animation	Per-instance	No	No
Clock animation	Per-instance	No	Yes
Per-frame animation	Per-instance	No	N/A

Storyboard Animations

A xref:System.Windows.Media.Animation.Storyboard is a special type of container xref:System.Windows.Media.Animation.Timeline that provides targeting information for the animations it contains. To animate with a xref:System.Windows.Media.Animation.Storyboard, you complete the following three steps.

Declare a xref:System.Windows.Media.Animation.Storyboard and one or more animations.
Use the xref:System.Windows.Media.Animation.Storyboard.TargetName%2A and xref:System.Windows.Media.Animation.Storyboard.TargetProperty attached properties to specify the target object and property of each animation.
(Code only) Define a xref:System.Windows.NameScope for a xref:System.Windows.FrameworkElement or xref:System.Windows.FrameworkContentElement. Register the names of the objects to animate with that xref:System.Windows.FrameworkElement or xref:System.Windows.FrameworkContentElement.
Begin the xref:System.Windows.Media.Animation.Storyboard.

The following table shows the different places where each xref:System.Windows.Media.Animation.Storyboard begin technique is supported: per-instance, style, control template, and data template.

Storyboard is begun using…	Per-instance	Style	Control template	Data template	Example
xref:System.Windows.Media.Animation.BeginStoryboard and an xref:System.Windows.EventTrigger	Yes	Yes	Yes	Yes	Animate a Property by Using a Storyboard
xref:System.Windows.Media.Animation.BeginStoryboard and a property xref:System.Windows.Trigger	No	Yes	Yes	Yes	Trigger an Animation When a Property Value Changes
xref:System.Windows.Media.Animation.BeginStoryboard and a xref:System.Windows.DataTrigger	No	Yes	Yes	Yes	How to: Trigger an Animation When Data Changes
xref:System.Windows.Media.Animation.Storyboard.Begin%2A method	Yes	No	No	No	Animate a Property by Using a Storyboard

For more information about xref:System.Windows.Media.Animation.Storyboard objects, see the Storyboards Overview.

Local Animations

Local animations provide a convenient way to animate a dependency property of any xref:System.Windows.Media.Animation.Animatable object. Use local animations when you want to apply a single animation to a property and you don't need to interactively control the animation after it starts. Unlike a xref:System.Windows.Media.Animation.Storyboard animation, a local animation can animate an object that isn't associated with a xref:System.Windows.FrameworkElement or a xref:System.Windows.FrameworkContentElement. You also don't have to define a xref:System.Windows.NameScope for this type of animation.

Local animations may only be used in code, and cannot be defined in styles, control templates, or data templates. A local animation cannot be interactively controlled after it is started.

To animate using a local animation, complete the following steps.

Create an xref:System.Windows.Media.Animation.AnimationTimeline object.
Use the xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A method of the object that you want to animate to apply the xref:System.Windows.Media.Animation.AnimationTimeline to the property that you specify.

The following example shows how to animate the width and background color of a xref:System.Windows.Controls.Button.

[!code-cppanimateproperty#11] [!code-csharpanimateproperty#11] [!code-vbanimateproperty#11]

Clock Animations

Use xref:System.Windows.Media.Animation.Clock objects when you want to animate without using a xref:System.Windows.Media.Animation.Storyboard and you want to create complex timing trees or interactively control animations after they start. You can use Clock objects to animate a dependency property of any xref:System.Windows.Media.Animation.Animatable object.

You cannot use xref:System.Windows.Media.Animation.Clock objects directly to animate in styles, control templates, or data templates. (The animation and timing system actually does use xref:System.Windows.Media.Animation.Clock objects to animate in styles, control templates, and data templates, but it must create those xref:System.Windows.Media.Animation.Clock objects for you from a xref:System.Windows.Media.Animation.Storyboard. For more information about the relationship between xref:System.Windows.Media.Animation.Storyboard objects and xref:System.Windows.Media.Animation.Clock objects, see the Animation and Timing System Overview.)

To apply a single xref:System.Windows.Media.Animation.Clock to a property, you complete the following steps.

Create an xref:System.Windows.Media.Animation.AnimationTimeline object.
Use the xref:System.Windows.Media.Animation.AnimationTimeline.CreateClock%2A method of the xref:System.Windows.Media.Animation.AnimationTimeline to create an xref:System.Windows.Media.Animation.AnimationClock.
Use the xref:System.Windows.Media.Animation.Animatable.ApplyAnimationClock%2A method of the object that you want to animate to apply the xref:System.Windows.Media.Animation.AnimationClock to the property you specify.

The following example shows how to create an xref:System.Windows.Media.Animation.AnimationClock and apply it to two similar properties.

[!code-csharptimingbehaviors_procedural_snip#GraphicsMMCreateAnimationClockWholeClass] [!code-vbtimingbehaviors_procedural_snip#GraphicsMMCreateAnimationClockWholeClass]

To create a timing tree and use it animate properties, you complete the following steps.

Use xref:System.Windows.Media.Animation.ParallelTimeline and xref:System.Windows.Media.Animation.AnimationTimeline objects to create the timing tree.
Use the xref:System.Windows.Media.Animation.TimelineGroup.CreateClock%2A of the root xref:System.Windows.Media.Animation.ParallelTimeline to create a xref:System.Windows.Media.Animation.ClockGroup.
Iterate through the xref:System.Windows.Media.Animation.ClockGroup.Children%2A of the xref:System.Windows.Media.Animation.ClockGroup and apply its child xref:System.Windows.Media.Animation.Clock objects. For each xref:System.Windows.Media.Animation.AnimationClock child, use the xref:System.Windows.Media.Animation.Animatable.ApplyAnimationClock%2A method of the object that you want to animate to apply the xref:System.Windows.Media.Animation.AnimationClock to the property you specify

For more information about Clock objects, see the Animation and Timing System Overview.

Per-Frame Animation: Bypass the Animation and Timing System

Use this approach when you need to completely bypass the WPF animation system. One scenario for this approach is physics animations, where each step in the animation requires objects to be recomputed based on the last set of object interactions.

Per-frame animations cannot be defined inside styles, control templates, or data templates.

To animate frame-by-frame, you register for the xref:System.Windows.Media.CompositionTarget.Rendering event of the object that contains the objects you want to animate. This event handler method gets called once per frame. Each time that WPF marshals the persisted rendering data in the visual tree across to the composition tree, your event handler method is called.

In your event handler, perform whatever calculations are necessary for your animation effect and set the properties of the objects you want to animate with these values.

To obtain the presentation time for the current frame, the xref:System.EventArgs associated with this event can be cast as xref:System.Windows.Media.RenderingEventArgs, which provide a xref:System.Windows.Media.RenderingEventArgs.RenderingTime%2A property that you can use to obtain the current frame's rendering time.

For more information, see the xref:System.Windows.Media.CompositionTarget.Rendering page.

12 KiB Raw Blame History

Property Animation Techniques Overview

Prerequisites

Different Ways to Animate

Storyboard Animations

Local Animations

Clock Animations

Per-Frame Animation: Bypass the Animation and Timing System

See also

12 KiB

Raw Blame History