Question

我创建了以下XAML

<Canvas Background="Gray" Margin="10">    
    <Ellipse x:Name="Node1" Width="20" Height="20" Fill="AliceBlue" Canvas.Left="38" Canvas.Top="136" />
    <Ellipse x:Name="Node2" Width="20" Height="20" Fill="AliceBlue" Canvas.Left="290" Canvas.Top="136" />
    <Ellipse x:Name="object" Width="10" Height="20" Fill="Black" Canvas.Left="43" Canvas.Top="125" />
    <Path Stroke="Black" StrokeThickness="1">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure StartPoint="50,145">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <LineSegment Point="100,100" />
                                    <LineSegment Point="250,100" />
                                    <LineSegment Point="300,145" />
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
</Canvas>

如您所见，我创建了2个椭圆节点。连接两个节点和位于节点1的对象的路径。我想在这里做的是在node1沿着朝向node2的路径设置对象的动画。

我正在尝试使用代码来制作动画，因为我希望动画在点击node2时发生。我一直在与DoubleAnimation，MatrixAnimation，故事板挣扎。很混乱。请分享您如何实现这一目标的知识。我希望相同的代码可以用于曲线和复杂路径。

Answer 1

您需要DoubleAnimationUsingPath (ref)：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication1.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">
    <Window.Resources>
        <Storyboard x:Key="Storyboard1">
            <DoubleAnimationUsingPath Duration="0:0:2" Source="X" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="object">
                <DoubleAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M2,10 L52,-35 L202,-35 L252,10"/>
                </DoubleAnimationUsingPath.PathGeometry>
            </DoubleAnimationUsingPath>
            <DoubleAnimationUsingPath Duration="0:0:2" Source="Y" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="object">
                <DoubleAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M2,10 L52,-35 L202,-35 L252,10"/>
                </DoubleAnimationUsingPath.PathGeometry>
            </DoubleAnimationUsingPath>
        </Storyboard>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <Canvas Background="Gray" Margin="10">    
    <Ellipse x:Name="Node1" Width="20" Height="20" Fill="AliceBlue" Canvas.Left="38" Canvas.Top="136" />
    <Ellipse x:Name="Node2" Width="20" Height="20" Fill="AliceBlue" Canvas.Left="290" Canvas.Top="136" />
    <Ellipse x:Name="object" Width="10" Height="20" Fill="Black" Canvas.Left="43" Canvas.Top="125" RenderTransformOrigin="0.5,0.5" MouseLeftButtonDown="object_MouseLeftButtonDown" >
        <Ellipse.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Ellipse.RenderTransform>
    </Ellipse>
    <Path Stroke="Black" StrokeThickness="1">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure StartPoint="50,145">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <LineSegment Point="100,100" />
                                    <LineSegment Point="250,100" />
                                    <LineSegment Point="300,145" />
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
</Canvas>
</Grid>
</Window>

然后从代码调用：

private void object_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    Storyboard animation = this.TryFindResource("Storyboard1") as Storyboard;
    animation.Begin();
}

[编辑] 我认为你错过了关键工具：Blend。至于在代码中创建动画，如果你看一下XAML元素，可以把它们想象成序列化的类，这些类可以反映在代码中，即。

    Storyboard sb = new Storyboard();
    DoubleAnimationUsingPath ani_2 = new DoubleAnimationUsingPath();
    ani_2.Duration = new Duration(new TimeSpan(0, 0, 2));

    PathGeometry pg = new PathGeometry();
    pg.Figures.Add(new PathFigure());

    ani_2.PathGeometry.AddGeometry(pg);

等。然而，（IMAO）从代码中直接创建它们相当痛苦。这一切都取决于应用程序。看看here是Blend的起点。

WPF路径动画

1 个答案: