Question

我想使用带有storyboard API的C＃动画开发动画。动画的目的是我有一个画布。在这个画布中，我将根据一些特定的逻辑在运行时放置不同的图像。然而，与此同时，我并不希望这个画布保持沉闷无比的UI，所以我想做一些动画，只要游戏正在运行，它就会永远发挥作用。我能这样做吗？

<Canvas x:Name="GameCanvas" Height="480" Width="480" Background="white" VerticalAlignment="Top" Loaded="GameCanvas_Loaded" >
            <Canvas.Resources>
                <Storyboard x:Name="myStoryboard">
            </Canvas.Resources>
            <Image x:Name="PreviewImage" Height="480" Width="480" Opacity="1" RenderTransformOrigin="0.2,0.5" >
                <Image.RenderTransform>
                    <TransformGroup>
                        <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
                        <CompositeTransform x:Name="TransRotate" />
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </Canvas>

如果有，可以请任何人帮助我指导如何开始这样做。在画布里面，我想要放置一些将永远执行的动画。例如，我可以放置一些彩色按钮，这个按钮将浮动在画布上，从一个位置到另一个位置。

Answer 1

您应该阅读有关动画的内容，我建议http://www.microsoft.com/en-us/download/details.aspx?id=24519。如果你想动画一些东西：首先定义故事板，在对象的正确性上添加动画（双动画，使用关键帧的双动画，对象动画，颜色动画等）然后添加关键帧并在代码中运行动画或使用触发器。



<Rectangle Fill="Azure" Height="50" Width="50" Name="Rect1">
    <Rectangle.Resources>
        <Storyboard x:Key="Animation" >
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
                                    Storyboard.TargetProperty="X"
                                    RepeatBehavior="Forever"
                                    AutoReverse="True"        >

                <LinearDoubleKeyFrame KeyTime="0:0:02" Value="100" />
                <LinearDoubleKeyFrame KeyTime="0:0:02" Value="0"   />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform"
                                    Storyboard.TargetProperty="Y"
                                    RepeatBehavior="Forever"
                                            AutoReverse="True">

                <LinearDoubleKeyFrame KeyTime="0:0:01" Value="100" />
                <LinearDoubleKeyFrame KeyTime="0:0:01" Value="0"   />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Rectangle.Resources>
    <Rectangle.RenderTransform>
        <TranslateTransform x:Name="Transform"/>
    </Rectangle.RenderTransform>
</Rectangle>

//in code behind
(Rect1.Resources["Animation"] as Storyboard).Begin();

<Rectangle Fill="Azure" Height="50" Width="50" Name="Rect1"> <Rectangle.Resources> <Storyboard x:Key="Animation" > <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform" Storyboard.TargetProperty="X" RepeatBehavior="Forever" AutoReverse="True" > <LinearDoubleKeyFrame KeyTime="0:0:02" Value="100" /> <LinearDoubleKeyFrame KeyTime="0:0:02" Value="0" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Transform" Storyboard.TargetProperty="Y" RepeatBehavior="Forever" AutoReverse="True"> <LinearDoubleKeyFrame KeyTime="0:0:01" Value="100" /> <LinearDoubleKeyFrame KeyTime="0:0:01" Value="0" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </Rectangle.Resources> <Rectangle.RenderTransform> <TranslateTransform x:Name="Transform"/> </Rectangle.RenderTransform> </Rectangle> //in code behind (Rect1.Resources["Animation"] as Storyboard).Begin();

上面的代码会使一个矩形从起点缓慢移动到100并再回到0，等等都是永恒的。

//更新 - 代码编辑

所以，如果我理解得很好，你想要一些东西漂浮。只需设置Y和X的正确性，Y比X快，您可以使用样条框架或缓动框架，并自定义此动画。

Answer 2

如果您使用C ++ / CX代码进行开发，则可以通过这种方式运行动画。

Storyboard^ rect = safe_cast<Storyboard^>(Rect1->Resources->Lookup("Animation"));
rect->Begin();

如何在画布WP8中创建浮动动画

2 个答案: