Inkscape Animation Project

General discussions about Inkscape.
ErikHK
Posts: 5
Joined: Sun Feb 10, 2008 2:57 pm

Inkscape Animation Project

Postby ErikHK » Mon Apr 10, 2017 9:44 pm

Hello!
I've been working on adding native animation support for Inkscape for the last week and a half, and it is now in a very basic but usable shape.

More information and video here: https://www.youtube.com/watch?v=SEVeDO8ODcA

Please give me your feedback on what to add/improve!

User avatar
GAngus
Posts: 83
Joined: Tue Oct 13, 2009 8:41 am
Location: NY

Re: Inkscape Animation Project

Postby GAngus » Mon Apr 10, 2017 10:48 pm

Interesting, so I guess you've created an extension that animates the frames?
Then save as a .gif, like in Gimp ?

ErikHK
Posts: 5
Joined: Sun Feb 10, 2008 2:57 pm

Re: Inkscape Animation Project

Postby ErikHK » Tue Apr 11, 2017 4:58 am

Well, it's not an extension per se, it's written into the existing C++ code.
As of now it only exports the images as a series of PNG images, which can then be easily combined into an animated GIF in for example GIMP.

User avatar
BlueKnight
Posts: 53
Joined: Sat Jun 16, 2012 10:37 pm

Re: Inkscape Animation Project

Postby BlueKnight » Tue Apr 11, 2017 5:34 am

Good work, ErikHK!

Thanks for sharing!

ErikHK
Posts: 5
Joined: Sun Feb 10, 2008 2:57 pm

Re: Inkscape Animation Project

Postby ErikHK » Sun May 14, 2017 9:42 pm

I have updated this project, here is a new video that shows the new features: https://www.youtube.com/watch?v=3TUDyqCZczs

It still exports the frames as a PNG series, which can for example be made into an animated GIF using GIMP.

The biggest updates are support for multiple layers, and motion tween along a path. There is also a new option that enables you to make all keyframes visible, which is very useful if you want to move, scale or rotate your entire animation.

An "insert keyframe" option has been added as well, it works by traversing the keyframes backwards looking for the latest drawn keyframe, and copies its contents to the chosen one, eliminating the need to copy keyframes manually.

