如何划出一道弧线在WinRT的动画？(How to draw an arc in winRT wit

我是一个新手的WinRT和Blend，我需要绘制数字1，2等在我的WinRT应用拉动效应。要求是一样的应用程序将被绘制数字。

任何帮助将非常感激。

提前致谢。

Answer 1:

我认为你需要拼凑了几个故事板来实现这一点，我真的建议你使用掺和的！

打开一个空白的项目，在对象和时间线有一个加号，点击它，并添加一个新的故事板。将故事板线几毫秒前的黄条。绘制一张动画，点击开始记录和移动那块一点点。停止录制。继续这样做，一块一块，直到你有你想要的东西。 AS用于模拟图。打破你如何你希望它是，使所有独立的部分数字将包括和他们的不透明度设置为O.我会建议使用两个关键帧（用于移动）和不透明度双动画。

以下是一段路的下面曲线的快速演示，我发这个真快所以它远离完美的，但它是证明的启动和停止，以及他们如何一起来看一下：

<Page
x:Class="App10.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" FontFamily="Global User Interface">
<Page.Resources>
    <Storyboard x:Name="StoryboardA">
        <PointAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.StartPoint)" Storyboard.TargetName="path">
            <EasingPointKeyFrame KeyTime="0:0:0.3" Value="107.647,394.591"/>
            <EasingPointKeyFrame KeyTime="0:0:0.6" Value="147.75,352.713"/>
            <EasingPointKeyFrame KeyTime="0:0:0.9" Value="197.45,311.391"/>
            <EasingPointKeyFrame KeyTime="0:0:1.2" Value="268.45,251.392"/>
            <EasingPointKeyFrame KeyTime="0:0:1.4" Value="346.45,196.392"/>
            <EasingPointKeyFrame KeyTime="0:0:1.6" Value="417.45,151.392"/>
            <EasingPointKeyFrame KeyTime="0:0:1.8" Value="503.841,99.7321"/>
            <EasingPointKeyFrame KeyTime="0:0:2" Value="604.45,53.3924"/>
            <EasingPointKeyFrame KeyTime="0:0:2.3" Value="705.45,13.392"/>
        </PointAnimationUsingKeyFrames>
        <PointAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)" Storyboard.TargetName="path">
            <EasingPointKeyFrame KeyTime="0:0:0.3" Value="55.8129,445.539"/>
            <EasingPointKeyFrame KeyTime="0:0:0.6" Value="95.9156,403.661"/>
            <EasingPointKeyFrame KeyTime="0:0:0.9" Value="139.796,364.539"/>
            <EasingPointKeyFrame KeyTime="0:0:1.2" Value="198.646,311.319"/>
            <EasingPointKeyFrame KeyTime="0:0:1.4" Value="266.536,258.09"/>
            <EasingPointKeyFrame KeyTime="0:0:1.6" Value="330.282,210.352"/>
            <EasingPointKeyFrame KeyTime="0:0:1.8" Value="408.248,157.542"/>
            <EasingPointKeyFrame KeyTime="0:0:2" Value="500.776,106.108"/>
            <EasingPointKeyFrame KeyTime="0:0:2.3" Value="597.831,60.216"/>
        </PointAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Path Data="M73.5,639.5 C73.5,639.5 539.5,33.5 1289.5,79.5 L1535,101.5" HorizontalAlignment="Left" Height="572.492" Margin="68.5,72.008,-174,0" Stretch="Fill" Stroke="Red" StrokeThickness="10" UseLayoutRounding="False" VerticalAlignment="Top" Width="1471.5"/>
    <Path x:Name="path" HorizontalAlignment="Left" Height="507.972" Margin="66.05,137.358,0,0" Stroke="#FFFFE100" StrokeThickness="15" UseLayoutRounding="False" VerticalAlignment="Top" Width="712.95">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="53.45,448.392">
                    <LineSegment Point="7.50001,500.472"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Grid>

这里是它的样子，它是移动黄色的东西的图像 - 弯曲运动仅仅是一个例子，说明你可以拼凑创造任何你想要的运动。一些所谓的缓解作用，甚至可以为你做这个，见下图。

这里有宽松的可用功能，玩弄他们，结合在故事板的项目，以创建所需的效果。

不同的宽松政策功能以及这里解释对MSD ñ

有一个在上面的例子中没有双动画，但它们看起来是这样的：

 <Storyboard x:Name="myStoryboard">
                        <DoubleAnimation Duration="0:0:1"                                 
                            Storyboard.TargetName="myImage"             
                            Storyboard.TargetProperty="Opacity"            
                            From="0" To="1" />
                    </Storyboard>

这是一项艰巨的任务，并需要一定的时间。我建议你坐下来学习如何使用Blend和你这样做之前，故事板工作。当地有很多教程在那里，这将是值得的时间。我个人倾向于让设计师助阵动画，因为你可能会在故事板见上面，我不是在动画亲 - 有很多要记住，特别是关于应用程序的性能。

我也想指出一些背后的现代UI，为Windows应用商店应用程序所需的设计语言的主要思路，那就是真正的逗留数字。该应用程序不应该模仿现实生活中的事情，是没有意义的，因为它是一个应用程序，而不是“现实”。

从MSDN： 是真正的数字以数字媒介的充分利用。删除物理边界，以创建更有效，比现实毫不费力的经验。接受这个事实：我们是一个屏幕上的像素。以大胆，充满活力和明快的色彩和图像，超越现实世界的材料的界限设计。

视频值得关注： http://channel9.msdn.com/Events/Ch9Live/Channel-9-Live-at-Tech-Ed-Europe-2012/Panel-Modern-UI-Development

所以想想，也许你并不需要一个绘图运动。也许只是一个快速淡入，就像这样：

<Page
x:Class="App10.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" FontFamily="Global User Interface">
<Page.Resources>
    <Storyboard x:Name="StoryboardB">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Height="145" Margin="465,386,0,0" TextWrapping="Wrap" Text="AB" VerticalAlignment="Top" FontSize="50" Width="343"/>
</Grid>

Answer 2:

WinRT的XAML工具包具有RingSlice控制，你也可以使用和动画的由startAngle / EndAngle轻松动画弧变成一个圆。不过，请注意这两者和Iris'的解决方案需要上的动画这是一个安全设置EnableDependentAnimation告诉你，他们可能不表现非常好，因为它们需要的代码在UI线程中运行，并会造成布局重新计算这是慢，尤其是在复杂的场景。有一两件事，如果它原来慢（尤其是在诸如ARM那些慢的设备），我会尝试将具有相同的中心点，以覆盖更小的电弧和围绕中心点的RenderTransform动画旋转它们来获得同样的效果。这将是更复杂一点，但运行速度更快的机会。你会平衡在动画UI线程与叠加多重弧和策划他们的动画序列的成本。

Answer 3:

绘制弧形，将允许使用独立动画等将可能运行更顺畅另一种通用的解决方案是使用将被裁剪用两个重叠椭圆RectangleGeometry Clip和动画的Transform剪辑到逐渐显露出圆弧。需要两那些有开始和圆弧的一端在任意角度有他们的帽子（结束）。

这也将是一个简单的解决方案，快速地模拟任意的形状或元件，包括一个数字的图。

Answer 4:

如果你建立一个自定义的控制，需要动画它的依赖特性，我已经写了一篇博客文章，以帮助在http://danielgary.net/animating-custom-dependencyproperties/

它的要点是你线了当你的依赖项属性修改和更新您的布局代码里面有一个事件。