Blending Animations (ie walk, jump, idle)

[dxc 1 Likes (Newbie)]

I want to be able to seamlessly jump between different states of the animation. For example, let's say there's a walk, run, sprint, and idle animation (in that order). Let's say I'm running and I want to sprint. I can use play("sprintFrame") and it'll go straight to that label, but then if then if the legs aren't exactly how they should be on that frame, it'll look jumpy. I tried using tweenTo, but it plays all the animations in between. I'm thinking of using a fromTo, but then I'd have to manually get the current size, position, and rotation of everything. That could get ugly. Is there a better way that I'm not thinking of?

 

Thanks for always proving such amazing support for newbs like me!!!

See the Pen raOwYR by MAW (@MAW) on CodePen

[jamiejefferson 1,199 Likes (Superhero)]

It's quite difficult to understand the situation you're trying to describe there. Please consider providing a reduced demo in Codepen that demonstrates the issue.

[dxc 1 Likes (Newbie)]

Sorry about that. Here's a CodePen: 

See the Pen pvjwyL by anon (@anon) on CodePen

 

I would like to be able to seamlessly cycle between animations. Instead when you click any of these, it jumps to the start position, rather than playing from where it is. Thanks!

[jamiejefferson 1,199 Likes (Superhero)]

Thanks for the demo, but I'm still a bit unsure of what is the intended behaviour here. Your Codepen is  quite a bit different to what I expected from the original question. There aren't any sprites and it's using three different properties instead of the one I expected for a sprite (backgroundPosition).

 

Which of these (or something different?) matches the behaviour you're after?

• animation1 is tweening x between 0 and 550
• animation2 button is pressed when x is at 275
• animation1 stops
• animation2 starts and x remains at 275

• animation1 is tweening x between 0 and 550
• animation2 button is pressed when x is at 275
• animation1 completes, bringing x back to 0
• animation2 starts

• animation1 is tweening x between 0 and 550
• animation2 button is pressed when progress is 50% (x is at 275)
• animation1 stops
• animation2 starts at 50% progress and x remains at 275

• animation1 is tweening x between 0 and 550
• animation2 button is pressed when progress is 50% (x is at 275)
• animation1 completes, bringing x back to 0
• animation2 starts at 50% progress

[Diaco 1,997 Likes (Superhero)]

Hi [ dxc , jamiejefferson ] 

 

i think you need a neutral position for character animation .

perhaps there be a better way for that , but i think this can give a clue :

 

See the Pen raOwYR by MAW (@MAW) on CodePen

 

if you want tween an element svg/div/canvas you need something like my codepen , but if want to using sprite animation , you need bridge animation frames between your character poses .

[dxc 1 Likes (Newbie)]

Sorry I was being so confusing! Diaco, I'm pretty sure that's just what I needed. Thanks!