windows-phone-7 - 如何在winRT中用动画绘制圆弧？

Question

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

任何帮助将不胜感激。

提前致谢。

Answer 1

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

打开一个空白项目，在对象和时间线下有一个加号，点击它并添加一个新的故事板。将情节提要线的黄色条向前移动几毫秒。画一段动画，点击开始录制，稍微移动一下。停止录制。继续一块一块地做，直到你得到你想要的。至于模仿绘画。分解你想要的样子，制作数字将包含的所有单独部分并将它们的不透明度设置为 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 N上有很好的解释

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

 <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

另一种绘制弧线的通用解决方案允许使用独立动画，因此可能运行得更平滑，这是使用两个重叠的椭圆，它们用 a 剪辑RectangleGeometry Clip并动画Transform剪辑的动画以逐渐显示弧线。您需要其中两个来使弧的起点和终点具有任意角度的帽（末端）。

快速模拟任意形状或元素（包括数字）的绘制也是一个简单的解决方案。

Answer 4

如果您构建一个自定义控件并需要为其依赖属性设置动画，我在http://danielgary.net/animating-custom-dependencyproperties/上写了一篇博客文章来提供帮助

它的要点是当您的 Dependency Property 更改并在那里更新您的布局代码时，您连接一个事件。