Re: timing functions in reversed animations

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.

> 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?

Thanks,
-- 
Garrett
Twitter: @xkit
personx.tumblr.com

Received on Wednesday, 20 February 2013 22:57:40 UTC