Geek Answers Handbook

Simple Flipbook Animation in XAML

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

I would like to create 1 XAML file that contains canvas information for each frame, and then use XAML to display each Canvas at the appropriate time, so that each frame will be displayed one by one. Is this a good way to go? How can i do this? I tried in Blend, but this is not possible, since my objects are different for each frame (i.e. I am not animating the properties of an object).

I am only looking for a declarative solution.

+5
source share
2 answers

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 create a storyboard that switches the visibility of each canvas so that it looks like a frame-by-frame animation.

I had a similar problem in the project, and I created a user control that has a dependency property (int) Frame, which is responsible for hiding / displaying elements from the template. You can also animate the Frame property.

+3
source

In addition to the Darkoleptiko post, I used my approach above using a storyboard:

<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>
+1
source

More articles:


All Articles