- From: Charles Pritchard <chuck@jumis.com>
- Date: Sat, 02 Apr 2011 10:51:19 -0700
- 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 UTC