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

_From @notoriousb1t on August 3, 2016 22:1_

I think it is better to pass options to future proof the API a little.  By passing a function in directly, there are no opportunities to add additional hooks.  Also, you might need to know what direction and other timing information such as the playback rate to render your non-animation correctly, so I think that passing the delta isn't going to be sufficient.  

If there isn't a desire for the browser to do render optimization based on model changes, something like this would be simpler and provide opportunity for additional hooks:

``` javascript
const targetEl = document.createElement('div');
const effectOptions = {
    onsample(target, timing) {
        // renders "offset: x, rate: y"
        target.innerHTML = `offset: ${timing.computedOffset}. rate: ${timing.playbackRate}`;
    }
};
const timingOptions = { 
    duration: 1000, 
    easing: 'ease-in' 
};

const effect = new WebEffect(targetEl, effectOptions, timingOptions);
const animation = new Animation(effect, document.timeline);
animation.play();
```

That sort of falls in line with using onsample in a KeyframeEffect though.


-- 
GitHub Notification of comment by birtles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2063#issuecomment-349194069 using your GitHub account

Received on Tuesday, 5 December 2017 04:44:44 UTC