Jul 27
Cleanup of manual animation via Dojo Animation
Bespin, JavaScript, Tech with tags: animation, dojo
Add comments
When posting on the Bespin Pie back in the day, I showed the Dojo animation code that we used to fake out our canvas pie animation:
var anim = dojo.fadeIn({ node: { // fake it out for Dojo to think it is changing the style :) style: {} }, duration: 500, easing: dojo.fx.easing.backOut, onAnimate: function(values) { var progress = values.opacity; renderPie(progress); } }).play();
Pete Higgin’s hinted that we should cleanup this hack (asking to do the opacity and then getting the value back out) and finally (due to a weird bug in a WebKit nightly that gave me reason to poke) I cleaned it up:
new dojo._Animation({ duration: 500, easing: dojo.fx.easing.backOut, curve: [0.0, 1.0], onAnimate: renderPie }).play();
I am sure there is an easier way too!
FYI, the “pie” is finally a pie menu in tip, which will make its way to a Bespin version push soon with functionality we have been dying to get in production since the initial prototype.
July 27th, 2009 at 2:19 pm
Sure, that callback as is is redundant ;-)
new dojo._Animation({
duration: 500,
easing: dojo.fx.easing.backOut,
curve: [0.0, 1.0],
onAnimate:renderPie
}).play();
July 27th, 2009 at 2:25 pm
Ah nice, fixed. In the real code it is actually doing a bit more….
Thanks Andrea :)
July 27th, 2009 at 2:40 pm
Well, at this point I guess that’s the cleanest/best way and a nice one. This kind of fx is in any case a common one, so the only thing I could think about is an extension with a parameter for the image in order to spinIn and spinOut the image adding every other callback implementable.
P.S. I had an absolutely weird behavior with FF3.5 and only the first time when the image entered starting from a different angle (less than zero) and I could even notice different fillRect colors as squares … silly of me not a shot, sorry for that!
July 27th, 2009 at 6:12 pm
Nice.
This is exactly what I had in mind when I’d suggested it. I had meant for you to simply remind me to send in a patch, but you seem to have done just fine.
Just as a note, dojo._Animation is private in 1.0 – 1.3, but in 1.4 will be exposed as dojo.Animation (with an alias to preserve backwards compatibility, in typical Dojo style)
You have an extra } in _Animation block, fwiw.
Regards