YUI Animations in Frames, Not Seconds
I’ve been building an animation-heavy demo here at work using YUI. Initially, I was using the old “give the animation a duration and let the computer figure things out. But, that doesn’t yield a smooth animation: in fact, it can make things kind of choppy, especially if lots of animations are running at the same time.
That’s when I did a little bit of digging into the YUI Animation object, and it’s timing options. I’d noticed the useSeconds flag kicking around, but I’ve never really used it. I gave it a shot, and it’s great.
var b = new YAHOO.util.Anim(ch,{
height: { to: 175 },
opacity: { to: 1.0 },
top: { to: 10 },
width: { to: 175 }
},
.700,
YAHOO.util.Easing.easeOut);
b.setAttribute('useSeconds',false);
b.animate();
We’ve created b, an Animation, and told YUI that we’re not using seconds, we’ll be using frames instead. The .700 in the duration parameter refers to the number of frames that we’d like to use; the decimal is multiplied by 1000. In this case, that gives us .700 x 1000 or 700 frames. We can fudge this value as much as we’d like, getting the exact number of frames we need to make everything super-smooth (761 or 445); you just can’t get this level of detail using time-based animations.
I’ve now got super-smooth animations, right down to the very frame.
