如何用动画在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> 

这里是它看起来的样子，图像的该移动黄色的东西 - 弯曲运动仅仅是一个例子，说明你可以拼凑创造任何你想要的运动。称为缓动功能的东西甚至可以为你做到这一点，见下图。

这里有缓动功能，可以随身携带，结合故事板中的项目创建所需的效果。

The different easing functions are well explained here on MSDň

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

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

这是一项艰巨的任务，并需要一定的时间。我会建议你坐下来学习如何使用Blend并在故事板上工作。这里有很多很棒的教程，这将是值得的。就我个人而言，我倾向于让设计师帮助制作动画，就像您在上面的故事板中看到的一样，我不是动画专业人员 - 需要记住很多事情，特别是应用程序性能方面。

我还想指出Modern UI的一些主要思想，这是Windows Store应用程序所需的设计语言，也就是保持真正的数字化。该应用程序不应该模仿真实生活中的事物，没有意义，因为它是一个应用程序，而不是“现实”。

从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 Toolkit有RingSlice控制，你也可以使用和动画的由startAngle/EndAngle轻松动画弧变成一个圆。但请注意，这和Iris的解决方案都需要在动画中设置EnableDependentAnimation，这是一种保护措施，告诉您它们可能不会很好地执行，因为它们需要在UI线程上运行代码，并且会导致布局重新计算速度慢，尤其是在复杂的场景中。有一件事我会尝试，如果它变慢（特别是在像ARM这样的慢速设备上）将会覆盖具有相同中心点的较小圆弧，并使用围绕该中心点的RenderTransform动画旋转它们以获得相同的效果。这会稍微复杂一些，但是运行速度更快。您会平衡UI线程上的动画成本与叠加多个弧线并协调其动画序列的成本。

Answer 3

用于绘制圆弧，将允许使用一个独立的动画等将可能运行顺畅将是使用该被剪切与RectangleGeometryClip 2个重叠椭圆和动画Transform剪辑的揭示弧的另一种一般的解决方案逐渐。您需要其中的两个才能使弧的起点和终点的顶点（顶点）处于任意角度。

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

Answer 4

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

它的要点是连线为你当依赖项属性的事件在那里更改和更新您的布局代码。