Effects (dojo.lfx) changes
Submitted by dante on Tue, 04/10/2007 - 14:21.
The dojo.Animation module and some basic effects have been moved to dojo base so that they will always be available. The base code includes the following code from dojo.lfx:
Callbacks can be defined either via dojo.connect or as a property of the Animation:
dojo.lfx.Chain/dojo.lfx.chain and dojo.lfx.Combine/dojo.lfx.combine have been replaced by dojo.fx.chain() and dojo.fx.combine() methods.
Other dojo.lfx code is being ported to the new Dojo core and will be renamed to simply dojo.fx. So far, this includes dojo.fx.wipeIn/Out methods and dojo.fx.slideTo.
- dojo.fadeIn()
- dojo.fadeOut()
- dojo.animateProperty - formerly dojo.lfx.propertyAnimation()
var args = {
node: 'pane', // always required
duration: 1000 // always required
properties: { // core of _Animation
opacity: {
start:0.2,
end:0.75
}
}
}; dojo.animateProperty(args).play(); // play it
node: 'pane', // always required
duration: 1000 // always required
properties: { // core of _Animation
opacity: {
start:0.2,
end:0.75
}
}
}; dojo.animateProperty(args).play(); // play it
Callbacks can be defined either via dojo.connect or as a property of the Animation:
var foo = dojo.fadeOut({ node: node, duration:400,
onEnd: function(){ alert('finished playing!'); },
beforeBegin: function(){ alert('starting.'); }
}).play();
// or
var foo = dojo.fadeOut({node: node, duration:400 });
dojo.connect(foo,"onEnd",function(){ alert('finished playing!'); });
dojo.connect(foo,"beforeBegin",function(){ alert('starting.'); });
foo.play();
onEnd: function(){ alert('finished playing!'); },
beforeBegin: function(){ alert('starting.'); }
}).play();
// or
var foo = dojo.fadeOut({node: node, duration:400 });
dojo.connect(foo,"onEnd",function(){ alert('finished playing!'); });
dojo.connect(foo,"beforeBegin",function(){ alert('starting.'); });
foo.play();
dojo.lfx.Chain/dojo.lfx.chain and dojo.lfx.Combine/dojo.lfx.combine have been replaced by dojo.fx.chain() and dojo.fx.combine() methods.
Other dojo.lfx code is being ported to the new Dojo core and will be renamed to simply dojo.fx. So far, this includes dojo.fx.wipeIn/Out methods and dojo.fx.slideTo.
var foo = dojo.fx.slideTo({ node: node, top:'500', left:'200', duration: 1000 }).play();
var wipeIt = dojo.fx.wipeOut({ node: node, duration:1000 }).play();
A Basic Toggle class exists in dojo.fx.Toggler, defaulting to fadeOut for .hide() and wipeIn for .show():
var wipeIt = dojo.fx.wipeOut({ node: node, duration:1000 }).play();
var t = new dojo.fx.Toggler({ node: node,
showDuration: 500, hideDuration:300
}); t.show(); /* time passes */ t.hide();
Other esoteric animations can be found in dojox.fx ... This includes:
showDuration: 500, hideDuration:300
}); t.show(); /* time passes */ t.hide();
- dojox.fx.sizeTo - size a node about it's center, animated
- dojox.fx.easing - a few additional easing functions to affect how an animation Line is calculated
- dojox.fx.addClass/removeClass/toggleClass - experimental CSS animation code. animates the effects of add/remove/toggle'ing a class on a node
- Printer-friendly version
- Login or register to post comments
- Subscribe post
html highlight
The old dojo.lfx.highlight is now:
var anim = dojo.animateProperty({
node: 'theNode',
duration: 1000,
properties: {
backgroundColor: { start:"#ffffff", end: "#ff7" }
}
});
anim.play();
yes, animateProperty is a
yes, animateProperty is a wonderful wrapper, and provided by core. with the exception of Fades, most properties are already normalized, so dojo core (even without dojo.fx) has a lot of potential, and you could easily write your own implementations. the old dojo.lfx.highlight/unhighlight did some checking for backgroundColor prior to starting, etc, but the jist is that if you don't need that normalization, you can just 'do it', or write your own wrapper.
background stays yellow
I am using the new highlight code above, but the node then stays with a yellow background..... I can do this myself but I really liked the old highlight I must say...
yes - i have semi-working
yes - i have semi-working ports of explode/implode and highlight/unhighlight that have limited testing done. implode/explode is particularly nasty. I will check them in as soon as they are ready, but urge people to both a) learn to utilize dojo.animateProperty provided by core, one of the coolest methods in core imho, and the most important wrt to these packaged animations , and b) sign a CLA and start helping port code / write new code. The importance of the community involvement is underestimated by the community sometimes it seems.
My code for fixing new highlight
All right, maybe I can share my highlight code with you:
function highlight(theNode)
{
var bgColor = theNode.style.background;
console.log("bg was " + bgColor);
var anim = dojo.animateProperty(
{
node: theNode,
duration: 750,
properties:
{
backgroundColor: { start:bgColor, end: "#ff7" }
},
onEnd: function(){ theNode.style.background = bgColor; }
});
anim.play();
}
It highlights in a way that the curernt bgColor is taken as start and after the animation is done, puts it back to teh old bgColor.
Cheers\
Sven
---
Sven Haiges
Subscribe to the Grails Podcast: http://hansamann.podspot.de/rss
Skype: hansamann
well, highlight i though was
well, highlight i though was supposed to leave it the color, and unhighlight was supposed to remove it.
Thats why we dont pay you
Thats why we dont pay you for thinking :P j/k
That is correct, hilight makes it stand out (not blinks/flashes it) and unhighlight returns it to normal...
-Karl