Jaa

How to Animate a Drawing Line

  • Artikkeli

In Blend you use the Pen tool to draw lines and they appear in the XAML as <Path> elements. But after you’ve drawn your lines and you test your application, the Paths appear immediately: they don’t replay the gestures you used to create them. But sometimes that’s the effect you want, so how do you do that?
The manual way is only practical if you have very few points. First draw out a Path consisting of straight segments. Then create a new Storyboard, move the playhead forward a tenth of a second and, using the Direct Selection tool, move the last point to the same position as the second-to-last point. Move the playhead again and repeat, each time moving an increasing number of points back to the previous position. When all your points are at the same position as the very first point, move the playhead to time 0 and click the Record Keyframe button. Now reverse the Storyboard and you’re done.

Any more than a very small number of points and you’ll need an automatic way of generating the Storyboard. You can do that with the code in the assembly dll built from the PathScribbler project I’ve provided below:

folderfiles Download PathScribbler Project Files

PathScribbler works with WPF paths but you could easily port the code to work with Silverlight. After building the dll and referencing it in your project, the way you use it is you first draw your Path (which may contain curved segments but they will be straightened by the PathScribbler code) and then you create a new, empty Storyboard. Finally just call PathScribbler.Generate() and pass the name of the Storyboard into which the animations are to be generated along with some other optional parameters. Then you can trigger your Storyboard any way you wish.

The PathScribbler project is contained in an example project named PencilWriter attached to the post. For this project I made a TextBlock into a Path and I trigger my Storyboard when the main window is clicked. Build and run the project then click the window and wait a moment until the animation is generated and then begins. Hope you have fun with PathScribbler!

-Steve

Comments

  • Anonymous
    August 15, 2008
    PingBack from http://hoursfunnywallpaper.cn/?p=1652

  • Anonymous
    August 15, 2008
    In Blend you use the Pen tool to draw lines and they appear in the XAML as &lt;Path&gt; elements. But

  • Anonymous
    August 15, 2008
    In Blend you use the Pen tool to draw lines and they appear in the XAML as &lt;Path&gt; elements. But

  • Anonymous
    August 17, 2008
    Bill Reiss announced a SL Game contest, Matt Berseth with Custom DataGrid icons, Palard Julien provides

  • Anonymous
    August 17, 2008
    I love this app! I was just searching for a sample Silverlight application that could animate the pencil/handwriting action... This one works great! Hopefully I can make customizations and test my own creativity:) Thanks!

  • Anonymous
    August 21, 2008
    hi, i'm very new to silverlight and so i'm not sure how to use pathscribbler correctly. any examples with silverlight? http://www25.brinkster.com/rodchar/pathscb.htm

  • Anonymous
    August 21, 2008
    Hi rodchar. Feel free to re-use the source code - just paste the PathScribbler class source code right into your Silverlight project and make sure it builds (I might be using one or two WPF-isms in there that will need to be ported). If you build the PathScribbler project as posted you'll get a WPF dll. And referencing that from a Silverlight project won't work and that looks like the error you're getting. -Steve

  • Anonymous
    November 12, 2008
    Great post, really enjoyed the read!

  • Anonymous
    December 24, 2008
    Hi I would really like to look at this but the link seems to be dead. Can you please look into it or if possible forward me the source zip? Thank you. sparky00@gmail.com

  • Anonymous
    January 08, 2009
    Great Stuff I have tried to get this to work with GeometryGroup for a few days now with no success.   This will iterate through the Geometrys successfully but the implementation of this logic into your solution is not idiot prof, so i am out of luck.           Geometry geom = path.Data;           if (geom is GeometryGroup)            {                GeometryGroup g = geom as GeometryGroup;                foreach (object fig in g.Children.AsEnumerable())                {                    if (fig is StreamGeometry || fig is PathGeometry)                    {}                     .....                }} .... Any Ideas?? Sincerly Thanks Don jd-su@hotmail.com

  • Anonymous
    January 06, 2013
    can't find the folder, please upload it again or send it to me, thank you.