ScaleAnimation ScaleAnimation ScaleAnimation ScaleAnimation Class

Definition

Provides methods that enable you to retrieve the parameters for a scaling (growing or shrinking) animation.

public : sealed class ScaleAnimation : IPropertyAnimation, IScaleAnimationpublic sealed class ScaleAnimation : IPropertyAnimation, IScaleAnimationPublic NotInheritable Class ScaleAnimation Implements IPropertyAnimation, IScaleAnimation// You can use this class in JavaScript.
Attributes
Windows 10 requirements
Device family
Windows Desktop Extension SDK (introduced v10.0.10240.0)
API contract
Windows.UI.Core.AnimationMetrics.AnimationMetricsContract (introduced v1)

Examples

To obtain an instance of the ScaleAnimation class, you first obtain the collection of animations in the animation description, and then walk that array of animations to find any that are of type scale. The following examples shows this process. The effect and target parameters are assumed to have been previously assigned.


var animationDescription = new Windows.UI.Core.AnimationMetrics.AnimationDescription(effect, target);

var animations = animationDescription.animations;
for (var i = 0; i < animations.size; i++) {
    var animation = animations[i];

    switch (animation.type) {
        case animationMetrics.PropertyAnimationType.scale:
            // Retrieve scale animation metrics
            break;
        case animationMetrics.PropertyAnimationType.translation:
            // Retrieve translation animation metrics
            break;
        case animationMetrics.PropertyAnimationType.opacity:

            // Retrieve scale animation metrics
            break;
    }
}

The following example shows the C# version of the same code.


using Windows.UI.Core.AnimationMetrics;

AnimationDescription animationDescription = new AnimationDescription(effect, target);
foreach (var animation in animationDescription.Animations)
{
    switch (animation.Type)
    {
        case PropertyAnimationType.Scale:
            {
                ScaleAnimation scale = animation as ScaleAnimation;
                // Retrieve scale animation metrics.
            }
            break;
        case PropertyAnimationType.Translation:
            {
                TranslationAnimation scale = animation as TranslationAnimation;
                // Retrieve translation animation metrics.
            }
            break;
        case PropertyAnimationType.Opacity:
            {
                OpacityAnimation opacity = animation as OpacityAnimation;
                // Retrieve opacity animation metrics.
            }
            break;
    }
}

Remarks

The scale is a factor that is applied to the object in either the x- or y- direction. A scale value of 1.0 represents no scaling, less than 1 represents shrinking, and greater than 1 represents magnification.

The origin point of a scale represents the center point around which the scaling should take place. This point remains fixed throughout the animation; it does not animate. The origin is stated as a fraction of the object's size. For example, a NormalizedOrigin.X of 0.25 represents a point 25% of the way from the left edge to the right edge of the object. If the object is 100 pixels wide, then a NormalizedOrigin.X represents a point 25 pixels from the left edge of the object.

Note

The sense of left and right are flipped on right-to-left (RTL) systems.

As an example, consider an object whose coordinate rectangle is (100, 150, 200, 300), expressed in (left, top, right, bottom) format. Suppose that the interpolated x-scale is 0.4, the interpolated y-scale is 2.0, the x-origin is 0.25, and the y-origin is 0.80.

First, convert the normalized origin values to pixels. The width of the object is 100 pixels and the x-origin is given as 0.25, which results in an x-origin of 25 pixels from the left of the object. Since the object's left coordinate is 100, the x-coordinate of the origin is 125.

Similarly, the height of the object is 150 pixels and the y-origin is 0.80, which results in a y-origin of 120 pixels from the top of the object. Since the object's top coordinate is 150, the y-coordinate of the origin is 245.

To apply the scale transform, we first translate the object by the negative of the origin, moving it to (-25, -95, 75, 55). Next, we multiply the left and right coordinates by the x-scale and the top and bottom coordinates by the y-scale, which results in (-10, -190, 30, 110). Finally, we translate the object by the origin, which results in (115, 55, 155, 300).

The InitialScaleX and InitialScaleY properties are guaranteed to be either both set or both not set. If they are not set, then the current object scale should be used as the initial value of the animation.

The timing controls Control1 and Control2 specify the location of the first and second control points of a cubic Bézier curve. These two points have the same meaning as they do in the CSS transition-timing-function property. Control point zero is always (0,0) and control point three is always (1,1). The coordinates of Control1 and Control2 are always in the range 0 to 1, inclusive.

On the resulting Bézier curve, the x-coordinate represents time and the y-coordinate represents progress. The raw curve from (0,0) to (1,1) is scaled to match the actual duration and range of the animated transition, such that x=0 is the starting time of the transform, x=1 is the ending time, y=0 is the initial value of the animated property, and y=1 is the final value. Values of x and y between 0 and 1 represent corresponding intermediate values of time and the animation.

