Creating Animations as Resources for Reuse

7/17/2009

You can place animations (ColorAnimation, DoubleAnimationUsingKeyFrames, etc.) in a resource for reuse. I would place them in App.xaml for app level scope availability if need be. The sample below shows 4 ellipses with separate storyboards. The storyboards reference the animations using StaticResourceExtension. The storyboards all have separate start times and target properties. The animations can be reused due to their low level scope (animating a generic double, color, etc.) so they can be used anywhere where these types are used, not just among similar objects.

App.xaml:

<Application x:Class="AnimationResources.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="Window1.xaml">
    <Application.Resources>
        <DoubleAnimationUsingKeyFrames x:Key="aniX">
            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
            <LinearDoubleKeyFrame KeyTime="0:0:0.9" Value="210"/>
            <LinearDoubleKeyFrame KeyTime="0:0:1" Value="200"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames x:Key="aniOpacity">
            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
            <LinearDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
            <LinearDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Application.Resources>
</Application>

Window1.xaml:

<Window 
    x:Class="AnimationResources.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Animation Resource Sample" 
    Height="163" 
    Width="267">
    <Canvas>
        <Ellipse 
            Width="24" 
            Height="24" 
            Fill="PaleGreen" 
            Stroke="Black" 
            StrokeThickness="1" 
            Opacity=".1">
            <Ellipse.Resources>
                <Storyboard 
                    RepeatBehavior="5x" 
                    BeginTime="0:0:1" 
                    x:Key="sbLeft" 
                    Storyboard.TargetProperty="(Canvas.Left)">
                    <StaticResourceExtension ResourceKey="aniX"/>
                </Storyboard>
                <Storyboard 
                    RepeatBehavior="5x" 
                    BeginTime="0:0:1" 
                    x:Key="sbOpacity" 
                    TargetProperty="Opacity">
                    <StaticResourceExtension ResourceKey="aniOpacity"/>
                </Storyboard>
            </Ellipse.Resources>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard Storyboard="{StaticResource sbLeft}"/>
                    <BeginStoryboard Storyboard="{StaticResource sbOpacity}"/>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>

        <Ellipse 
            Width="24" 
            Height="24" 
            Fill="PaleVioletRed" 
            Stroke="Black" 
            StrokeThickness="1" 
            Canvas.Top="32" 
            Opacity=".1">
            <Ellipse.Resources>
                <Storyboard 
                    RepeatBehavior="5x" 
                    BeginTime="0:0:2" 
                    x:Key="sbLeft" 
                    Storyboard.TargetProperty="(Canvas.Left)">
                    <StaticResourceExtension ResourceKey="aniX"/>
                </Storyboard>
                <Storyboard 
                    RepeatBehavior="5x" 
                    BeginTime="0:0:2" 
                    x:Key="sbOpacity" 
                    TargetProperty="Opacity">
                    <StaticResourceExtension ResourceKey="aniOpacity"/>
                </Storyboard>
            </Ellipse.Resources>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard Storyboard="{StaticResource sbLeft}"/>
                    <BeginStoryboard Storyboard="{StaticResource sbOpacity}"/>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>

        <Ellipse 
            Width="24" 
            Height="24" 
            Fill="PaleGoldenrod" 
            Stroke="Black" 
            StrokeThickness="1" 
            Canvas.Top="64" 
            Opacity=".1">
            <Ellipse.Resources>
                <Storyboard 
                    RepeatBehavior="5x" 
                    BeginTime="0:0:3" 
                    x:Key="sbLeft" 
                    Storyboard.TargetProperty="(Canvas.Left)">
                    <StaticResourceExtension ResourceKey="aniX"/>
                </Storyboard>
                <Storyboard 
                    RepeatBehavior="5x" 
                    BeginTime="0:0:3" 
                    x:Key="sbOpacity" 
                    TargetProperty="Opacity">
                    <StaticResourceExtension ResourceKey="aniOpacity"/>
                </Storyboard>
            </Ellipse.Resources>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard Storyboard="{StaticResource sbLeft}"/>
                    <BeginStoryboard Storyboard="{StaticResource sbOpacity}"/>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>

        <Ellipse 
            Width="24" 
            Height="24" 
            Fill="PaleTurquoise" 
            Stroke="Black" 
            StrokeThickness="1" 
            Canvas.Top="96" 
            Opacity=".1">
            <Ellipse.Resources>
                <Storyboard 
                    RepeatBehavior="5x" 
                    BeginTime="0:0:4" 
                    x:Key="sbLeft" 
                    Storyboard.TargetProperty="(Canvas.Left)">
                    <StaticResourceExtension ResourceKey="aniX"/>
                </Storyboard>
                <Storyboard 
                    RepeatBehavior="5x" 
                    BeginTime="0:0:4" 
                    x:Key="sbOpacity" 
                    TargetProperty="Opacity">
                    <StaticResourceExtension ResourceKey="aniOpacity"/>
                </Storyboard>
            </Ellipse.Resources>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard Storyboard="{StaticResource sbLeft}"/>
                    <BeginStoryboard Storyboard="{StaticResource sbOpacity}"/>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
    </Canvas>
</Window>

Posted at 3:11 PM by Philly XAML | Category: Animation; Tips & Tricks | Permalink | Comments (0)

Comments

There are no comments yet for this post.