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

【问题标题】：How to create a floating animations in a canvas WP8如何在画布 WP8 中创建浮动动画
【发布时间】：2013-10-30 08:29:09
【问题描述】：

我想使用带有情节提要 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>

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

【问题讨论】：

标签： c# animation canvas windows-phone-8

【解决方案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();

上面的代码将使一个矩形从起点缓慢移动到 100 并返回到 0 等等，直到永远。

//更新 - 代码编辑

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

【讨论】：

感谢代码。这段代码可以工作，我也知道一点动画，但是我想做的浮动动画，我不知道如何实现。你能在那个代码中指导我吗？
我编辑了代码，我想，如果你从我的链接中阅读书籍，你就会知道如何做你需要的。

【解决方案2】：

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

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

【讨论】：