WPF：沿路径动画的几何 [英] WPF: Animating along path geometry

查看：336
本文介绍了WPF：沿路径动画的几何的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我现在处理了以下问题了一个星期。请多多包涵我解释。

I am dealing with the following issue for a week now. Please, bear with me as I explain.

我试图才达到，对于某些人来说，pretty简单，但作为新的WPF使事情变得很难。

What I am trying to achive is, for some of us, pretty simple, but being new to WPF makes things hard.

在这里输入的形象描述

以上是通过转换（已有） SVG 到 XAML ，之后将其导入到Visual Studio渲染图像。这是XAML的样子。

The image above was rendered by converting (already had) svg to xaml and afterwards importing it to Visual Studio. This is what the xaml looks like. 

    <Canvas x:Name="Main" Margin="158,-223,-148,233">
        <Canvas.RenderTransform>
            <MatrixTransform Matrix="1.25 0 0 -1.25 -197.1231 961.58875"/>
        </Canvas.RenderTransform>
        <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139746" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6">
            <Path.Data>
                <PathGeometry Figures="m 66.611178 552.33853 c -4.36996 0.6305 -8.8334 0.97293 -13.3752 0.97293 -18.11465 0 -35.027 -5.21161 -49.34949 -14.18974 l 21.64732 -36.67733 c 8.2963 5.25686 18.12667 8.31294 28.67512 8.31294 2.7121 0 5.37755 -0.20365 7.98106 -0.59283 l 2.23539 -0.38916 c 4.72288 -0.91109 9.2226 -2.43913 13.41755 -4.49964 l 35.933612 77.65818 c -12.53504 5.94167 -26.095762 10.06571 -40.347392 12.0342 0 0 -2.27764 -21.55688 -4.54327 -42.98252 l -2.2747 0.35297 z" FillRule="nonzero"/>
            </Path.Data>
        </Path>
        <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#FFD3BC5F" Canvas.Left="401" Canvas.Top="-173" >
            <Path.Data>
                <PathGeometry x:Name="path139750" Figures="m -21.311892 515.98804 c -11.7053 -15.57594 -18.6547 -34.92004 -18.6622 -55.85694 l 35.53987 0 5.06525 -0.024 c 0.63507 11.4535 4.86922 21.94 11.58023 30.3706 l 1.44647 1.7423 c 2.94008 3.3894 6.29329 6.4077 9.98888 8.9736 l -43.53754 73.76488 c -13.18956 -8.30539 -24.88746 -18.76176 -34.60186 -30.87743 0 0 17.3968 -13.23944 34.61076 -26.3386 l -1.42986 -1.75428 z" FillRule="nonzero"/>
            </Path.Data>
        </Path>
        <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139780" Fill="#FFD3BC5F" Canvas.Left="401.4" Canvas.Top="-167.6">
            <Path.Data>
                <PathGeometry Figures="m 214.75854 460.1016 94.92962 0 0 69.86866 -94.92962 0 0 -69.86866 z" FillRule="nonzero"/>
            </Path.Data>
        </Path>
        <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139784" Fill="#FFD3BC5F" Canvas.Left="401.4" Canvas.Top="-167.6">
            <Path.Data>
                <PathGeometry Figures="m 211.64803 529.825 -36.87191 0 -62.32503 -69.72236 100.95576 0 0 69.74499 -1.75882 -0.0226 z" FillRule="nonzero"/>
            </Path.Data>
        </Path>
        <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Fill="#FFD3BC5F" Canvas.Top="-173" Canvas.Left="401">
            <Path.Data>
                <PathGeometry x:Name="path139798" Figures="m -41.482092 460.131 -43.5377 0 c 0.6744 30.93022 11.4414 59.36853 29.1278 82.17137 l 33.3799 -25.40184 c -11.9001 -15.82789 -18.9641 -35.4887 -18.97 -56.76953" FillRule="nonzero"/>
            </Path.Data>
        </Path>
        <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139802" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6">
            <Path.Data>
                <PathGeometry Figures="m 139.82292 494.54117 c -13.01467 -14.5593 -25.97803 -29.06131 -30.40076 -34.00892 0 0 -2.72123 28.49563 -29.566602 43.70507 l 17.54746 37.92328 c 19.158502 -10.35383 34.278952 -27.22704 42.419902 -47.61943" FillRule="nonzero"/>
            </Path.Data>
        </Path>
        <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139806" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6">
            <Path.Data>
                <PathGeometry Figures="m 98.037008 543.53024 17.776782 38.41802 c 23.1211 -11.42479 42.62202 -29.06882 56.29587 -50.76297 l 0.18403 -0.31676 c 0 0 -15.53072 -17.37553 -31.34655 -35.06934 -8.34762 20.43762 -23.62341 37.33197 -42.910132 47.73105" FillRule="nonzero"/>
            </Path.Data>
        </Path>
        <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139810" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6">
            <Path.Data>
                <PathGeometry Figures="m 53.235488 554.82033 c -18.39362 0 -35.56859 -5.28853 -50.11595 -14.3994 l -21.08756 35.73002 c 21.04842 12.78086 45.75185 20.14348 72.17809 20.14348 5.74697 0 11.40815 -0.36201 16.97265 -1.03931 l -4.37747 -41.4213 c -4.43321 0.63805 -8.96144 0.98651 -13.56976 0.98651" FillRule="nonzero"/>
            </Path.Data>
        </Path>

 <Rectangle Name="object_to_move" Fill="LightBlue" Height="36" Stroke="Black" Width="41" Canvas.Left="330" Canvas.Top="229"/>

