- From: Garrett Smith <dhtmlkitchen@gmail.com>
- Date: Wed, 20 Feb 2013 14:57:08 -0800
- To: Dean Jackson <dino@apple.com>
- Cc: www-style list <www-style@w3.org>
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