Simple Flipbook animation in XAML

Question

I have 10 XAML files, each contaning a frame of an animation (they were converted from SWF so there is no key frame information for each object). Each XAML file contains a Canvas with the various shapes for each frame.

I would like to create 1 XAML file which contains the Canvas information for each frame and then use XAML to display each Canvas at the appropriate time, so each frame is dispalyed one after the other. Is this a good way to go? How can I do this? I tried in Blend but it does not seem possible as my objects are different on each frame (i.e. I'm not animating object properties).

I am looking for a declarative solution only.

Answer 1

You can try the following:

<Grid x:Name="FrameContainer">
   <Canvas x:Name="Canvas1" Visibility="Collapsed"><!-- shapes --></Canvas>
   <Canvas x:Name="Canvas2" Visibility="Collapsed"><!-- shapes --></Canvas>
   <Canvas x:Name="Canvas3" Visibility="Collapsed"><!-- shapes --></Canvas>
   <Canvas x:Name="Canvas4" Visibility="Collapsed"><!-- shapes --></Canvas>
   <Canvas x:Name="Canvas5" Visibility="Collapsed"><!-- shapes --></Canvas>
   <Canvas x:Name="Canvas6" Visibility="Collapsed"><!-- shapes --></Canvas>
   ...
</Grid>

Then Make a storyboard that toggles the visibility of each Canvas to make it look like a frame by frame animation.

I had a similar problem in a project, and I made a Custom Control that has a (int)Frame dependency property that is in charge of doing the hiding/showing of elements from the template. You can animate the Frame property also.

Answer 2

Further to Darkoleptiko's message, I used his approach above with a Storyboard like this:

<Window.Resources>
    <Storyboard x:Key="Storyboard1">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Canvas1">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Canvas2">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Canvas3">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Visible}"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{x:Static Visibility.Collapsed}"/>
        </ObjectAnimationUsingKeyFrames>

    </Storyboard>
</Window.Resources>