XAML中的简单翻书动画

Question

我有10个XAML文件，每个文件都包含动画的一个帧（它们是从SWF转换而来的，因此没有每个对象的关键帧信息）。每个XAML文件都包含一个Canvas和每个帧的各种形状。

我想创建1个XAML文件，其中包含每个帧的Canvas信息，然后使用XAML在适当的时间显示每个Canvas，以便每个帧按顺序显示。这样做好吗？我该怎么做？我在Blend中尝试过，但似乎不可能，因为我的对象在每个帧上都是不同的（即我不会动画化对象属性）。

我只寻找声明性解决方案。

- Mister Cook

Answer 1

你可以尝试以下方法：

<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>

然后制作一个故事板，切换每个画布的可见性，使其看起来像一帧一帧的动画。

我在一个项目中遇到了类似的问题，我制作了一个自定义控件，其中有一个（int）Frame依赖属性，负责从模板中隐藏/显示元素。您也可以对Frame属性进行动画处理。

- Vicro

Answer 2

回复Darkoleptiko的留言，我使用了他上面提到的方法，使用了这样一个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>

- Mister Cook