PDA

View Full Version : Animate Ext.Window for bouncing and easing



rtillian
2 Apr 2011, 4:40 AM
Hi,
it is easy to animate Ext.Window using animateTarget: 'div-x' like here:


var win;
var newWindow = function( btn ) {
if( !win ) {
win = new Ext.Window({
animateTarget: btn.el,
html: 'I am an Window',
closeAction: 'hide',
id : 'iam',
height: 100,
width: 300,
contrain: true,
});
}
win.show();
}
new Ext.Button( {
renderTo: Ext.getBody(),
text: 'open me',
handler: newWindow
});Now I want to let the window animate more, in a way like lets say:

win.show()
Ext.get('div-x').shift({ x:150, y:250, duration: 2, easing: 'backOut' });
works partially: after win.show() the windows opens at x/y 100/100 and after that it shifts to 150/250 - okay, but leaves the shadow at 100/100.

Tried to find the "shadow" but did not succeed.
Any idea?

rtillian
2 Apr 2011, 1:08 PM
Could help myself. As the window shifts and the shadow remains you have to shift the shadow too. Here ist the solution including everything.



<html>
<head>
<title>Animation Window</title>
<link rel="stylesheet" type="text/css" href="/ext-3.3.0/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext-3.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-3.3.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function(){

var animo_normal = function () {
// Shift the shadow with easing, 10 Pixels more, because of
// shadow-offset
win.el.shadow.el.shift({ x:160, y:260, duration: 1, easing: 'backOut' });
}
var animo_shadow_follows1 = function () {
win.el.shadow.el.shift({ x:160, y:260, duration: 1.1, easing: 'backOut' });
}
var animo_shadow_follows2 = function () {
win.el.shadow.el.shift({ x:160, y:260, duration: 1.4, easing: 'backOut' });
}
var animo_shadow_bounces = function () {
win.el.shadow.el.shift({ x:160, y:260, duration: 1, easing: 'bounceOut' });
}
var win;
var newWindow = function( btn ) {
if( !win ) {
win = new Ext.Window({
html: '<h1>I am a Window</h1><br>please close me to retry...',
shadow: true,
shadowOffset: 10,
closeAction: 'hide',
height: 100,
width: 300,
x:-310,
y:-110,
});
}
win.show();
// Shift the window with easing
win.el.shift({ x:150, y:250, duration: 1, easing: 'backOut' });
animo_normal();
//animo_shadow_follows1();
//animo_shadow_follows2();
//animo_shadow_bounces();

}
new Ext.Button( {
renderTo: Ext.getBody(),
text: 'open me',
handler: newWindow
});
Depending on what function among
animo_normal(),
animo_shadow_follows1(),
animo_shadow_follows2(),
animo_shadow_bounces()
you choose, the window - no, the shadow - will act differently.

The window begin position lies outside the visible area so you get the impression that the windows flys into the scene from outside.