Welcome to TalkGraphics.com
Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 25
  1. #11
    Join Date
    Apr 2011
    Location
    Hungary, Poland
    Posts
    1,265

    Default Re: Animate line drawing?

    Egg that is great in 4Kb and absolutely smooth

  2. #12

    Default Re: Animate line drawing?

    Quote Originally Posted by Egg Bramhill View Post
    Here's my version. A 10 [key]frame animation. Similar to Grays method but using semicircles.
    Really nice!

    Only I assume comparatively it was a lot of work: With the SVG method that I used, I simply told the line to animate. I was also able to specify a custom timing function, giving full control over how the line animates. I chose ease-in, which means: first slow, then fast

    Furthermore, I get a super-compact SVG file which runs in every modern browser, incl. those on smartphones and tablets.

    Better SVG support right in Xara would be awesome. At the moment, the only serious SVG editors that I'm aware of are Inkscape (slow) and Illustrator (expensive).

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

    Default Re: Animate line drawing?

    Only I assume comparatively it was a lot of work
    It wasn't straight forward Feklee and I admit that the css method has many advantages. Just one drawback for me though and that's that I'm crap at code. It may take me three quarters of an hour on how to best create a graphics solution but an eternity to learn css or javascript.

    The Swiffy converted swf file works equally as well in all browsers, smartphones and tablets.

    Better SVG support right in Xara would be awesome
    SVG for all it's early promise has made very slow progress and it's still a rarity on the web. I'm no expert but I believe there's to many variations in the file type. In Notepad, compare svg's files created using both Inkscape & Xara of the same simple object, a 400 px green filled circle with a 4px black stroke. The two files look entirely different. They render the same in a browser (apart from the different page sizes) but why the large difference in content? Xara svg files are bloated with <defs> that don't appear to have any relevance to the content like DefaultArrow2 etc. As for including a bitmap, just don't go there!

    I use VideoScribe a bit but trying to import a Xara generated SVG file is useless. I need to strip out all the <defs> in Notepad to even start to get a Xara generated SVG file to at least look recognisable. I often copy and paste from Xara to Inkscape, then export from Inkscape to SVG for import to VideoScribe. It's impossible to include a bitmap. Not saying it's a Xara issue or an VideoScribe shortcoming but whatever it is the SVG filetype, for all the years it's been around should now be stable and equal across all platforms.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	svg-comparison.jpg 
Views:	243 
Size:	163.2 KB 
ID:	104644  
    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

  4. #14

    Default Re: Animate line drawing?

    Quote Originally Posted by Egg Bramhill View Post
    SVG for all it's early promise has made very slow progress and it's still a rarity on the web.
    Don't have any numbers, so can't argue about this. I have used it. Also SVG is supported by Google Web Designer, a tool for creating banner ads.

    I'm no expert but I believe there's to many variations in the file type.
    There are various versions, just like for example with PDF.

    Xara svg files are bloated with <defs> that don't appear to have any relevance to the content like DefaultArrow2 etc.
    Blame Xara on that. SVG, like HTML or PDF, can be authored in a multitude of ways, yet render to the same image. Bitmap file formats, which are much simpler, are not a good comparison.

    As for including a bitmap, just don't go there!
    For many years there has been a bug in Xara concerning bitmaps in SVG. It's fixed now. Still, SVG export indeed is not great.

    I need to strip out all the <defs> in Notepad [...]
    There you are coding.

    Anyhow, getting the animation to work is rather straight forward - see my earlier post. As I found out, Xara will map layers to groups in SVG. As CSS IDs the groups get the layer names (avoit spaces). If you use these IDs, then no editing of the SVG file is necessary, except for one line that needs to be added below the DOCTYPE declaration:
    Code:
    <?xml-stylesheet type="text/css" href="animation.css" ?>
    This loads an external file with the CSS code describing the animation.

    Here's my CSS file describing the first animation step:

    Code:
    /*
    
    Include below DOCTYPE in svg file:
    
        <?xml-stylesheet type="text/css" href="animation.css" ?>
    
    */
    
    * {
        -webkit-animation-timing-function: ease-in;
    }
    
    @-webkit-keyframes countour {
        from {
            stroke-dashoffset: 1500;
        }
        to {
            stroke-dashoffset: 0;
        }
    }
    
    #step1 path {
        stroke-dasharray: 1500;
        stroke-dashoffset: 1500;
        -webkit-animation: countour 0.5s linear forwards;
        -webkit-animation-delay: 0.5s;
    }
    The value of 1500 needs to be adjusted to match line length. I did that by trial and error. "contour" is naming the group of key-frames. "step1" is the name of the layer containing the line in Xara.

  5. #15
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    video Re: Animate line drawing?

    Here's a way that uses Xara's vectors objects (of any shape or form): Animate.xar
    I only set a low number of line elements to check how well it can be tuned.
    The pop-up text is part of the animation.

    It uses class Names to include anything and some jQuery to render the animation.

    You alter the direction, or sequence, by repositioning the order of the elements in the Page & Layer Gallery.

    It could be used as a one-shot slideshow for a stack of images.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #16

    Default Re: Animate line drawing?

    Nice!

    Quote Originally Posted by Acorn View Post
    I only set a low number of line elements to check how well it can be tuned.
    Did you have the line automatically segmented, or did you do that manually?

    Note to self and to others: Preview the web page by pressing Shift-F5 in Xara, then click "Animate Line".

  7. #17
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Default Re: Animate line drawing?

    Manually. I chose line segments but it could have been circles, squares, boxes or donkeys.
    I just dropped my shape onto the line and turned it to fit, which is why it is a bit rough.

    I wasn't trying to replicate your line, just demonstrate a method that used Xara vectors instead of SWF or animated GIFs.
    If it was just for this line I would have used HTML 5's Canvas.

    The Xara approach doesn't require any other editor.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

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

    Default Re: Animate line drawing?

    Donkeys !?!?!?
    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

  9. #19

    Default Re: Animate line drawing?

    Smooth!

    How did you draw the line and the donkeys? Using some kind of brush tool?

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

    Default Re: Animate line drawing?

    No Feklee, for the line animation I wanted to smooth out Acorns example (no criticism, I just thought the example "jaggy" and wanted to see if it could be smoothed).

    I created a very short line (rounded ends and fairly large line width). Cloned, moved and applied a blend. Next created another curvy line. Selected both & fitted blend to curve.

    Arrange/Convert to editable shapes/Ungroup. Deleted the blend curve. With all still selected, as per Acorns instructions, named them all htmlclass=animate.

    This gave a very smooth animation. The donkey one was done in exactly the same manner but it just auto animated unlike Acorns version that required a button press.

    Perhaps Acorn could expand on this?

    I must admit it's fun to play around with but unfortunately my brain won't remember how I did it myself tomorrow!
    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
  •