Demo animation

battlebottle

Just been mucking about with Spine to assess how easy it is to make animations for a possible future iOS storybook app. I have to say I've found it very very nice to use 😃!. I've used a lot of animation software and Spine seems to be pretty exceptional.

wave animation
Loading Image

idle blink animation
Loading Image

(these gifs might play a bit slow in some browsers (IE) cause they playback at 60fps)

Two feature suggestions I felt myself missing quite a bit though:

1) Skew transform
The vast majority of animation software I use (eg flash) allows for skew transformations on objects. This is really important for enabling the animator to squash and stretch elements properly. With Spine the way it is now, I can only squash and stretch in a way that is aligned to the objects axis. When skew is available it's possible to stretch something diagonally too. Working without this feature feels pretty restricting.

2) More than two key frames in the graph editor
This is less important but I found myself missing this. I think it would be awesome if I could select multiple frames on an objects rotational timeline for example and be able to see all those key frames in the graph editor an be able to assess their relative values visually. I don't think flash can do this either but maya and after effects can and it's a feature I find myself using all the time when it's there.

Other spine looks fantastic 🙂. Great work!

battlebottle

JuanluGC

Greats animations man!!

Nate

Very nice animations! 🙂

Skew causes some technical problems, bone compensation cannot be applied properly in some causes when there is skew. We might allow switching between the current scaling and skewed scaling at some point.

You mean you'd like to see values in the graph instead of just percentages? We evaluated this when building the graph but the value graph is much more complex. We chose to do the simplest thing that worked for now, we might revisit it later. So much to do!

battlebottle

Nate wrote
You mean you'd like to see values in the graph instead of just percentages?

Not necessarily values, but that would be nice. But more so multiple keyframes, so you could see how the value of a property changes across multiple keyframes. Something that would look like this:

Loading Image

I understand wanting to get something simple working first though 🙂.

Nate

For that chart to work, the y axis needs to be the value of the key. 🙂

battlebottle

Nate wrote
For that chart to work, the y axis needs to be the value of the key. 🙂

Yes, correct and the x-axis represents time. Is what I'm saying making sense? I'm probably being confusing.

Søren

It does make sense. It's what we wanted to do initially but it was a far bigger task than the current graph editor. We might eventually expand it to work like this.