W3C home > Mailing lists > Public > www-style@w3.org > April 2011

Re: Advanced Transitions, Targeting Individual Transition Edges

From: Charles Pritchard <chuck@jumis.com>
Date: Sat, 02 Apr 2011 10:51:19 -0700
Message-ID: <4D976217.5030006@jumis.com>
To: Dean Jackson <dino@apple.com>
CC: "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
On 4/2/2011 10:21 AM, Tab Atkins Jr. wrote:
> On Fri, Apr 1, 2011 at 6:37 PM, Dean Jackson<dino@apple.com>  wrote:
>> 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

Could we get two more attributes -- a method and a property:
getValueAtTime and animation.time.
animation.value === animation.getValueAtTime(animation.time)

At the very least, I'd like to have the method; the strict equals
is just meant to convey the idea.

-Charles
Received on Saturday, 2 April 2011 17:51:46 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:39 GMT