Using Windows 10 Composition Animations

WindowsCompositionAnimationExample.md

The new Composition Animation effects available in Windows 10 make it easy to create simple animation effects for XAML controls. For example, here's a simple example that applies a scaling effect to a Button when the user's mouse pointer moves over it.

Here's the XAML:

<Page
    x:Class="UWP_Animation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWP_Animation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel Orientation="Vertical" Margin="0,138,0,138" HorizontalAlignment="Center" Width="363" VerticalAlignment="Stretch">
            <Button Content="Option 1" HorizontalAlignment="Left" Height="112" Margin="100,50,0,0" VerticalAlignment="Top" Width="171" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited"/>
            <Button Content="Option 2" HorizontalAlignment="Left" Height="112" Margin="100,50,0,0" VerticalAlignment="Top" Width="171" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited"/>
            <Button Content="Option 3" HorizontalAlignment="Left" Height="112" Margin="100,50,0,0" VerticalAlignment="Top" Width="171" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited"/>
            <Button Content="Option 4" HorizontalAlignment="Left" Height="112" Margin="100,50,0,0" VerticalAlignment="Top" Width="171" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited"/>
        </StackPanel>
    </Grid>
</Page>

And here's the C#:

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;


namespace UWP_Animation
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

      
        private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            Button myButton = sender as Button;
            var compositor = Window.Current.Compositor;
            var animation = compositor.CreateVector3KeyFrameAnimation();
            animation.InsertKeyFrame(1.0f, new System.Numerics.Vector3(1.1f, 1.1f, 1.0f));
            animation.Duration = TimeSpan.FromSeconds(0.25);
            animation.Target = "Scale";
            myButton.CenterPoint = new System.Numerics.Vector3((float)(myButton.Width/2.0), (float)(myButton.Height / 2.0), 1.0f);
            myButton.StartAnimation(animation);
        }

        private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            Button myButton = sender as Button;
            var compositor = Window.Current.Compositor;
            var animation = compositor.CreateVector3KeyFrameAnimation();
            animation.InsertKeyFrame(1.0f, new System.Numerics.Vector3(1.0f, 1.0f, 1.0f));
            animation.Duration = TimeSpan.FromSeconds(0.25);
            animation.Target = "Scale";
            myButton.StartAnimation(animation);

        }

    }
}