Best practice for timeline

[mkadirtan]

Hello!

 

I'm creating a 3D application with BabylonJS. Users are able to create keyframes for object positions (Cube.position.x etc.), which in turn creates an animation. Time is controlled by using a slider. What would be the best practice, better approach for such an application?

 

Currently I'm using TimelineLite. It is a "tween" based system, and in practical use it would cause me problems. For example, if a user wants to change position of a keyframe, or create a new keyframe between other keyframes.. these kind of actions would cause troubles. I know these problems could be fixed, however I was wondering if there is a better approach for creating an animation system as such?

 

A good example of what I want to achieve is: https://nunustudio.org/editor/editor.html

[OSUblake]

If it's a keyframe editor, I wouldn't worry about changing an animation in real-time. I would only (re)create the animations if there are changes when the user presses play. That way you only have to deal with manipulating data.

 

Basically, you would do this reverse of this. Create an animation from some data structure.

 

See the Pen 7d3275656ef955c5ea2eb121c2407ba6 by osublake (@osublake) on CodePen