对路径进行动画处理，就像在画布上绘制的一样 [英] Animate a path like it's drawn on a canvas

问题描述

我是WPF的新手，请为正确的方向指导我.

我已经构建了一个WPF应用程序，其中包含路线图视图控件的所有功能. IE.可以使用鼠标，键盘和提供的控件来放大/缩小路线图，在所有方向上进行平移.我已将道路映射为使用Expression Blend绘制的路径.

目前，我正在寻找一种对选定道路进行动画处理的方法，就像它是用铅笔/钢笔/记号笔绘制的一样.这可能吗?到目前为止，我已经能够为路径的不透明度和颜色设置动画.我已经为这个功能进行了很多搜索，但是没有运气.可能是我没有搜索正确的术语.我希望你们中的某人能对此事有所启发.

提前致谢.很抱歉，如果我听起来很疯狂:)编程是我疯狂的方式:D

I''m a newbie in WPF and please, guide me in the right direction for this problem.

I have built a WPF application which contains all the functionality of that of a road map view control. I.e. the road map can be zoomed in/out, panned in all directions using mouse, keyboard and the controls provided. I have mapped the roads as paths drawn using Expression Blend.

Currently I am looking for a way to animate a selected road, as if it was drawn by a pencil/pen/marker. Is this possible? So far, I''ve been able to animate the opacity and color of the path. I''ve search a lot for this functionality with no luck. May be I do not search for the correct terms. I hope someone of you could shed some light on to this matter.

Thanks in advance. Am sorry, if I sound crazy :) Programming is my way of being crazy :D

推荐答案

动画的级别不同.我感觉到，您几乎已经耗尽了WPF中嵌入的，可以通过XAML使用的默认"动画功能的可能性，这就是为什么您会遇到该方法的表达能力问题的原因.也许您的动画需要更大的灵活性；这比将动画与情节提要等组合的功能集要复杂得多.

如果是这样，则需要将其下移一层并设计下层动画，以便几乎可以进行任何运动.首先，创建动画的数学模型，以数据模型的形式表示它.它可能是场景的物理"模型或其他东西(您已为其命名).

下一步，使用放置在画布上的元素，将场景渲染为画布上的静态图片.换句话说，根据数据模型确定所有对象的位置和转换.

下一步:进行渲染过程".数据模型更新后，所有对象都应根据新数据进行重定位/转换.这是关键:所有元素之间的关系可以根据需要复杂.将其设为单个无参数方法，将其称为"Step".

下一步:为这张照片添加时间.您可以使用计时器或单独的线程.我建议使用一个更易于实现且更可靠的线程.首先，您需要根据时间修改数据模型.这是一件非常重要的事情:使用线程，您将需要使用System.Threading.Thread.Sleep(frameDuration). 请勿基于 frameDuration ！计算时间.实际的线程计时器在某种程度上是随机的.相反，您需要使用实时".以System.DateTime.Now为例，还是更好地使用更准确的System.Diagnostics.Stopwatch， http://msdn .microsoft.com/en-us/library/system.diagnostics.stopwatch.aspx [
如果留给最后一步:如何进行场景更新.您无法从非UI线程调用与UI相关的任何操作.相反，您需要使用System.Windows.Threading.Dispatcher的方法Invoke或BeginInvoke.在这种情况下，您需要调用上文所述的方法Step.

在我过去的答案中，您将找到有关其工作原理的详细说明和代码示例:
Control.Invoke()与Control.BeginInvoke() [ ^ ]，
Treeview扫描仪和MD5的问题 [如何获取keydown事件在vb.net中的不同线程上操作 [启用禁用+多线程后控件事件不会触发 [ ^ ].

—SA

There are different levels of animation. I have a feeling that you mostly exhausted the possibilities of "default" animation features embedded in WPF and available via XAML, that''s why you face the problem of expressive power of the method. Maybe your animation need more flexibility; it is more complex then the set of combined features of animation with the storyboard, etc.

If so, you need to step one level lower and design lower-level animation which would allow for nearly any motion. First, create a mathematical model of animation, express it in the form of data model. It could be a model of "physics" of the scene or something else — you named it.

On a next step, develop a rendering of your scene as a static picture on your canvas using your elements placed on the canvas. In other words, make the positions of all the objects and the transformations depending on your data model.

Next step: make a "rendering procedure". When the data model is updated, all your objects should relocate/transform according to the new data. This is the key: relationships between all the elements can be as complex as you need. Make it a single parameterless method, let''s call it "Step".

Next step: add time to this picture. You can use a timer or a separate thread. I would advice to use a thread which is easier to implement and which is more reliable. First, you need to modify your data model depending on time. Here is a very important thing: with thread, you will need to use System.Threading.Thread.Sleep(frameDuration). Do not calculate time based on frameDuration! The actual thread timer would be somewhat random. Instead, you need to use "real" time. Take if from System.DateTime.Now or better use more accurate System.Diagnostics.Stopwatch, http://msdn.microsoft.com/en-us/library/system.diagnostics.stopwatch.aspx[^]. I did not try to compare performance yet, but as you need to make this time method as fast as possible, I suspect Stopwatch will also perform faster. Please do some experiments/testing by yourself and pick the best method of timing.

From the above step, you will get some thread which "animates" the data model depending on real time, but the points of real may be not precisely equidistant, which will work quite fine, you will see it. What''s more important, you need to have proper average frames per second (experiment with it by yourself) and model depending not on the number of frame, but on the "real" time; see the above paragraph.

If leaves for the last step: how to make the scene update. You cannot call anything related to UI from non-UI thread. Instead, you need to use the method Invoke or BeginInvoke of System.Windows.Threading.Dispatcher. In this case, you need to invoke your method Step I described above.

You will find detailed explanation of how it works and code samples in my past answers:
Control.Invoke() vs. Control.BeginInvoke()[^],
Problem with Treeview Scanner And MD5[^].

See also more references on threading:
How to get a keydown event to operate on a different thread in vb.net[^],
Control events not firing after enable disable + multithreading[^].

—SA

谢谢您的回答:)我现在实际上正在研究XAML解决方案.我不想再回到旧的Windows应用程序开发方法.我喜欢新的编程模型，并且希望使用现有资源或编写复杂的逻辑来开发解决方案.

我已经进行了深入研究，目前还没有解决方案.让我来研究它，如果我成功了，那就值得发表和分享，我一定会的.再次谢谢你.

Thank you for the answer :) I am actually working on a XAML solution right now. I prefer not to go back to the old Windows applications development method. I love the new programming model and I want to develop a solution using the resources available already or writing a complex logic.

I''ve researched intensely and there is no existing solution for this. Let me work on it and if I succeed, it''ll be worth posting and sharing, which I definitely will. Thank you again.

这篇关于对路径进行动画处理，就像在画布上绘制的一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！