地产

Question

移动物体沿路径

下面的代码用的DoubleAnimation是

<Window x:Class="TestsForTrafficSimulator.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:TestsForTrafficSimulator" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="700" Width="1050"> 
    <Canvas x:Name="Main" Height="350 " Width="525"> 
     <Canvas.Resources> 
      <Storyboard x:Key="Weeeee" RepeatBehavior="Forever"> 
       <DoubleAnimationUsingPath Duration="0:0:3" Source="X" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="object_to_move" > 
        <DoubleAnimationUsingPath.PathGeometry> 
         <PathGeometry Figures="M0.83299852,-4.019 L0.83299852,0.6089829 L0.61794496,0.94214186 C-7.6701996,14.489389 -12.443,30.392629 -12.443001,47.403001 C-12.443,96.887715 27.948303,137.003 77.773499,137.003 C113.58536,137.003 144.52365,116.27938 159.09367,86.248303 L159.90265,84.471135 L380.931,84.471135 L380.931,86.871121 L160.63918,86.871121 L160.4838,87.217053 C145.62575,118.25356 114.07582,139.671 77.556,139.671 C26.745804,139.671 -14.444,98.212666 -14.444,47.071218 C-14.444,29.491346 -9.5768454,13.055669 -1.124851,-0.94513857 z"/> 
        </DoubleAnimationUsingPath.PathGeometry> 
       </DoubleAnimationUsingPath> 
       <DoubleAnimationUsingPath Duration="0:0:3" Source="Y" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" Storyboard.TargetName="object_to_move" > 
        <DoubleAnimationUsingPath.PathGeometry> 
         <PathGeometry Figures="M0.83299852,-4.019 L0.83299852,0.6089829 L0.61794496,0.94214186 C-7.6701996,14.489389 -12.443,30.392629 -12.443001,47.403001 C-12.443,96.887715 27.948303,137.003 77.773499,137.003 C113.58536,137.003 144.52365,116.27938 159.09367,86.248303 L159.90265,84.471135 L380.931,84.471135 L380.931,86.871121 L160.63918,86.871121 L160.4838,87.217053 C145.62575,118.25356 114.07582,139.671 77.556,139.671 C26.745804,139.671 -14.444,98.212666 -14.444,47.071218 C-14.444,29.491346 -9.5768454,13.055669 -1.124851,-0.94513857 z"/> 
        </DoubleAnimationUsingPath.PathGeometry> 
       </DoubleAnimationUsingPath> 
      </Storyboard> 
     </Canvas.Resources> 
     <Canvas.Triggers> 
      <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
       <BeginStoryboard Storyboard="{StaticResource Weeeee}"/> 
      </EventTrigger> 
     </Canvas.Triggers> 
     <!-- Trajectory --> 
     <Path Data="M16.276999,1 L16.276999,5.627983 16.061945,5.9611419 C7.7738004,19.508389 3.0009999,35.41163 3.000999,52.422002 3.0009999,101.90672 43.392303,142.022 93.217499,142.022 129.02936,142.022 159.96765,121.29839 174.53767,91.267304 L175.34665,89.490136 396.375,89.490136 396.375,91.890122 176.08318,91.890122 175.9278,92.236054 C161.06975,123.27256 129.51982,144.69 93,144.69 42.189804,144.69 1,103.23167 1,52.090218 1,34.510346 5.8671546,18.07467 14.319149,4.0738615 z" Fill="#7F000000" Height="145.69" Canvas.Left="360.056" Stretch="Fill" Stroke="Red" StrokeThickness="2" Canvas.Top="236.648" Width="397.375"/> 

     <Ellipse x:Name="object_to_move" Fill="LightBlue" Height="30" Stroke="Black" Width="30" Canvas.Left="355" Canvas.Top="223.667" RenderTransformOrigin="0.5,0.5"> 
      <Ellipse.RenderTransform> 
       <TransformGroup> 
        <TranslateTransform/> 
       </TransformGroup> 
      </Ellipse.RenderTransform> 
     </Ellipse> 

    </Canvas> 
</Window> 

帮助移动的物体沿路径不过，我正在寻找一个属性来移动物体沿此路径的选项。例如，带有Minimum=0和Maximum=100的滑块可调节对象的“行进距离”。这意味着在Slider为0的情况下，对象位于路径的开始位置，在100位置位于末尾。从50岁开始到结束的一半。

我相信这个问题有一个相对简单的解决方案，但似乎我在互联网上搜索错误的关键字。

编辑：

经过进一步搜索我很幸运，我找到PathGeometry.GetPointAtFractionLength Method (Double, Point, Point)可用于获取X和路径点的Y坐标。我用这个观点来翻译这个物体。

这是工作，现在，但我仍然有兴趣，如果有一个更好的解决方案

Answer 1

一个做了一些修改代码，我只是说得那么滑块将追踪椭圆的价值滑块。我没有包含连续动画。我会把它留给你来整合所有需要的逻辑。

的XAML：

