Re: timing functions in reversed animations

On Feb 20, 2013, at 2:57 PM, Garrett Smith <dhtmlkitchen@gmail.com> wrote:

> On 2/20/13, Dean Jackson <dino@apple.com> wrote:
> Hi Dean -
> 
> I recall this issue coming up years ago (on css-discuss?) by ROC (or
> was it Fantasai?)
> 
>> This was discussed at the call today:
>> http://lists.w3.org/Archives/Public/www-style/2011Mar/0744.html
>> 
>> What was intended in the original spec proposal, and what WebKit implements
>> is actually pretty simple.
>> 
>> For any animation/transition, you calculate a "progress" based on
>> (currentTime - startTime) / duration,
>> where startTime is the time the current iteration began, producing a value
>> between 0 and 1. You use this
> I used this approach in hand-rolled animations using what I've
> expressed in code here, shown in seekTo with property rationalValue
> and 'pos' representing what you call "progress".
> 
> https://github.com/GarrettS/ape-javascript-library/blob/master/src/anim/Animation.js
> 
> I haven't used the code recently but I recall it did work.
> 
> 2007/8 I was working on that, sitting on the floor of in a tiny
> flea-infested studio apartment in Sunnyvale. Fond, fond memories.
> 408...
> 
> (kidding, kidding).
> 
> Any desire for the API to seekTo arbitrary position (0-1)? Because the
> approach you're proposing lets you do that, as my code shows.

Yes, the Web Animations API is being discussed now.

https://dvcs.w3.org/hg/FXTF/raw-file/tip/web-anim/index.html

> 
>> value directly when animating forwards. When you are in the reverse cycle,
>> you use (1 - progress). This
>> value is then input into the style calculation.
>> 
> | if (this._transitionBackwards) {
> |   this.endOffset = 1 - this.transition(1 - pos);
> | }
> 
>> Effectively this means a reverse phase is a mirror image of the forwards
>> phase, as Simon said.
>> 
> That's what you want, visually.
> 
>> I think everything w.r.t keyframes becomes pretty obvious now, since you use
>> the evaluated progress
>> to calculate where you are in the set of keyframes and forwards/reverse
>> really makes no difference. You
>> never need to "flip" the timing function - it's the input progress that runs
>> backwards in reverse.
>> 
> So no "inverse function" needed after all.
> 
> [...]
>> 
>> If you're interested in the WebKit code, AnimationBase::fractionalTime is a
>> nice place to start.
> 
> Thanks. Is that available online? And if so, where?

All of WebKit's code is available online :)

trac.webkit.org -> Browse Source.

Dean

Received on Wednesday, 20 February 2013 23:11:39 UTC