executeAnimation function
TOC
Réduire la table des matières
Développer la table des matières

WinJS.UI.executeAnimation function

[This documentation is preliminary and is subject to change.]

Applies to: Metro style apps only

Executes a specific CSS animation on a specific element.

Syntax

WinJS.UI.executeAnimation(element, animation);

Parameters

element

Type: Object

Element or elements to be animated. This parameter can be expressed in several ways:

  • As the special value "undefined", which means that the animation has no such target
  • As a single object
  • As a JavaScript array (possibly empty), in which each element of the array can be a single element or a JavaScript array of elements.
  • As a NodeList (for example, the result of querySelectorAll)
  • As an HTMLCollection
animation

Type: Object

The Animation Library animation object or an array of Animation Library animation objects to apply to element. This parameter must contain the following members:

  • property: The property to animate. For example:, opacity or mstransform.
    • property: opacity
    • property: mstransform
  • delay: The initial amount of time, in milliseconds, between when the animation is instructed to begin and when that animation actually begins to draw.
  • duration: The amount of time, in milliseconds, over which the animation should be performed. This does not include the delay.
  • timing: The CSS timing curve. For example:
    • timing: "linear"
    • timing: "ease-in"
    • timing: "cubic-bezier(0.1, 0.9, 0.2, 1)"
  • from: The initial value of the property at the beginning of the animation. This value must be valid for the property being animated.
  • to: The final value of the property at the end of the animation. This value must be valid for the property being animated.

Note that any member can be set to a function rather than a fixed value. In that case, the function is called for the member and its return value is used as the corresponding value in the animation. Using a function allows you to provide a different action for each element. For example, this technique is used to implement staggered animations and to allow objects to move to different final positions.

Return value

This function does not return a value.

Examples

The following example shows a call to this function.



return thisWinUI.executeAnimation(
    element,
    {
        property: "opacity",
        delay: 0,
        duration: 83,
        timing: "linear",
        from: 1,
        to: 0
    });

The animation parameter can contain multiple animation objects as an array. This allows you to trigger different animations against different properties simultaneously or in sequence. The following code animates both opacity and mstransform.



return thisWinUI.executeAnimation(
    element,
    [{
        property: "opacity",
        delay: 83,
        duration: 83,
        timing: "linear",
        from: 0,
        to: 1
    },
    {
        property: mstransform,
        delay: 0,
        duration: 367,
        timing: "cubic-bezier(0.1, 0.9, 0.2, 1)",
        from: translateCallback(offsetArray),
        to: "translate(0px, 0px)"
    }]);

Requirements

Minimum supported client

Windows 8 Consumer Preview

Minimum supported server

Windows Server 8 Beta

Namespace

WinJS.UI

Library

Base.js

See also

executeTransition
Using the Animation Library animations sample

 

 

Build date: 2/10/2012

Ajouts de la communauté

AJOUTER
Afficher:
© 2017 Microsoft