Welcome to TalkGraphics.com
Page 1 of 3 123 LastLast
Results 1 to 10 of 25
  1. #1

    Question Animate line drawing?

    Is there a convenient way to animate the drawing of a line?

    Click image for larger version. 

Name:	scribble.jpg 
Views:	339 
Size:	14.0 KB 
ID:	104612

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Animate line drawing?

    It will have to be GIF. And it's not convenient. It has to be frame by frame.

    You can use Flash but you will not be able to Tween between frames.

  3. #3

    Default Re: Animate line drawing?

    Quote Originally Posted by gwpriester View Post
    It will have to be GIF. And it's not convenient. It has to be frame by frame.

    You can use Flash
    Well, in the end I want neither GIF nor Flash. However, conversion should be no problem.

    but you will not be able to Tween between frames.
    Phew, there would be around 200 frames. Fortunately, SVG scripting comes to the rescue:

    SVG Line Animation Tutorial with CSS & Other Fun Stuff (YouTube)

  4. #4
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,819

    Default Re: Animate line drawing?

    Like Gary said ot could be done but it would have to be a gif and each frame altering the line until you get the effect you want. Not at all convient, but that's the world of animation.

    EDIT: i just sae your last post and will watch that vid.
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

  5. #5
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,819

    Default Re: Animate line drawing?

    Just watched the video, neat stuff but confusing to me at least. Will watch again.
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

  6. #6

    Default Re: Animate line drawing?

    By adapting the instructions in the aforementioned tutorial, I got the animation to work in the Chrome web browser. Steps:
    1. Set stroke style back to standard.
    2. Export to: line.svg
    3. Create simple HTML file:
      Code:
      <!DOCTYPE html>
      <title>Animation</title>
      <object data="line.svg" type="image/svg+xml">Your browser does not support SVG</object>
    4. Serve HTML file from web server, e.g. Mongoose.
    5. Append to the <defs> section in the SVG source code:
      Code:
      <style type="text/css">
       #line {
        stroke-dasharray: 2000;
        -stroke-dashoffset:0;
        -webkit-animation: dash 4s linear forwards;
       }
      
       @-webkit-keyframes dash {
        from {
         stroke-dashoffset: 2000;
        }
        to {
         stroke-dashoffset: 0;
        }
       }
      </style>
    6. In the SVG source code, give the path the ID line:
      Code:
      <path id="line" d="M 528.047,58.211 C 377.375,168.292 225.775,499.789 76.028,388.456 C -16.958,319.326 85.025,106.172 191.558,60.601 C 301.525,13.561 502.023,89.644 518.68,208.088 C 529.887,287.793 395.864,312.169 334.461,364.205" fill="none" stroke-width="24" stroke="#0003ff" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="79.8403193612775"/>
    7. Using Chrome, load the HTML file from the web server and enjoy!

  7. #7
    Join Date
    Apr 2011
    Location
    Hungary, Poland
    Posts
    1,265

    Default Re: Animate line drawing?

    Feklee thanks for that tip and also the video link, it is really a worth to try direction.

    Staying in Xara you may found worth to look into this idea as Gare showed once on XaraXone for line animation

    http://www.xaraxone.com/tutorials/return-to-animation/

  8. #8

    Default Re: Animate line drawing?

    Thanks for the link. In fact, I was briefly thinking about the reveal-method. It's nice to see it executed with great result! However, Gary has some advantages here: 1. no intersecting lines, and 2. a pencil to hide ugly temporary line endings. What is nice about his animation technique is that it looks very natural.

  9. #9

    Default Re: Animate line drawing?

    Result:

    https://vine.co/v/Oi7AxVz7qXK

    The SVG animation in the browser was recorded with Bandicam.

  10. #10
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Animate line drawing?

    Here's my version. A 10 frame animation. Similar to Grays method but using semicircles. A swf file of 4Kb.



    And the swiffy html5 version
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •