Lorsque j'ai commencé à regarder JavaScript / Ajax, je jouais avec les frameworks prototype et script.aculo.us. Ce que j'aimais dans le framework script.aculo.us est la simplicité de faire de jolies animations, regardez plutôt cette page pour voir des exemples d'animation avec Script.aculo.us : Combination Effects Demo
Depuis je joue avec le framework Microsoft Ajax Library qui fait partie du framework ASP.net Ajax Extensions (aka Atlas). Malheureusement dans ce framework il n'y a rien pour faire des animations. Par contre il y a un projet open-source géré par Microsoft qui rajoute des contrôles et extenders "Ajax" pour ASP.net se basant sur ASP.net Ajax. Parmi ces contrôles, il y a le contrôle animation. Comme son nom l'indique, ce contrôle permet de faire des animations côtés client. L'équipe Atlas ayant décidé de cacher un maximum JavaScript au profit de contrôle serveur drag & dropable (snifff !), on peut créer des animations via une syntaxe XML, le contrôle serveur se charge ensuite de générer du JavaScript.
Mais si vous avez envie de faire des trucs puissant, simplement, et que vous n'avez pas peur de JavaScript, il vous est possible de coder vos animations directement en JavaScript. Tout d'abord il faut importer les différents fichiers JavaScript s'occupant des animations :
<asp:ScriptManager ID="sc1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="AjaxControlToolkit"
Name="AjaxControlToolkit.Common.Common.js" />
<asp:ScriptReference Assembly="AjaxControlToolkit"
Name="AjaxControlToolkit.Compat.Timer.Timer.js" />
<asp:ScriptReference Assembly="AjaxControlToolkit"
Name="AjaxControlToolkit.Animation.Animations.js" />
</Scripts>
</asp:ScriptManager>
var pnl = $get('panelID');
(new $AA.FadeOutAnimation(pnl, 2, 15, 0, 1, true)).play();
Bien sur, on peut avoir des animations beaucoup plus complexe que ça, voici une animation que l'on pourrait trouver sur une boite de login. En cas d'échec la modalpopup devient rouge et est "secoué" en cas de succès elle devient verte, se réduit et disparait.
window.pageLoad = function(){
$addHandler($get('btnSuccess'), 'click', loginSuccess);
$addHandler($get('btnError'), 'click', loginError);
}
var loginError = function(){
var pnl = $get('<%=pnl1.ClientID%>');
(new $AA.SequenceAnimation(pnl, 1, 15, [
new $AA.ColorAnimation(pnl, 0.2, 15, 'style', 'backgroundColor', '#FFFFDD', '#FFAA88'),
new $AA.ColorAnimation(pnl, 0.2, 15, 'style', 'backgroundColor', '#FFAA88', '#FFFFDD')
], 3)).play();
(new $AA.SequenceAnimation(pnl, 1, 15, [
new $AA.MoveAnimation(pnl, 0.01, 15, 5, 0, true, 'px'),
new $AA.MoveAnimation(pnl, 0.01, 15, -5, 0, true, 'px')
], 8)).play();
}
var loginSuccess = function(){
var pnl = $get('<%=pnl1.ClientID%>');
(new $AA.SequenceAnimation(pnl, 1, 15, [
new $AA.ColorAnimation(pnl, 0.5, 15, 'style', 'backgroundColor', '#FFFFDD', '#AAFF88'),
new $AA.ColorAnimation(pnl, 0.5, 15, 'style', 'backgroundColor', '#AAFF88', '#FFFFDD'),
new $AA.ParallelAnimation(pnl, 0.5, 15, [
new $AA.ResizeAnimation(pnl1, 2, 15, 0, 0, 'px'),
new $AA.FadeOutAnimation(pnl, 2, 15, 0, 1, true)
]),
new $AA.FadeOutAnimation($find('<%=mpe1.ClientID%>')._backgroundElement, 0.5, 15, 0, 0.7, false),
new $AA.ScriptAction(pnl, 0, 15, '$find(\'<%=mpe1.ClientID%>\').hide();resetPopup();')
], 1)).play();
}
var resetPopup = function(){
var popup = $find('<%=mpe1.ClientID%>');
var elmt = popup._popupElement;
with (elmt.style){
height = '';
width = '';
top = '';
left = '';
}
$common.setElementOpacity(elmt, 1);
$common.setElementOpacity(popup._backgroundElement, 0.7);
}