To do:
- enable renaming layers
- enable re-ordering of layers (this can be done through the built-in Objects dialog, though it won't be mirrored in the animation layer dialog)
- enable deleting layers
- scale tweening
- rotation tweening
- path (node) tweening
- raster cached playback

Let me know what you think, and give me constructive criticism, as well as suggestions for future updates!

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Inkscape Animation Project

Postby brynn » Mon May 15, 2017 3:42 am

I would love to make comments. But I can't tell what's happening in the video....well not the details anyway. The video is a little cloudy when you put it to full screen. It looks like you've taken an object, and made that object move around the page, without changing it? But I can only tell that at the end of the video, when you play back the results. But I'm lost what you did in Inkscape. Still screenshots might help supplement the video.

What do you mean by "tween"? At first I thought was a typo, but you used it several times.

What about this kind of animation - using the same analogy of an Earth day. What if I want to show the globe slowly spinning, and starting in what is kind of the traditional image where Africa is on the right and South America on the left. Then the next view shows more of S Am and less of Africa, then the US is coming into view, Europe is disappearing, and next you start to see Mexico, and then you have the Pacific ocean in the southern hemisphere, and California is still showing in the north, and then going around and we see various islands, and all that's left of the US is Alaska, then pretty soon Asia starts to come into view on the right.

So what I mean, is that instead of moving the same object around on the canvas, what if each frame is a different image - all the paths are different? So that each frame will be a different image. Will that be possible? In this kind of animation, I imagine some kind of fadeout/fadein might be nice for this particular project. Any plans for that kind of thing?

Or like this. What about a cartoon of someone sitting in a chair, with one leg crossed over the other, above the knee, and they're swinging their foot up and down, flexing at the knee. You couldn't really draw the bottom half of the leg and rotate it up an down because it would not look like it was connected to the body. You'd have to draw at least the waist down, with the leg bent in different angles. Is that possible?

ErikHK
Posts: 5
Joined: Sun Feb 10, 2008 2:57 pm

Re: Inkscape Animation Project

Postby ErikHK » Mon May 15, 2017 4:54 am

brynn wrote:I would love to make comments. But I can't tell what's happening in the video....well not the details anyway. The video is a little cloudy when you put it to full screen. It looks like you've taken an object, and made that object move around the page, without changing it? But I can only tell that at the end of the video, when you play back the results. But I'm lost what you did in Inkscape. Still screenshots might help supplement the video.

What do you mean by "tween"? At first I thought was a typo, but you used it several times.

What about this kind of animation - using the same analogy of an Earth day. What if I want to show the globe slowly spinning, and starting in what is kind of the traditional image where Africa is on the right and South America on the left. Then the next view shows more of S Am and less of Africa, then the US is coming into view, Europe is disappearing, and next you start to see Mexico, and then you have the Pacific ocean in the southern hemisphere, and California is still showing in the north, and then going around and we see various islands, and all that's left of the US is Alaska, then pretty soon Asia starts to come into view on the right.

So what I mean, is that instead of moving the same object around on the canvas, what if each frame is a different image - all the paths are different? So that each frame will be a different image. Will that be possible? In this kind of animation, I imagine some kind of fadeout/fadein might be nice for this particular project. Any plans for that kind of thing?

Or like this. What about a cartoon of someone sitting in a chair, with one leg crossed over the other, above the knee, and they're swinging their foot up and down, flexing at the knee. You couldn't really draw the bottom half of the leg and rotate it up an down because it would not look like it was connected to the body. You'd have to draw at least the waist down, with the leg bent in different angles. Is that possible?



Yes, maybe the video was a bit too fast and hard to follow, I might make a follow-up that is more clear. Tweening is described here: https://en.wikipedia.org/wiki/Inbetween ... _animation and is used a lot in Flash, as can be seen in the example to the right on the Wikipedia article. As it works now, each keyframe is a new object, so what you are saying is possible, although with a lot more work. Fading in and out is a good suggestion, and should be quite easy to implement as well! Your last example with the leg is known as IK animation, or Inverse Kinematics, which is a lot more complicated, but really useful for character animation, so it is something that I really want to implement in the future!

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Inkscape Animation Project

Postby brynn » Mon May 15, 2017 5:01 am

Thanks. And by the way, thanks for working so hard on this -- I'm sure a lot of people will find it useful!

imppao
Posts: 16
Joined: Mon Apr 12, 2010 6:05 pm

Re: Inkscape Animation Project

Postby imppao » Tue Nov 14, 2017 7:55 pm

Hi ErikHK
thanks a lot,( merci beaucoup)
I love that ! I want to test this, but it 's complicated to me to make a compilation for windows mac or linux...
So I'm waiting somebody make a compilation :D
bye
Imppao

paullarry
Posts: 11
Joined: Mon Dec 15, 2014 5:27 pm
Location: USA
Contact:

Re: Inkscape Animation Project

Postby paullarry » Thu Nov 16, 2017 3:55 pm

ErikHK wrote:Yes, maybe the video was a bit too fast and hard to follow, I might make a follow-up that is more clear. Tweening is described here: https://en.wikipedia.org/wiki/Inbetween ... _animation and is used a lot in Flash, as can be seen in the example to the right on the Wikipedia article. As it works now, each keyframe is a new object, so what you are saying is possible, although with a lot more work. Fading in and out is a good suggestion, and should be quite easy to implement as well! Your last example with the leg is known as IK animation, or Inverse Kinematics, which is a lot more complicated, but really useful for character animation, so it is something that I really want to implement in the future!


Hats off to you for that much hard work, I may not be able to understand everything completely but I sure got a new word "tween" in my vocabulary. :D

imppao
Posts: 16
Joined: Mon Apr 12, 2010 6:05 pm

Re: Inkscape Animation Project

Postby imppao » Wed Nov 22, 2017 12:16 am

hi everyone, You can download alpha for Windows
http://erikhk.net/inkscape_animation.zip

Inkscape Animation Project page :
http://erikhk.net/inkscape_animation_project

bye
Imppao


Return to “General Discussions”