PDA

View Full Version : New effect for the Actor class



Animal
11 Nov 2006, 9:12 AM
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
11 Nov 2006, 5:36 PM
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
11 Nov 2006, 11:04 PM
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
12 Nov 2006, 1:42 AM
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
12 Nov 2006, 5:07 AM
Haha Animal, that's funny.

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

Animal
12 Nov 2006, 5:16 AM
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
12 Nov 2006, 5:31 AM
How do you get the mouse highlight effect in XP?

Animal
12 Nov 2006, 6:19 AM
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
12 Nov 2006, 6:46 AM
Wow, that's hideous. I like your way better!