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