使用故事板动画窗口手机绘制线条

Question

我在windows phone运行时应用程序中有一行代码。

<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设置为与线长/厚度相对应，并将Transform的比例从0设置为1。

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