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

时间:2015-03-18 15:21:00

标签: windows-runtime windows-phone storyboard windows-phone-8.1 scaletransform

我在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 ,但不符合我的期望。

对此的任何解决方案都将非常感激。

1 个答案:

答案 0 :(得分:1)

我会在RectangleGeometry上放置Clip Line区域,将Transform应用于几何体,将变换上的旋转设置为与线方向对应,几何体上的Rect对应于线条长度/粗细,并将Transform的比例从0设置为1。

你应该得到一条在绘图和平滑动画时不会移动的线。