Properties

Control1 Control1 Control1 Control1

Gets the location of the first control point for the cubic Bézier curve that describes how the scale should animate over time.

public : Point Control1 { get; }public Point Control1 { get; }Public ReadOnly Property Control1 As Point// You can use this property in JavaScript.
Value
Point Point Point Point

The location of the control point.

See Also

Control2 Control2 Control2 Control2

Gets the location of the second control point for the cubic Bézier curve that describes how the scale should animate over time.

public : Point Control2 { get; }public Point Control2 { get; }Public ReadOnly Property Control2 As Point// You can use this property in JavaScript.
Value
Point Point Point Point

The location of the control point.

See Also

Delay Delay Delay Delay

Gets the amount of time between when the scale animation is instructed to begin and when that animation actually begins to draw.

public : TimeSpan Delay { get; }public TimeSpan Delay { get; }Public ReadOnly Property Delay As TimeSpan// You can use this property in JavaScript.
Value
TimeSpan TimeSpan TimeSpan TimeSpan

The amount of time to delay before starting the scaling animation.

Remarks

This delay is in addition to any StaggerDelay applied to the parent AnimationDescription. For instance, if a transition is scheduled through the application of StaggerDelay and StaggerDelayFactor to begin at time t=200 ms and this delay is set to 250 ms, then the transition will actually begin to animate at 450 ms.

See Also

Duration Duration Duration Duration

Gets the amount of time over which the scale animation should be performed. This does not include the delay.

public : TimeSpan Duration { get; }public TimeSpan Duration { get; }Public ReadOnly Property Duration As TimeSpan// You can use this property in JavaScript.
Value
TimeSpan TimeSpan TimeSpan TimeSpan

The duration of the animation.

Remarks

The duration can be 0, in which case the object instantly jumps to its final size and no animation is shown.

See Also

FinalScaleX FinalScaleX FinalScaleX FinalScaleX

Gets the final horizontal scale factor for the object.

public : float FinalScaleX { get; }public float FinalScaleX { get; }Public ReadOnly Property FinalScaleX As float// You can use this property in JavaScript.
Value
float float float float

The final horizontal scale factor by which to multiply the value.

See Also

FinalScaleY FinalScaleY FinalScaleY FinalScaleY

Gets the final vertical scale factor for the object.

public : float FinalScaleY { get; }public float FinalScaleY { get; }Public ReadOnly Property FinalScaleY As float// You can use this property in JavaScript.
Value
float float float float

The final vertical scale factor by which to multiply the value.

See Also

InitialScaleX InitialScaleX InitialScaleX InitialScaleX

Gets the initial horizontal scale factor for the object.

public : IReference<float> InitialScaleX { get; }public Nullable<float> InitialScaleX { get; }Public ReadOnly Property InitialScaleX As Nullable<float>// You can use this property in JavaScript.
Value
IReference<float> Nullable<float> Nullable<float> Nullable<float>

The initial horizontal scale factor, if any, by which to multiply the value.

Remarks

This property's value might not be set when this method is called. In that case, the object's current horizontal scale should be used as the starting point for the animation.

See Also

InitialScaleY InitialScaleY InitialScaleY InitialScaleY

Gets the initial vertical scale factor for the object.

public : IReference<float> InitialScaleY { get; }public Nullable<float> InitialScaleY { get; }Public ReadOnly Property InitialScaleY As Nullable<float>// You can use this property in JavaScript.
Value
IReference<float> Nullable<float> Nullable<float> Nullable<float>

The initial vertical scale factor, if any, by which to multiply the value.

Remarks

This property's value might not be set when this method is called. In that case, the object's current horizontal scale should be used as the starting point for the animation.

See Also

NormalizedOrigin NormalizedOrigin NormalizedOrigin NormalizedOrigin

Gets the center point for the scaling animation, expressed as a point relative to the object's normal size.

public : Point NormalizedOrigin { get; }public Point NormalizedOrigin { get; }Public ReadOnly Property NormalizedOrigin As Point// You can use this property in JavaScript.
Value
Point Point Point Point

The normalized center point.

See Also

Type Type Type Type

Gets the type of animation represented by this object.

public : PropertyAnimationType Type { get; }public PropertyAnimationType Type { get; }Public ReadOnly Property Type As PropertyAnimationType// You can use this property in JavaScript.

Remarks

The PropertyAnimation object can be cast to the derived object described by its type. See PropertyAnimationType for a list of types and their corresponding objects.

See Also

See Also