我要的是动画/沿着路径移动的方块（矩形），使得它（箱子）看起来像旅行和使用它（路径）的道路继续前进。

I want is to animate/move the box (Rectangle) along the path, making it (the box) look like traveling and using it (the path) as a road to move on.

我已经尝试使用。但我很困惑，我想我没有使用正确的事情。

I have tried using DoubleAnimationUsingPath. But I am very confused, and I think I am not using things properly.

我发现以下code snippt并试图操纵它，并把它应用到我的榜样，但不能得到它的工作。

I have found the following code snippt and tried to manipulate it and apply it to my example, but couldn't get it work. 

 //  path139798.Freeze(); // For performance benefits. 
        DoubleAnimationUsingPath daPath = new DoubleAnimationUsingPath();
        daPath.Duration = TimeSpan.FromSeconds(5);
        daPath.RepeatBehavior = RepeatBehavior.Forever;
        daPath.AccelerationRatio = 0.6;
        daPath.DecelerationRatio = 0.4;
        daPath.AutoReverse = true;
        daPath.PathGeometry = path139798;
        daPath.Source = PathAnimationSource.X;
        circle2.BeginAnimation(Canvas.LeftProperty, daPath);


        daPath = new DoubleAnimationUsingPath();
        daPath.Duration = TimeSpan.FromSeconds(5);
        daPath.RepeatBehavior = RepeatBehavior.Forever;
        daPath.AccelerationRatio = 0.6;
        daPath.DecelerationRatio = 0.4;
        daPath.AutoReverse = true;
        daPath.PathGeometry = path139798;
        daPath.Source = PathAnimationSource.Y;
        circle2.BeginAnimation(Canvas.TopProperty, daPath);
    }

可能有人帮助。谢谢！

Could someone help. Thanks!

推荐答案

所以，你有你的例子很多奇怪的利润率和东西。我没惹太多。我只是增加了一个运动路径，并注意故事板，但在这里你去。

So you have a lot of strange margins and stuff on your example. I didn't mess with it too much. I just added a motion path and notice the Storyboard but here you go.

小提示：混合（自带视觉工作室），使这些类型的效果真的很方便快捷。对于这个例子，我刚才提出的形状路径，以配合您的模拟图像。然后，它就像选择它，然后容易<$ C C>右键 - ＆GT;路径 - ＆GT;让运动路径，它就会提示您选择要遵循的路径的对象。花更多的时间来加载混合，然后它确实使例子。

Quick Tip: Blend (comes with visual studio) makes these sort of effects really quick and easy. For this example I just made the shape path to match your mock image. Then it's as easy as selecting it then right-click -> Path -> Make Motion Path and it will prompt you to select the object to follow the path. Took more time to load Blend then it did to make the example.

希望这有助于欢呼声。

