New effect for the Actor class

[Animal]

I just came up with the requirement to highlight a certain element, like "click this", or "this might be what you're looking for".

So here's a method I whipped up for the Actor class.



/**
* Show a ripple of exploding, attenuating borders to draw attention to an Element.
* @param {Number[i]} color (optional) The color of the border.
* @param {[i]Number} count (optional) How many ripples.
* @param {Float} duration (optional) How long each ripple takes to expire
*/
YAHOO.ext.Actor.prototype.explode = function(color, count, duration){
color = color || "red";
count = count || 3;
var box = this.getBox();

// Build a function to animate an exploding, attenuating border
var explodeFn = function()
{
if (count <= 0)
return;
var explodeProxy = new YAHOO.ext.Actor(YAHOO.ext.DomHelper.append(document.body,
{
tag:"div",
style:
{
visbility:"hidden",
position:"absolute",
zIndex:this.getStyle("zIndex"),
border:"0px solid " + color
}
}));

explodeProxy.animate(
{
top:{from:box.y, to:box.y - 20},
left:{from:box.x, to:box.x - 20},
borderWidth:{from:0, to:10},
opacity:{from:1, to:0},
height:{from:box.height, to:(box.height + 20)},
width:{from:box.width, to:(box.width + 20)}
}, duration || 0.5, function()
{
explodeProxy.dom.parentNode.removeChild(explodeProxy.dom);
});
if (--count > 0)
setTimeout(explodeFn, 250);
}.createDelegate(this);
explodeFn(count || 3);
}


Worth adding?

[jack.slocum]

I like it a lot. I made a few changes to make it work with sequenced/synchronized animations and border-box IE6 and IE7. This code relies on the latest dev code so you won't actually be able to use this version yet. :( I changed createProxy to take either className (like before) or a DomHelper config (new). I also change addAsyncCall and addCall to execute immediately if the Actor is not capturing. I also named it "frame" instead of explode but that's just my preference. I can alias it if you want. Here's the changed code with notes:


YAHOO.ext.Actor.prototype.frame = function(color, count, duration){
color = color || "#cccccc";
count = count || 3;
duration = duration || .5;
var frameFn = function(callback){
var box = this.getBox(); // get the box at the time of the animation in case it was changed
var animFn = function(){
var proxy = this.createProxy({
tag:"div",
style:{
visbility:"hidden",
position:"absolute",
zIndex:this.getStyle("zIndex"),
border:"0px solid " + color
}
});
var scale = proxy.isBorderBox() ? 2 : 1; // fix for border-box IE
proxy.animate({
top:{from:box.y, to:box.y - 20},
left:{from:box.x, to:box.x - 20},
borderWidth:{from:0, to:10},
opacity:{from:1, to:0},
height:{from:box.height, to:(box.height + (20*scale))},
width:{from:box.width, to:(box.width + (20*scale))}
}, duration, function(){
proxy.remove();
});
if(--count > 0){
animFn.defer((duration/2)*1000, this); // make it work right with different duration
// new defer fn with scope (and optional args)
}else{
if(typeof callback == 'function'){
callback(); // add callback so it works in sequences
}
}
}
animFn.call(this);
}
this.addAsyncCall(frameFn, 0, null, this); // queue it in the playlist
};

If you want a copy of the latest dev code to test my changes, let me know. I really like this one though, I can see many uses for it.

[Animal]

That's OK, it's a good name for it. I'm glad you "slocumed" it (slocum, v. "improve", or "enhance").

I'll rename mine, and just use the new version when it's released.

[zquirm]

Animal, do you have an example of this online so I could see what it looks like. I suppose I could try it myself...but I thought I'd ask if you had an example up anywhere.

thanks.

[jack.slocum]

Haha Animal, that's funny.

zquirm, it will be in the next build (with other required changes). Builds come quick. :)

[Animal]

No, but if you add my code to a page which has yui-ext in it, just add

new YAHOO.ext.Actor(<idOfAnElement>).explode();

and you'll see some blue "ripples" expanding from that element;

Come to think of it, I was originally thinking about XP's way of drawing attention to the mouse pointer (press and release Ctrl), but I've just looked at that, and the ripples "implode" towards the pointer.

Perhaps frame() should be able to optionally work in reverse, "guiding" the eye towards a central location.

[jack.slocum]

How do you get the mouse highlight effect in XP?

[Animal]

Control Panel->Mouse->Pointer Options

Check the "Show location of pointer when I press the CTRL key" checkbox.

From then on a tap of the CTRL button show you where your mouse poiter is in case you "lost" it.

[jack.slocum]

Wow, that's hideous. I like your way better!