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.
Gary W. Priester
gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook | eyeTricks on YouTube | eyeTricks on Instagram
Well, in the end I want neither GIF nor Flash. However, conversion should be no problem.
Phew, there would be around 200 frames. Fortunately, SVG scripting comes to the rescue: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.
Larry a.k.a wizard509
Never give up. You will never fail, but you may find a lot of ways that don't work.
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.
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.
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
Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
Bookmarks