Question

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

我的画布名称是cnvML，行的名称是L1。这需要在运行时完成，所以我更喜欢使用C＃，但是如果我可以修改在XAML中创建的命名故事板，那很好。我假设我需要一个故事板，虽然我无法让它工作。这是我过去两天尝试过的事情：

搜索谷歌的很多例子。通过更改动画的X和Y属性，我可以在画布上设置线条，矩形和椭圆的动画。我无法弄清楚如何转换线本身的X2和Y2属性。我已经看到了旧框架的一些示例，但某些方法的构造函数不同，不适用于Windows 10应用程序。
我尝试在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之间平滑变化1}}和10,10。这将使线条的外观从其原点（在我的测试版本中为100,100）沿着线延伸到<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>处的最终端点。

这是我测试的完整XAML。由于我不是WPF，我希望可能有几件事情我可以做得更好：）

<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>

我安装了Universal App工具并试用了它。事实证明，与WPF相比，他们在Universal Apps中改变了很多东西，包括在XAML中删除路由事件的概念。这听起来像是惹恼广大开发者的好方法，呵呵？

所以现在不是能够提供仅适用于WPF的XAML答案，而是针对Universal的两部分XAML + Code答案（在W10，VS2015上）：

首先是XAML：

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

代码的（相关部分）：

btnClick_SB.Stop()

adapter = @store.adapterFor('application') url = adapter.buildURL(type, id)调用确保您在故事板已经运行时不会调用它，这显然是一个禁止的操作，会引发异常。

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

1 个答案: