Page 3 of 3

Re: Let lines simultaneously been drawn

Posted: Sun Jun 24, 2018 12:39 pm
by tylerdurden
Will do!

SVG Image

Re: Let lines simultaneously been drawn

Posted: Sun Jun 24, 2018 4:43 pm
by Xav
Moini wrote:(May I ask what you kind of animation you built, Xav?)


Nothing worth mentioning. I first came across this technique a few years ago, played with it very briefly to check I'd understood it correctly, and filed it under "things to cover when I get on to web stuff in my tutorials". At the time I didn't expect it would take over 6 years of tutorials before I got onto web stuff.

With your extension I've only created a test file, with a couple of stars, and some text converted to paths then joined with "combine". There's really nothing to share that hasn't now been bettered by TD's creations.

Re: Let lines simultaneously been drawn

Posted: Mon Jun 25, 2018 2:06 am
by Moini
@Xav Ah, okay. I thought you've been following some really different concepts, because you understood the extension's purpose differently, so I was curious to see what else one might want to do with it.

Re: Let lines simultaneously been drawn

Posted: Mon Jun 25, 2018 2:47 am
by Moini
If you haven't read yet, Tav is trying to help getting animation of the path with CSS into the SVG spec:

https://www.patreon.com/posts/biweekly-update-16995867
(just found it)

Re: Let lines simultaneously been drawn

Posted: Mon Jun 25, 2018 3:02 am
by Moini
(and meshes and hatch fills are no longer in the draft for SVG 2.0 - but they are *in* the draft for 2.1)

Re: Let lines simultaneously been drawn

Posted: Mon Jun 25, 2018 5:22 pm
by Xav
Moini wrote:@Xav Ah, okay. I thought you've been following some really different concepts, because you understood the extension's purpose differently, so I was curious to see what else one might want to do with it.


No, it was just that when I originally proposed an extension, it was with the thought that you would select one path, enter a duration, and a block of CSS would be added. Multiple paths selected: multiple identical blocks of CSS added. If you wanted paths animated sequentially, you would set each one up individually, providing a delay for subsequent ones.

In that manner, there's no need for the user to name the animations. If they operated the extension on the same path more than once, the new setting would replace the old ones (hence my suggestion to use multiple style blocks, as it makes this a lot easier).

The difference is one of workflow. In my approach:

* Multiple lines selected - they're animated with the same settings.
* Multiple visits to the dialog to set sequential animations.

In your approach:

* Multiple lines selected to set sequential animations
* Multiple visits to the dialog to animate multiple paths with the same settings.


So it's not so much that I understood the extension's purpose differently, but rather the manner in which a user might work with it. Having text "write itself" is cool, and an easy one for users to understand. But I've most usefully seen this animation method used with complex drawings with lots of paths that all animation at once to quickly create the image. Something like your Inkscape logo or TD's celtic cross. So I was coming at it from the perspective of animating multiple lines simultaneously (per the OP's request), rather than making it easier to sequentially animate multiple lines.

Re: Let lines simultaneously been drawn

Posted: Tue Jun 26, 2018 12:00 am
by Moini
@Xav can you link to an example for that 'most usefully' used method? It's not impossible that the extension could do both - sequential AND parallel animation, as the user chooses.

Re: Let lines simultaneously been drawn

Posted: Tue Jun 26, 2018 12:12 am
by tylerdurden
I'm thinkin sequential is more common: whiteboard animation is quite popular, and it seems the OP was looking for something VideoScribe might not do (i.e.- something not common).

As an end-user, I would welcome the option to switch between approaches... it's just more programming, and that happens by magic, right? :?

Re: Let lines simultaneously been drawn

Posted: Tue Jun 26, 2018 1:28 am
by Xav
Moini wrote:@Xav can you link to an example for that 'most usefully' used method? It's not impossible that the extension could do both - sequential AND parallel animation, as the user chooses.


This page (linked from the CSS Tricks article) is the sort of thing I was thinking of:

https://tympanus.net/Development/SVGDra ... index.html

But I've seen other sites do the same thing (I didn't keep track of the URLs at the time, so can't provide references). There was one that was used for a couple's wedding site, where an outline of the happy couple was drawn over the space of a few seconds. And another where an isometric view of a computer was drawn (I don't think it was the page I linked above, as I seem to remember it was a PC and monitor, not a Mac, and that it remained with the outline image at the end).

Of course "most useful" is entirely subjective, and I'm coming at this from a web developer perspective. I don't see much benefit in being able to "write" text beyond a few short words - anything much longer probably benefits from a normal font anyway, at least in terms of readability. So to my mind the "most useful" examples are those that use it as a fancier alternative to just fading an image in.

I could easily see web developers wanting to "draw" their company logo, or an image of their product on their website, rather than just fading it in or having it immediately appear. If over-used it's also the sort of thing that could turn into the new <blink> or <marquee> tag (i.e. a fancy effect that quickly annoys the hell out of users) - but for the time being it's still niche enough to be cool ;)


Outside of web sites I'm sure I've seen a similar technique used in TV: the architect's plans or blueprints that are "drawn" over the space of a few seconds on a home improvement show, or the line drawing of a scene that then fades into video footage. I'm not suggesting your extension would be used for those specific cases, just that there are probably other examples of "draw several lines simultaneously" that fall outside the normal scope of SVG or websites.

Re: Let lines simultaneously been drawn

Posted: Thu Jun 28, 2018 8:11 am
by Moini
Thanks for the explanation, Xav. I see now where you're coming from :) This sounds like a useful addition to the extension. As I currently cannot work on this, but would very much like the extension to be able to do that, I've opened an issue on gitlab for it: https://gitlab.com/Moini/ink_line_animator/issues/6

Re: Let lines simultaneously been drawn

Posted: Fri Jun 29, 2018 12:55 am
by tylerdurden
What we have so far is pretty great. Thanks for putting this together!

SVG Image

Re: Let lines simultaneously been drawn

Posted: Fri Jun 29, 2018 1:12 am
by Xav
For a way more complex investigation of a similar effect to TDs previous post (warning, seriously technical stuff!):

https://css-tricks.com/animate-calligraphy-with-svg/

Re: Let lines simultaneously been drawn

Posted: Fri Jun 29, 2018 10:57 am
by Moini
Cool techniques :)

I've tried both here (with clones, as it seems the animation is being lost when an object is moved into the defs section):
https://framadrive.org/s/MjF5rNLJ8xn94CK

Re: Let lines simultaneously been drawn

Posted: Sun Dec 23, 2018 12:02 am
by Lazur
Started testing this extension.

Some experiences so far.
The timing function would be more convenient with the linear option set to default.

The other is just an idea. If there was an option to "clear" the path the same way as it was animated upon drawing.

The helping text is cropped off in the extension panel, cannot read the gitlab link nor can select the text yet alone click on the link.

The delay seconds settings would also need some explanation.
It sort of works but not as expected. The animation starts delayed but till then the path is rendered on screen in its fullness. Thus making an animation where each part starts animating one after another needs a different approach. Maybe would need an additional opacity value animation as well?

Re: Let lines simultaneously been drawn

Posted: Sun Dec 23, 2018 5:05 am
by Lazur
Here is what I have so far:

SVG Image

Instead of using the darker blue, the background and this second animated colour should be the same as the other outlines in colour, making the knot appearing and disappearing.
As you can see, now this darker blue path is slightly wider than the white below to overlap with the outlines. Also, that if coloured the same lighter blue, it would overlap with the still present white parts.
Needs some even more complex structure I guess.

Re: Let lines simultaneously been drawn

Posted: Sun Dec 23, 2018 5:42 am
by v1nce
the vivus javascript library can animate your svg paths

https://maxwellito.github.io/vivus/

Re: Let lines simultaneously been drawn

Posted: Sun Dec 23, 2018 7:17 am
by Lazur
v1nce wrote:the vivus javascript library can animate your svg paths

https://maxwellito.github.io/vivus/


Thank you for the link!
Will get there this time eventually with the extension and a bit of editing in notepad++.

Another issue I found is an animated path duplicated leaves the duplicate unanimated. Ouch!


Edit: speaking adding more keyframes:

SVG Image

Re: Let lines simultaneously been drawn

Posted: Sun Dec 23, 2018 11:53 am
by Lazur
Another test example, this time a bit larger -doesn't work with edge or explorer, chrome can deal with it to some extent.

svg here

It is adding some interlacing rendering effect to that previous halftone example.

Re: Let lines simultaneously been drawn

Posted: Sun Dec 23, 2018 12:20 pm
by Moini
Lazur, can you report bugs here, please:
https://gitlab.com/Moini/ink_line_animator/issues

(if applicable, with screenshots)

Re: Let lines simultaneously been drawn

Posted: Sun Dec 23, 2018 12:52 pm
by Lazur
Moini wrote:Lazur, can you report bugs here, please:
https://gitlab.com/Moini/ink_line_animator/issues

(if applicable, with screenshots)


Reported some.
There are others I'm not sure of. Like how the delay time should work, what should be expected if more maths are selected at the same time (generated separate ones however it was the same for all the objects; could/should have been done in one go?); wether it is the default by browsers that before the animation starts the paths are rendered full -shouldn't that be noted in the tooltip- etc.

Re: Let lines simultaneously been drawn

Posted: Tue Dec 25, 2018 11:19 am
by Lazur
Other testing with more complex paths.

drawing 1

drawing 2

First one is using a drawing to clip the animated paths while the other one is using the animated path for masking the drawing.
Both render the same result, showing the image being drawn.

The masing approach seems more universal, as it can be used with random underlying graphic content -like that halftone image above-.
Yet there seems to be a limit what chrome can handle and what not.
Here is a core path animated -photograph traced with centerline tracing- and
the masked result is here.

Wondering where is the limit of this extension and the resulting animation. Is there a node number which would prevent the extension working (guessing it has to measure the overall path length first to calculate the right amount of dash) or a path complexity where the browser simply stops even trying.

Re: Let lines simultaneously been drawn

Posted: Tue Dec 25, 2018 1:33 pm
by Moini
Lazur, thank you.

I know about the issue with paths shortly flashing before the animation starts: https://gitlab.com/Moini/ink_line_animator/issues/3

For the multi-path selection, the help tab says:
Subpaths will be drawn simultaneously. Separate paths will be drawn in stacking order.

Re: Let lines simultaneously been drawn

Posted: Sat Jan 05, 2019 2:45 am
by oblio
Moini & Others on this thread-
Thanks you so much for the work you have done on this extension.
The comments and examples used in everyones' posts were very helpful to my understanding the topic and how to use the extension.
I installed(2 Jan) the extension and it worked right out of the box. (InkScp92.3 and Win7HomePremium)
As a 'casual' user of Inkscape I appreciate the functionality just the way you put it together - with the noted change request for the delay attribute to avoid displaying the path until after the delay.

Thanks again for this and the many contributions you all have made over the years.
NewYrFlrishAnm8Tst.svg
(21.02 KiB) Downloaded 44 times

Re: Let lines simultaneously been drawn

Posted: Sat Jan 05, 2019 9:47 am
by Moini
:D Thank you! Happy New Year to you, too, oblio!