如何在winRT中用动画绘制圆弧？

我是 WinRT 和 Blend 的新手，我需要在 WinRT 应用程序中使用绘图效果绘制数字 1、2 等。要求就像应用程序将绘制数字。

任何帮助将非常感激。

提前致谢。

我认为您需要拼凑几个故事板才能实现这一目标，我真的建议您使用 Blend 来实现这一点！

打开一个空白项目，在对象和时间线下有一个加号，单击它并添加一个新的故事板。将故事板行的黄色条向前移动几毫秒。绘制动画的一部分，单击开始录制并将该部分移动一点。停止录音。继续一点一点地做，直到得到你想要的。 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>

Here is an image of how it looks like, its the yellow thing that moves - the curved movement is just an example to show you can piece together to create any movement you want. Something called easing function can even do this for you, see image below.

Here are easing functions available, play around with them, in combination with the items in the storyboard to create the desired effect.

MSD 上对不同的缓动函数进行了很好的解释N

上面的例子中没有双重动画，但它们看起来像这样：

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

这是一项艰巨的工作，需要时间。我建议您在执行此操作之前先坐下来学习如何使用 Blend 并使用故事板。有很多很棒的教程，值得花时间。就我个人而言，我倾向于让设计师帮助制作动画，正如您在上面的故事板中看到的那样，我不是动画专家 - 有很多事情需要记住，特别是在应用程序性能方面。

我还想指出 Modern 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>