<Canvas x:Name="Main" Height="1025 " Width="1025">
            <Canvas.Resources>
                <Storyboard x:Key="Weeeee" RepeatBehavior="Forever">
                    <DoubleAnimationUsingPath Duration="0:0:3" Source="X" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(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)[3].(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>
            <Canvas.RenderTransform>
                <MatrixTransform Matrix="1.25 0 0 -1.25 -197.1231 961.58875"/>
            </Canvas.RenderTransform>
            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139746" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6">
                <Path.Data>
                    <PathGeometry Figures="m 66.611178 552.33853 c -4.36996 0.6305 -8.8334 0.97293 -13.3752 0.97293 -18.11465 0 -35.027 -5.21161 -49.34949 -14.18974 l 21.64732 -36.67733 c 8.2963 5.25686 18.12667 8.31294 28.67512 8.31294 2.7121 0 5.37755 -0.20365 7.98106 -0.59283 l 2.23539 -0.38916 c 4.72288 -0.91109 9.2226 -2.43913 13.41755 -4.49964 l 35.933612 77.65818 c -12.53504 5.94167 -26.095762 10.06571 -40.347392 12.0342 0 0 -2.27764 -21.55688 -4.54327 -42.98252 l -2.2747 0.35297 z" FillRule="nonzero"/>
                </Path.Data>
            </Path>
            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#FFD3BC5F" Canvas.Left="401" Canvas.Top="-173" >
                <Path.Data>
                    <PathGeometry x:Name="path139750" Figures="m -21.311892 515.98804 c -11.7053 -15.57594 -18.6547 -34.92004 -18.6622 -55.85694 l 35.53987 0 5.06525 -0.024 c 0.63507 11.4535 4.86922 21.94 11.58023 30.3706 l 1.44647 1.7423 c 2.94008 3.3894 6.29329 6.4077 9.98888 8.9736 l -43.53754 73.76488 c -13.18956 -8.30539 -24.88746 -18.76176 -34.60186 -30.87743 0 0 17.3968 -13.23944 34.61076 -26.3386 l -1.42986 -1.75428 z" FillRule="nonzero"/>
                </Path.Data>
            </Path>
            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139780" Fill="#FFD3BC5F" Canvas.Left="401.4" Canvas.Top="-167.6">
                <Path.Data>
                    <PathGeometry Figures="m 214.75854 460.1016 94.92962 0 0 69.86866 -94.92962 0 0 -69.86866 z" FillRule="nonzero"/>
                </Path.Data>
            </Path>
            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139784" Fill="#FFD3BC5F" Canvas.Left="401.4" Canvas.Top="-167.6">
                <Path.Data>
                    <PathGeometry Figures="m 211.64803 529.825 -36.87191 0 -62.32503 -69.72236 100.95576 0 0 69.74499 -1.75882 -0.0226 z" FillRule="nonzero"/>
                </Path.Data>
            </Path>
            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Fill="#FFD3BC5F" Canvas.Top="-173" Canvas.Left="401">
                <Path.Data>
                    <PathGeometry x:Name="path139798" Figures="m -41.482092 460.131 -43.5377 0 c 0.6744 30.93022 11.4414 59.36853 29.1278 82.17137 l 33.3799 -25.40184 c -11.9001 -15.82789 -18.9641 -35.4887 -18.97 -56.76953" FillRule="nonzero"/>
                </Path.Data>
            </Path>
            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139802" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6">
                <Path.Data>
                    <PathGeometry Figures="m 139.82292 494.54117 c -13.01467 -14.5593 -25.97803 -29.06131 -30.40076 -34.00892 0 0 -2.72123 28.49563 -29.566602 43.70507 l 17.54746 37.92328 c 19.158502 -10.35383 34.278952 -27.22704 42.419902 -47.61943" FillRule="nonzero"/>
                </Path.Data>
            </Path>
            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139806" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6">
                <Path.Data>
                    <PathGeometry Figures="m 98.037008 543.53024 17.776782 38.41802 c 23.1211 -11.42479 42.62202 -29.06882 56.29587 -50.76297 l 0.18403 -0.31676 c 0 0 -15.53072 -17.37553 -31.34655 -35.06934 -8.34762 20.43762 -23.62341 37.33197 -42.910132 47.73105" FillRule="nonzero"/>
                </Path.Data>
            </Path>
            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139810" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6">
                <Path.Data>
                    <PathGeometry Figures="m 53.235488 554.82033 c -18.39362 0 -35.56859 -5.28853 -50.11595 -14.3994 l -21.08756 35.73002 c 21.04842 12.78086 45.75185 20.14348 72.17809 20.14348 5.74697 0 11.40815 -0.36201 16.97265 -1.03931 l -4.37747 -41.4213 c -4.43321 0.63805 -8.96144 0.98651 -13.56976 0.98651" FillRule="nonzero"/>
                </Path.Data>
            </Path>

            <!-- 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"/>

            <!-- Because I like to move it, move it ~~ -->
            <Rectangle x:Name="object_to_move" Fill="LightBlue" Height="36" Stroke="Black" Width="41" Canvas.Left="355" Canvas.Top="223.667" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>

        </Canvas>

...和一个蹩脚的品质的GIF想象它的其他观众。

...and a crappy quality GIF to visualize it for other viewers.

在这里输入的形象描述

这篇关于WPF：沿路径动画的几何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