Control animation with slider-bar like playing video

Questions
1

I want to control animation like playing video:

  1. Set a slider which can control and visualize the progress of the animation.
  2. Set a forward button to play / pause the “Forward Animation”.
  3. Set a backward button to play / pause the “Backward Animation” (play inversely).

Here is my code on CodePen: （but there are some bugs which I can’t figure out）

While I test the animation, I found a problem:
(I can’t explain why the animation plays shorter and shorter)

Thank you.

2

You’re creating a new animation clip and action with each new click, you only need to create them once, outside the click event handler.

Here is an updated fiddle

2 Likes
3

Yes~
I take the “AnimationClip Code” outside of the click event handler, the Problem in CodePen-2 solved.

And I found the key point of the Problem in CodePen-1 above now.

I pause the AnimationAction, and set the time of Mixer,
But… I forgot something about the clock. (let clock = new THREE.Clock())

While the animation is playing, clock running a tiny step in requestAnimationFrame,
let delta = clock.getDelta() get a tiny number such as 0.016 …

While the animation is paused, the clock is still running !
Replay the animation after pause it in some seconds, the time of the clock move forward by the same seconds.
So getting the time interval by clock.getDelta() will return a big step like 2.53,
which makes the animation jumping a big step discontinuously.
(by mixer.update(delta))

Thanks for you help ~

1 Like