AnimationSet

• 11/13/2019
• 3 minutes to read
• • 
  • 
  • 
  • 

The AnimationSet class defines an object for storing and managing Storyboard and CompositionAnimations for an element. AnimationSet includes Blur, Fade, Light, Offset, Rotate, Saturation and Scale animations. AnimationSet animations is applied to all the XAML elements in its parent control/panel. AnimationSet animations doesn't affect the functionality of the control.

Syntax

<Page ...
     xmlns:interactivity="using:Microsoft.Xaml.Interactivity"  
     xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"/>

<interactivity:Interaction.Behaviors>
    <interactivity:BehaviorCollection>
        <behaviors:Blur Value="10" Duration="2500" AutomaticallyStart="True"/>
        <behaviors:Scale ScaleX="2" ScaleY="2" Duration="2500" AutomaticallyStart="True"/>
        <!-- Others -->
    </interactivity:BehaviorCollection>
</interactivity:Interaction.Behaviors> 

var anim = MyUIElement.Light(5).Offset(offsetX: 100, offsetY: 100).Saturation(0.5).Scale(scaleX: 2, scaleY: 2);
anim.SetDurationForAll(2500);
anim.SetDelay(250);
anim.Start();

Dim anim = MyUIElement.Light(5).Offset(offsetX:=100, offsetY:=100).Saturation(0.5).Scale(scaleX:=2, scaleY:=2)
anim.SetDurationForAll(2500)
anim.SetDelay(250)
anim.Start()

Sample Output

Properties

EasingType

You can change the way how the animation interpolates between keyframes by defining the EasingType.

EasingType	Explanation	Graphical Explanation
Default	Creates an animation that accelerates with the default EasingType which is specified in AnimationExtensions.DefaultEasingType which is by default Cubic
Linear	Creates an animation that accelerates or decelerates linear
Back	Retracts the motion of an animation slightly before it begins to animate in the path indicated
Bounce	Creates a bouncing effect
Circle	Creates an animation that accelerates or decelerates using a circular function
Cubic	Creates an animation that accelerates or decelerates using the formula f(t) = t3
Elastic	Creates an animation that resembles a spring oscillating back and forth until it comes to rest
Quadratic	Creates an animation that accelerates or decelerates using the formula f(t) = t2
Quartic	Creates an animation that accelerates or decelerates using the formula f(t) = t4
Quintic	Create an animation that accelerates or decelerates using the formula f(t) = t5
Sine	Creates an animation that accelerates or decelerates using a sine formula

Methods

Events

Examples

• AnimationSet has endless possibility. Here is an example of creating popup effect

  Sample Code

  FrameworkElement preElement = null;
  private void MyUIElement_PointerEntered(object sender, PointerRoutedEventArgs e)
  {
      preElement = sender as FrameworkElement;
      preElement.Blur(value: 0).Fade(value: 1).Scale(centerX: 100, centerY: 100, easingType: EasingType.Sine)
              .SetDurationForAll(500)
              .Start();
  }
  
  private void MyUIElement_PointerExited(object sender, PointerRoutedEventArgs e)
  {
      if (preElement != null)
      {
          preElement.Blur(value: 0).Fade(value: 0.1f).Scale(scaleX: 0.5f, scaleY: 0.5f, centerX: 100, centerY: 100, easingType: EasingType.Sine)
                  .SetDurationForAll(500)
                  .Start();
      }
  }
  

  Private Sub MyUIElement_PointerEntered(ByVal sender As Object, ByVal e As PointerRoutedEventArgs)
      preElement = TryCast(sender, FrameworkElement)
      preElement.Blur(value:=0).Fade(value:=1).Scale(centerX:=100, centerY:=100, easingType:=EasingType.Sine).SetDurationForAll(500).Start()
  End Sub
  
  Private Sub MyUIElement_PointerExited(ByVal sender As Object, ByVal e As PointerRoutedEventArgs)
      If preElement IsNot Nothing Then
          preElement.Blur(value:=0).Fade(value:=0.1F).Scale(scaleX:=0.5F, scaleY:=0.5F, centerX:=100, centerY:=100, easingType:=EasingType.Sine).SetDurationForAll(500).Start()
      End If
  End Sub
  

  Sample Output

  

• Use Then() to create a successive animation

  Sample Code

  MyUIElement.Blur(value: 10).Fade(value: 0.5f)
             .Then()
             .Fade(value: 1).Scale(scaleX: 2, scaleY: 2, centerX: 100, centerY: 100, easingType: EasingType.Sine)
             .SetDurationForAll(2500)
             .Start();
  

  MyUIElement.Blur(value:=10) _
             .Fade(value:=0.5F) _
             .[Then]() _
             .Fade(value:=1) _
             .Scale(scaleX:=2, scaleY:=2, centerX:=100, centerY:=100, easingType:=EasingType.Sine) _
             .SetDurationForAll(2500) _
             .Start()
  

  Sample Output

  

Requirements

API

• AnimationSet source code

Related

• AnimationSetCompletedEventArgs

• AnimationExtensions