使用故事板动画画线 windows phone

Question

我在 windows phone runtime app.

中有一行

<Line x:Name="Line1" Height="178" Width="166" Stretch="Fill" StrokeDashArray="4,4" StrokeThickness="1" Stroke="Black" X1="100" Y1="150" X2="105" Y2="108" RenderTransformOrigin="0.5,0.5">

我想为这条线设置动画，使其 长度将从 (X1,Y1) 开始增加 并增加到 (X2,Y2),要有画线效果.

PS：我使用的是行而不是路径。

这是我所做的：

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Line1" Storyboard.TargetProperty="X2" EnableDependentAnimation="True">
                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="101" />
                            <EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="102" />
                            <EasingDoubleKeyFrame KeyTime="0:0:4" Value="103" />
                            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="104" />
                            <EasingDoubleKeyFrame KeyTime="0:0:8" Value="105" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Line1" Storyboard.TargetProperty="Y2" EnableDependentAnimation="True">
                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="120" />
                            <EasingDoubleKeyFrame KeyTime="0:0:4" Value="110" />
                            <EasingDoubleKeyFrame KeyTime="0:1:0" Value="108" />
                        </DoubleAnimationUsingKeyFrames>

也尝试过 ScaleTransform 但不符合我的期望。

任何对此的解决方案将不胜感激。

Answer 1

我会在 Line 上放置一个 RectangleGeometry Clip 区域，将 Transform 应用于几何体，将变换的旋转设置为对应于直线方向，几何上的 Rect 对应于线 length/thickness 并使 Transform 的比例从 0 到 1 动画化。

应该会为您提供一条在绘制时不会移动的线条和流畅的动画。

使用故事板动画画线 windows phone

Draw line using storyboard animation windows phone

storyboard

scaletransform

windows-phone

windows-runtime

windows-phone-8.1