C＃Windows 10应用程序 - 画线缓慢从X1，Y1到X2，Y2

Question

我正在努力解决这个问题，应该相当容易解决。我想简单地为画布上的一条线指定X1和Y1以及X2和Y2坐标，并在这些点之间画一条线，时间为1秒。

我的画布名称是cnvML，行的名称是L1。这需要在运行时完成，所以我宁愿使用C＃，但是如果我可以修改在XAML中创建的命名故事板，那很好。我假设我需要一个Storyboard，尽管我一直无法让它工作。 以下是我已经尝试了最后2天：

1. 冲刷谷歌的很多例子。通过更改动画的X和Y属性，我可以在画布上设置线条，矩形和椭圆的动画效果。我一直无法弄清楚如何改变线路本身的X2和Y2属性。我已经看到了一些旧的框架的例子，但一些方法的构造函数是不同的，并且不适用于Windows 10应用程序。

2. 我曾尝试在Blend中构建动画，但它只适用于在设计时建立的动画线。如果我没有指定动画的目标，它会给我一个错误。另外，在Blend中做它并不是真正以我想要的方式完成变换。如果我从时间0开始，以非常短的线条，然后在1秒，我将线条拉伸到所需的长度，它将改变线条的比例，从而改变路径对象的明显的笔划厚度。

我真的很感激，如果有人能告诉我如何做到这一点，甚至可能不使用故事板。我希望它全部用C＃。命名为cnvML的画布将在设计时存在，但这些画线将在运行时创建。

再一次，我想传递给方法X1，Y1，X2和Y2方法。然后线将被绘制并且在这两个点之间花费1秒钟。

谢谢， 大卫

Answer 1

免责声明：我不WPF，所以这是从其他地方发现的例子拼凑。

使用故事板，你可以动画X2和Y2性质是这样的：

<Storyboard> 
     <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="X2" From="10" To="100" Duration="0:0:1.0"/> 
     <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="Y2" From="10" To="100" Duration="0:0:1.0"/> 
    </Storyboard> 

你怎么踢的关闭是由你。我只是将它添加到按钮控件的Button.Click事件触发器中。

这样做是线性内插的跨越目标属性的时间等效，所以在这个例子在第二过程中的X1和Y1值将11和100之间平滑地变化。这将显示从其原点（在我的测试版本中为10,10）沿着朝向最终端点的线延伸的线的外观100,100。

下面是我测试的完整XAML。因为我不WPF我想到有可能是几件事情我可以做的更好:)

<Window x:Class="AnimTest.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:AnimTest" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
     <Canvas HorizontalAlignment="Left" Height="300" Margin="10,10,0,0" VerticalAlignment="Top" Width="426"> 
      <Line Name="line1" X1="10" Y1="10" X2="10" Y2="10" StrokeThickness="3" Stroke="Black"/> 
     </Canvas> 
     <Button Margin="441,279,10,10"> 
      OK 
      <Button.Triggers> 
       <EventTrigger RoutedEvent="Button.Click"> 
        <BeginStoryboard> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="X2" From="10" To="100" Duration="0:0:1.0"/> 
          <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="Y2" From="10" To="100" Duration="0:0:1.0"/> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
      </Button.Triggers> 
     </Button> 
    </Grid> 
</Window> 

---

我安装了通用的应用工具，并尝试了一下。事实证明，与WPF相比，他们改变了Universal Apps中的很多东西，包括在XAML中抛弃了路由事件的概念。这听起来像是一个让很多开发者烦恼的好方法，呵呵？

所以，现在不是能给出一个唯一的XAML的答案，对WPF的工作，这里有两部分XAML +代码答案通用（对W10，VS2015）：

首先XAML：

<Page 
    x:Class="UniversalApp1.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:UniversalApp1" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <Grid.Resources> 
      <Storyboard x:Name="btnClick_SB" > 
       <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="X2" From="10" To="400" Duration="0:0:1.0" EnableDependentAnimation="True"/> 
       <DoubleAnimation Storyboard.TargetName="line1" Storyboard.TargetProperty="Y2" From="10" To="400" Duration="0:0:1.0" EnableDependentAnimation="True"/> 
      </Storyboard> 
     </Grid.Resources> 
     <Canvas HorizontalAlignment="Left" Height="300" Margin="10,50,0,0" VerticalAlignment="Top" Width="426"> 
      <Line Name="line1" X1="10" Y1="10" X2="10" Y2="10" StrokeThickness="3" Stroke="Black"/> 
     </Canvas> 
     <Button Margin="441,279,10,10" Click="Button_Click">OK</Button> 
    </Grid> 
</Page> 

和代码（的相关部分）：

private void Button_Click(object sender, RoutedEventArgs e) 
    { 
     btnClick_SB.Stop(); 
     btnClick_SB.Begin(); 
    } 

的btnClick_SB.Stop()调用确保你不调用，而它已经在运行的情节串连图板，这是appare当然是一种会引发异常的禁止行为。