如何在UWP中为线条设置动画

时间:2017-07-19 07:22:31

标签: c# xaml uwp uwp-xaml

我试图在UWP中设置动画线。但无法实现它。

我使用以下WPF代码

实现了相同的目标
<Line X1="10" X2="10" Y1="10" Y2="10" Stroke="Black" StrokeThickness="3" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="100,100,0,0">    
         <Line.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="X2" To="100" Duration="0:0:2"/>
                        <DoubleAnimation Storyboard.TargetProperty="Y2" To="100" Duration="0:0:2"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Line.Triggers>
    </Line>

任何人都可以告诉我上面的UWP中的等效代码。

先谢谢。

1 个答案:

答案 0 :(得分:4)

试试这个

<Line x:Name="MyLine"
      X1="10"
      X2="10"
      Y1="10"
      Y2="10"
      Stroke="Black"
      StrokeThickness="3"
      HorizontalAlignment="Left"
      VerticalAlignment="Stretch"
      Margin="100,100,0,0">
    <Line.Triggers>
        <EventTrigger>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="MyLine"
                                     Storyboard.TargetProperty="X2"
                                     EnableDependentAnimation="True"
                                     To="100"
                                     Duration="0:0:2" />
                    <DoubleAnimation Storyboard.TargetName="MyLine"
                                     Storyboard.TargetProperty="Y2"
                                     EnableDependentAnimation="True"
                                     To="100"
                                     Duration="0:0:2" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Line.Triggers>
</Line>

我已命名您的Line,设置TargetName并启用EnableDependentAnimation。您还必须删除RoutedEvent="Loaded",但动画将自动启动。