<Canvas x:Name="Main" Height="350 " Width="525" Loaded="Main_OnLoaded"> 
<Canvas.Resources> 
    <Storyboard x:Key="Weeeee" RepeatBehavior="Forever" TargetName="object_to_move" Duration="0:0:3"> 
     <DoubleAnimationUsingPath Duration="0:0:3" Source="X" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" > 
      <DoubleAnimationUsingPath.PathGeometry> 
       <PathGeometry Figures="M0.83299852,-4.019 L0.83299852,0.6089829 L0.61794496,0.94214186 C-7.6701996,14.489389 -12.443,30.392629 -12.443001,47.403001 C-12.443,96.887715 27.948303,137.003 77.773499,137.003 C113.58536,137.003 144.52365,116.27938 159.09367,86.248303 L159.90265,84.471135 L380.931,84.471135 L380.931,86.871121 L160.63918,86.871121 L160.4838,87.217053 C145.62575,118.25356 114.07582,139.671 77.556,139.671 C26.745804,139.671 -14.444,98.212666 -14.444,47.071218 C-14.444,29.491346 -9.5768454,13.055669 -1.124851,-0.94513857 z"/> 
      </DoubleAnimationUsingPath.PathGeometry> 
     </DoubleAnimationUsingPath> 
     <DoubleAnimationUsingPath Duration="0:0:3" Source="Y" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" > 
      <DoubleAnimationUsingPath.PathGeometry> 
       <PathGeometry Figures="M0.83299852,-4.019 L0.83299852,0.6089829 L0.61794496,0.94214186 C-7.6701996,14.489389 -12.443,30.392629 -12.443001,47.403001 C-12.443,96.887715 27.948303,137.003 77.773499,137.003 C113.58536,137.003 144.52365,116.27938 159.09367,86.248303 L159.90265,84.471135 L380.931,84.471135 L380.931,86.871121 L160.63918,86.871121 L160.4838,87.217053 C145.62575,118.25356 114.07582,139.671 77.556,139.671 C26.745804,139.671 -14.444,98.212666 -14.444,47.071218 C-14.444,29.491346 -9.5768454,13.055669 -1.124851,-0.94513857 z"/> 
      </DoubleAnimationUsingPath.PathGeometry> 
     </DoubleAnimationUsingPath> 
    </Storyboard> 
</Canvas.Resources> 
<!-- Trajectory --> 
<Slider x:Name="TestSlider" Width="200" Interval="1" Minimum="0" Maximum="1" ValueChanged="TestSlider_OnValueChanged"></Slider> 
<TextBox Canvas.Top="40" Width="100" Text="{Binding Value, ElementName=TestSlider}"></TextBox> 
<Path Data="M16.276999,1 L16.276999,5.627983 16.061945,5.9611419 C7.7738004,19.508389 3.0009999,35.41163 3.000999,52.422002 3.0009999,101.90672 43.392303,142.022 93.217499,142.022 129.02936,142.022 159.96765,121.29839 174.53767,91.267304 L175.34665,89.490136 396.375,89.490136 396.375,91.890122 176.08318,91.890122 175.9278,92.236054 C161.06975,123.27256 129.51982,144.69 93,144.69 42.189804,144.69 1,103.23167 1,52.090218 1,34.510346 5.8671546,18.07467 14.319149,4.0738615 z" Fill="#7F000000" Height="145.69" Canvas.Left="360.056" Stretch="Fill" Stroke="Red" StrokeThickness="2" Canvas.Top="236.648" Width="397.375"/> 

<Ellipse x:Name="object_to_move" Fill="LightBlue" Height="30" Stroke="Black" Width="30" Canvas.Left="355" Canvas.Top="223.667" RenderTransformOrigin="0.5,0.5"> 
    <Ellipse.RenderTransform> 
     <TransformGroup> 
      <TranslateTransform/> 
     </TransformGroup> 
    </Ellipse.RenderTransform> 
</Ellipse> 

变化：

• 不得不持续时间添加到故事板。
• 添加的滑块将取值范围为0-1来表示百分比。
• 从XAML中移除开始动画并向Canvas添加事件处理程序。

代码背后：

private void TestSlider_OnValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) 
    { 
     Storyboard sb = Main.FindResource("Weeeee") as Storyboard; 
     var ratio = sb.Duration.TimeSpan.TotalMilliseconds/2 * TestSlider.Value; 
     sb.Seek(object_to_move, new TimeSpan(0,0,0,0,(int)ratio), TimeSeekOrigin.BeginTime); 
     sb.Pause(object_to_move);    
    } 

    private void Main_OnLoaded(object sender, RoutedEventArgs e) 
    { 
     Storyboard sb = Main.FindResource("Weeeee") as Storyboard; 
     sb.Begin(object_to_move, true); 
     sb.Stop(object_to_move); 
    } 

注：

• 的Begin方法需要，因为你需要真正的标志设置从代码中调用。这设置了isControllable标志。我阻止它，所以连续动画不能运行。
• 我计算滑块与整体持续时间的比值来确定位置。编辑这个，但你需要它。
• .Seek方法是将动画设置为给定TimeSpan的魔法发生的地方。
• 我Pause作为动画将启动Seek调用后。

这可以变得更有趣，但它应该为您提供所需的信息，以实现您正在寻找的东西。