[web-animations-2] Idea: Custom Effects #2063
Description
From @notoriousb1t on July 27, 2016 15:49
I think that animation libraries would benefit from a simple way to create custom effects. Here is what I think it might look like:
var effectOptions = {
createContext() {
return {
startValue: 0,
endValue: 1000,
currentValue: 0
};
}
updateContext(ctx, timing) {
ctx.currentValue = ((endValue - startValue) * timing.computedOffset) + startValue;
}
render(ctx, target) {
target.innerHTML = ctx.currentValue;
}
};
var timingOptions = {
duration: 1000,
easing: 'ease-in'
};
var target = document.createElement('div');
var webEffect = new WebEffect(target, effectOptions, timingOptions);
var animation = new Animation(webEffect, document.timeline);
animation.play();Hopefully I am not butchering Web IDL, but the ctx argument would be
interface WebEffectTimingContext {
readonly attribute double offset;
readonly attribute double computedOffset;
readonly attribute double playbackRate;
readonly attribute AnimationPlayState playState;
};and the effectOptions variable would be
interface WebEffectOptions {
Dictionary createContext();
void updateContext(Dictionary context, WebEffectTimingContext timing);
void render(Dictionary context, object target);
};I would think createContext and render should occur in the main thread and updateContext would occur outside of the main thread. If that was the case, the context object would be passed by value the same way postMessage works with a Web Worker.
I think exposing an interface like this would make it easier to build out custom effects while still benefiting from the different timing functions and animation controls. If allowed with Group or Sequence effects, I think it would make it easy to choreograph events between canvas, unsupported svg properties, and other things.
Would something like this be possible?
Copied from original issue: w3c/web-animations#162