Smooth transition between sprite animations

Animation
1

I have a simple cube frame(sprite) animation(just for now).

Each side of the cube has a different colour.

When the user click the red button the cube will animate and show the red side of the cube.

When the user click the green button the cube will animate and show the green side of the cube and so on.

I have been able to achieve this but the issue is there is no smooth transition between the two.

Is this possible to do?

Any help is much appreciated :slight_smile:

controlled-frame-animation.hype.zip (1.4 MB)

2

Hi Steve!

Here is a thread from a few years ago offering up a 3D cube - slightly different from what I see in your work but maybe it is actually what You are looking for:

And here is the Hype file to go with it: 3dcube.hype.zip (141.6 KB)

3

Hi Jim,

No I was using a 3d cube for an easy example, but thanks!

1 Like
4

Given these constraints:

  • Using a sprite sheet for animation
  • Having an initial intermediate slate and then always wanting to go between red or green

I would accomplish it by:

  • Use a single sprite sheet that starts as red, animates to the intermediate state, and then animates to fill green
  • On Scene Load pause the main timeline, and go to the middle time
  • have the red button continue the main timeline in reverse
  • have the green button continue the main timeline forwards

You could accomplish something with two sprite sheets, but that is unneeded complexity. Also note that the display property that you have with javascript code can be done by animating the display property in Hype (under the Element Inspector's Visibility section). But this wouldn't be needed with a solo sprite sheet.

If you intend to have a multitude of other states you'd really need to have all the different combinations of animations between them and then use some javascript to determine which timeline to run on button press.

If you did have a lot of different states, you may want to try using vector shape animations (with the "Direct Anchor Point Match" algorithm) and relative keyframes.

5

Thanks Jonathan I was was hoping I wouldn’t need to make many animations but I can’t see any other way, thanks for your help!

6

There is always the template by @Luckyde (haven't seen him for a while now). But you would have to dig into his custom logic. Not done with only Hype but then again creating Sprite sheets also requires additional third-party tools and logical planning beforehand.

2 Likes
7

Yeah that script's pretty old by this point but it does stilll work fine, for a 3d script cube i would consider either therejs

https://codepen.io/GreenSock/pen/BaNQpQZ (this example's animation is done with gsap but the core is webgl threejs)
which is a proper 3d library for the web where you can easily make your own 3d box and text on top, theres great docs its just really big in filesize if youre doing this for something small
or just looking at doing it with css e.g.
https://codepen.io/jonathan/pen/FEbzA
If you google css cube youll find a bunch of examples and im pretty sure mine was an offshoot of those too. The only issue with css is it would be a bit more work to wrap youre head around the layering and you need to test it in all browsers to make sure it works since 3d transforms in css sometimes get weird. But its the most light weight solution that doesnt include animations of transitiosn in image sequences

And both of these can be done within the hype interface and work fine :smiley:

2 Likes