Re: Advanced Transitions, Targeting Individual Transition Edges

On Fri, Apr 1, 2011 at 6:37 PM, Dean Jackson <dino@apple.com> wrote:
>
> On 02/04/2011, at 9:46 AM, Tab Atkins Jr. wrote:
>
>> Scripted Control Over Transitions
>> ---------------------------------
>>
>> Dean Jackson is doing some work on this already in Webkit.  I'm
>> *greatly* interested in this subject, and I need to compile my list of
>> requirements; I may just wait until Dean proposes some of the stuff
>> he's experimenting with.  In any case, not touching this right now.
>
> Responding only to this bit (the rest will require a refreshed mind!)
>
> The goal of my work in WebKit is to allow a script almost complete control over an animation (not transition, see below). Here is a list of features I'm aiming for:
>
> - get a list of the animations currently applied to an element (and its descendants)
> - query all the animation properties (duration, delay, etc)
> - play/pause a running animation
> - set the elapsed time of an animation
> - query the keyframes
> - add and remove keyframes, or tweak the property values + key values
> - do all this *without* touching the style system (in the words of Bill O'Reilly "we're doing it live")
>
> The main use case I have in mind is an authoring tool (just because that is about the most complex thing I could imagine using such an API). You're going to be modifying the guts of the animation engine here, and it will be too annoying to update the stylesheet at the same time (and then you'd have to decide what happens if your API changes the style, -> which then triggers a recalculation of the animation, -> breaking the objects you have a reference to, etc).
>
> For transitions, the biggest request we get is "I changed my CSS and I want to know when all the transitions are done". A good example is a presentation system like Keynote/Powerpoint: advancing the slide would trigger a bunch of built-out transitions on the elements, and they need to finish before you actually move to the next slide. This is difficult because transitions are not triggered when a property remains the same - so you can't be sure how many incoming transitionEnd events you need to wait for, even if you know how many properties you've requested a transition on.
>
> In WebKit at least, it would be easy to replicate my function that enumerates animations to one that returns transitions. Then you can either listen for the right number of events, or just query the transition objects directly. Under the hood, transitions and animations are very similar in WebKit - that might not be the case in other browsers.
>
> I don't think I'm far enough along to propose anything as a standard. I don't know if www-style is the right place for such a proposal, nor whether it is the kind of thing that other browser vendors (or the public) would like to comment on. But I'm most happy to do so if there is interest.
>
> BTW - one other thought I had, which I mentioned to James Robinson (Chrome dev), is that this API might be handy for setting up a script-based animation of *anything*, when you're using requestAnimationFrame. requestAnimationFrame would still do the scheduling, but it would allow JS to use the browser's native code for interpolation and timing functions. For example (I'm completely making this up):
>
>
> var animation;
>
> function init() {
>
>  animation = new WebKitAnimation();
>  animation.duration = 10;
>  animation.timingFunction = "ease-in-out";
>  animation.fromValue = 100;
>  animation.toValue = 200;
>
>  window.requestAnimationFrame(step);
> }
>
>
> function step(timestamp) {
>  if (!animation.started) {
>   animation.start();
>  }
>
>  if (animation.ended) {
>   return;
>  }
>
>  // at this point animation.value would be the interpolated value
>  // between 100 and 200, taking into account the timing function, start time, etc.
>  // it doesn't directly update any CSS, it's just doing the calculation. we use
>  // the value here. e.g.
>
>  Foo.setValueAndUpdateDisplay(animation.value);
>
>  window.requestAnimationFrame(step);
> }
>
> This avoids a lot of calculation in JS, exposes the nice easing etc, and would allow you to animate any custom property.

This all sounds like an awesome start, Dean.  Nothing appears to
conflict with how I see scripted animation control going.  Woo!

~TJ

Received on Saturday, 2 April 2011 17:22:10 UTC