Is there a convenient way to animate the drawing of a line?
Attachment 104612
Printable View
Is there a convenient way to animate the drawing of a line?
Attachment 104612
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.
Well, in the end I want neither GIF nor Flash. However, conversion should be no problem.Quote:
Originally Posted by gwpriester
Phew, there would be around 200 frames. Fortunately, SVG scripting comes to the rescue:Quote:
but you will not be able to Tween between frames.
SVG Line Animation Tutorial with CSS & Other Fun Stuff (YouTube)
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.
Just watched the video, neat stuff but confusing to me at least. Will watch again.
By adapting the instructions in the aforementioned tutorial, I got the animation to work in the Chrome web browser. Steps:
- Set stroke style back to standard.
- Export to: line.svg
- 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>
- Serve HTML file from web server, e.g. Mongoose.
- 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>
- 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"/>
- Using Chrome, load the HTML file from the web server and enjoy!
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/
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.Quote:
Originally Posted by csehz
Result:
https://vine.co/v/Oi7AxVz7qXK
The SVG animation in the browser was recorded with Bandicam.
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
Egg that is great in 4Kb and absolutely smooth
Really nice!Quote:
Originally Posted by Egg Bramhill
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).
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.Quote:
Only I assume comparatively it was a lot of work
The Swiffy converted swf file works equally as well in all browsers, smartphones and tablets.
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!Quote:
Better SVG support right in Xara would be awesome
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.
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.Quote:
Originally Posted by Egg Bramhill
There are various versions, just like for example with PDF.Quote:
I'm no expert but I believe there's to many variations in the file type.
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.Quote:
Xara svg files are bloated with <defs> that don't appear to have any relevance to the content like DefaultArrow2 etc.
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.Quote:
As for including a bitmap, just don't go there!
There you are coding. ;)Quote:
I need to strip out all the <defs> in Notepad [...]
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:
This loads an external file with the CSS code describing the animation.Code:<?xml-stylesheet type="text/css" href="animation.css" ?>
Here's my CSS file describing the first animation step:
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.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;
}
Here's a way that uses Xara's vectors objects (of any shape or form): Attachment 104645
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
Nice!
Did you have the line automatically segmented, or did you do that manually?Quote:
Originally Posted by Acorn
Note to self and to others: Preview the web page by pressing Shift-F5 in Xara, then click "Animate Line".
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
Donkeys !?!?!?
Smooth!
How did you draw the line and the donkeys? Using some kind of brush tool?
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!
Here's another example of Acorns technique. A bit heavy on graphics but easy to make.
CLICK HERE
Egg, I am honoured for your creation of my own animated Avatar.Quote:
Originally Posted by Egg Bramhill
I'll come to you for advice in future.
Acorn
To alter the code to autorun (and remove the button trigger), use:Quote:
Originally Posted by Egg Bramhill
I have simply remmed (commented) out the button trigger wrapper.Code:<script type="text/javascript">// <![CDATA[$(document).ready(function(){
$('.animate').hide();
//$("#button").click(function(){
var drawingRate = 20;
var renderTime = 10;
$('.animate').hide();
$('.animate').each(function(index) {
$(this).attr('id','step-'+index);
});
$('.animate').each(function(index) {
setTimeout(function () {
$("#step-"+index).fadeIn(renderTime);
}, drawingRate*index);
});
//});
});
// ]]>
</script>
Acorn
Cheers Acorn. Instead of a blend I used a brush in this one & converted the line to shape / ungrouped amd named all the shapes htmlclass=animate as per your instructions.
Egg, your use of brushes for us with XDP is a perfect complement to the method.Quote:
Originally Posted by Egg Bramhill
Thank you for uncovering it.
Acorn