Play a series of animations in a chain

Questions
1

Hey guys. I 'm working on my final year project. it’s about a lip animation. I’ve already built a face model with multiple lip movements. And I’m trying to map this movements to each pronounce units to develop the following example.
For example, a user input word “hello” and this word contains four animations “H”, “e”, “L”, and “OW”. And my model plays these four animations in a chain.
The following code is the “play” part of my code. I used GLFLoader. I have 15 animations and I want to play them in a chain. However, when I run this, it will only play four animations and stop.

var AnimationAction = mixer.clipAction(glf.animations[0]);
AnimationAction.loop = THREE.LoopOnce;
AnimationAction.play();
var p = 0;

           function l() {
               if (p >= 14){
                   return;
               }
               p++;
               AnimationAction = mixer.clipAction(glf.animations[p]);
               AnimationAction.timeScale = 0.4;
               AnimationAction.loop = THREE.LoopOnce;
               AnimationAction.play();
               mixer.addEventListener('finished', function (e) {
                   l();
               });
           }

           mixer.addEventListener('finished', function (e) {
                   l()
           });

Any ideas on how would I play animations in a chain?
Best Regards

2

Strange. Can you demonstrate the issue by sharing your code (maybe as a git repo)?

4

Here is my project. I try to log the event of the callback function. It will log loads of times. It seems using a recursion is not correct.

5

I’ve updated your app code with a working example that plays through all animation actions. A few bits of your previous code were removed to highlight the more relevant parts.

Test.html (2.4 KB)

6

Thank you so much!!

8

Thanks for your solutions, it works.
But when I want to change the animations, something happened. I added a list as a parameter to the function you offered. And in the list, I added a sequence of animations need to be played.

        var animations = [ 0, 0, 1, 3];
		function playNextAction(animations) {
			if ( currentActionIndex === animations.length ) {
				return;
			}

			var action = actions[animations[ currentActionIndex ]];
			action.play();
			currentActionIndex ++;

		}

However, the only the animation 0 is played and stopped. I tested several times and I found the same animations can’t be played in one sequence. I hope you could give me some advices. Thanks for your time!

9

Does it work if you change:

action.play();

to

action.stop().play();
10

I works!! These two problems bother me for two weeks. Could you explain them? Thanks a lot!

11

The last problem was a timing issue. Meaning when the finished event is fired, the animation is still played. When you call play() again, it has no effect (since a reset is necessary).

I think this should also work and is actually more correct.

action.reset().play();
13

I got it! Thanks you so much for your time!

1 Like