[animation] Support three.js keyframe animations?

[donmccurdy]

Nice work on the new animation timelines! Had been thinking of putting this idea (below) in aframe-extras, but might as well discuss it to see if we can converge. The built-in three.js animation system does keyframe animation, and would map pretty easily to a syntax like this:

<a-entity animation__fromKeyframes="property: position;
                         times: 0, 0.2, 0.4, 1;
                         values: 0 0 0, 0 1 0, 0 1 1, 0 0 0;
                         easing: smooth;"
          animation__fromJSON="src: my-animation.json"
          animation__fromModel="clipName: run"
          gltf-model="src: gremlin.gltf"

That translates to something like:

var clip1 = new THREE.KeyframeTrack( '.position', times, values, THREE.InterpolateSmooth );
var clip2 = THREE.AnimationClip.parse(json);
var mixer = new THREE.AnimationMixer( this.el.object3D );
var action1 = mixer.clipAction(clip1);
var action2 = mixer.clipAction(clip2);
action1.play();
action2.play();

This feels like a natural fit for moving an object along a path, without requiring timeline steps for each vertex along the path. Could also imagine creating keyframes using the inspector and saving to a JSON file... The "catch" is that it operates directly on the THREE.Object3D, and only supports certain properties like position, rotation, scale, color, and opacity. And of course clips can be extracted from a 3D model. There are also some hacks you can use to control morph targets in the same way way.

Does this seem like it fits into your animation components, or better as a separate system? What is the roadmap for the official animation system these days? I'd been hoping to get animation-mixer into core, since it doesn't require any extra libs and works with both glTF and COLLADA now. But it doesn't (yet) play nicely with other animation components.

Thoughts?

[ngokevin]

anime.js which is pretty small, does support motion paths and keyframes. Components could be built on top of the animation component (as I did for timelines). I don't know much about the internals of model animations or how well they'd map. Using native animation clips seems better for models. Tweening versus animation mixer can have separate purposes.

Once this component is battle and unit testing, I'd put it in core since I can see many components being built on top of it.