JsKeyFrameEffect to extend web-animations.js

jskeyframeeffect.js

// JSKeyFrameEffect to extend web-animations.js
 
function JSKeyFrameEffect(model, keyframes) {
  if (keyframes.length === 0) {
    if (console) {
      console.warn('Must provide keyframes.');
    }
    return function() {};
  }
  if (keyframes[0].offset === undefined) {
    var step = 1.0/(keyframes.length-1 || 1);
    for(var i=0,l=keyframes.length;i<l;i++) {
      keyframes[i].offset = i*step;
    }
  }
  var finished = false;
  var epsilon = 0.02;
  return function(t, anim) {
    var from;
    var to;
    for(var i=0,l=keyframes.length;i<l;i++) {
      to = keyframes[i];
      if (to.offset > t) {
        break;
      }
      from = to;
    }
    var key;
    if (from === to || 1-t < epsilon) {
      // force set the final values
      for(key in to) {
        if (key === 'offset') {
          continue;
        }
        model[key] = to[key];
      }
      return;
    }
    if (from === undefined) {
      from = model;
    }
    var timeDelta = to.offset - (from.offset||0);
    var p = (t - (from.offset||0)) / timeDelta;
    var fromValue, toValue, valueDelta, value;
    for(key in to) {
      if (key === 'offset') {
        continue;
      }
      fromValue = from[key] || 0;
      toValue = to[key] || 0;
      valueDelta = toValue - fromValue;
      value = fromValue + p * valueDelta;
      model[key] = value;
    }
  };
}
 
// Example of use
// var state = {
//   thing: 10,
//   other: 1
// };
 
// var effect = JSKeyFrameEffect(state, [
//     {thing: 0, other: 10},
//     {thing: 1, other: 1},
//   ]);
 
// var animation = new Animation(
//   null,
//   effect,
//   {
//     easing: 'ease-in-out',
//     duration: 1
//   }
// );
 
// document.timeline.play(animation);