[csswg-drafts] [web-animations-2] Idea: Custom Effects

birtles has just created a new issue for https://github.com/w3c/csswg-drafts:

== [web-animations-2] Idea: Custom Effects ==
_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:

``` javascript
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

``` IDL
interface WebEffectTimingContext {
    readonly attribute double offset;
    readonly attribute double computedOffset;
    readonly attribute double playbackRate;
    readonly attribute AnimationPlayState playState;
};
```

and the effectOptions variable would be 

``` IDL
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_

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2062 using your GitHub account

Received on Tuesday, 5 December 2017 04:43:41 UTC