PDA

View Full Version : animations?



nofx
12 Sep 2011, 4:44 AM
Hi,

In jQuery it's possible to easily animate a div's height. Going from 100px to 300px in height. I was wondering if this is possible with Sencha Touch aswell?

Couldn't find any info about this.

*edit*

Just tried this, but for setHeight it doesn't animate. The height is set instantly.



Ext.get('a_1').setHeight(200, {
duration: 1000,
easing: 'easeIn'
});

AndreaCammarata
13 Sep 2011, 7:02 AM
Hi nofx.
You can create your custom Ext.Anim to be run on your element in this way:



var animation = new Ext.Anim({
easing: 'easeIn',
duration: 1000,
autoClear: false,
to: {
height: '200px'
}
});

animation.run(Ext.get('a_l'));



Or, alternatively, you can add a CSS class to your element in which you have specified your "-webkit-animation-name".

Hope this helps.

edspencer
13 Sep 2011, 6:45 PM
We have a slightly simplified API for this coming up in 2.x, as well as more framework-level usage of animations

AndreaCammarata
13 Sep 2011, 9:48 PM
We have a slightly simplified API for this coming up in 2.x, as well as more framework-level usage of animations

I just can't wait to see 2.x in action ;)
Will be possible to animate an element in ExtJS4 way?





var p1 = Ext.get('a_1);

p1.animate({
easing: 'easeIn',
duration: 1000,
to: {
height: '200px'
}
});

That would be great!

edspencer
13 Sep 2011, 10:06 PM
Something a lot like that yes. It's very powerful and way better performing on Android than 1.x used to be. Can't wait to share it with you guys

steve1964
14 Sep 2011, 12:49 AM
Hi Ed, will code developed with 1.1.0 run as is on 2.0?

edspencer
14 Sep 2011, 8:39 AM
Hi Ed, will code developed with 1.1.0 run as is on 2.0?

Largely, but you will need to make some modifications. We've put a lot of effort into backwards compatibility - it will route old APIs through to new ones and give you warnings on the console when you're using deprecated APIs, but as with an major release there will be some changes required. We have a tool that generates a complete diff in the public API between any two versions, so will open up that diff to you when we launch

mvoss
6 Nov 2011, 4:31 AM
Hi,

I have tried to use the animation code from above on a panel. A floating panel. But I get the error:

null is not an object (evaluating el.dom)

can this not be used on a panel?

Here is my code:


<html>
<head>
<title>test</title>

<link rel="stylesheet" href="sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="sencha-touch-1.1.0/sencha-touch-debug.js"></script>


<script type="text/javascript">



Ext.setup({
onReady: function() {

var button = new Ext.Button({
text: "Click me",
handler: buttonClick
});

mainPnl = new Ext.Panel({
layout:"fit",
fullscreen: true,
dockedItems:{
xtype:'toolbar',
dock:'top',
items:[button]
}
});

floatPanel = new Ext.Panel({
layout:"card",
floating: true,
width: 200,
height: 500,
dockedItems:{
xtype:'toolbar',
dock:'top',
items:{xtype:'button', text:'Click for anmi', handler:doAnim}
}
});


function buttonClick() {
floatPanel.showBy(button, 'fade');
}

function doAnim() {
var animation = new Ext.Anim({
easing: 'easeIn',
duration: 1000,
autoClear: false,
to: {
height: '200px'
}
});

animation.run(floatPanel);
}

}
});



</script>

</head>
<body></body>
</html>

AndreaCammarata
7 Nov 2011, 1:39 AM
Hi,

I have tried to use the animation code from above on a panel. A floating panel. But I get the error:

null is not an object (evaluating el.dom)

can this not be used on a panel?

Here is my code:


<html>
<head>
<title>test</title>

<link rel="stylesheet" href="sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="sencha-touch-1.1.0/sencha-touch-debug.js"></script>


<script type="text/javascript">



Ext.setup({
onReady: function() {

var button = new Ext.Button({
text: "Click me",
handler: buttonClick
});

mainPnl = new Ext.Panel({
layout:"fit",
fullscreen: true,
dockedItems:{
xtype:'toolbar',
dock:'top',
items:[button]
}
});

floatPanel = new Ext.Panel({
layout:"card",
floating: true,
width: 200,
height: 500,
dockedItems:{
xtype:'toolbar',
dock:'top',
items:{xtype:'button', text:'Click for anmi', handler:doAnim}
}
});


function buttonClick() {
floatPanel.showBy(button, 'fade');
}

function doAnim() {
var animation = new Ext.Anim({
easing: 'easeIn',
duration: 1000,
autoClear: false,
to: {
height: '200px'
}
});

animation.run(floatPanel);
}

}
});



</script>

</head>
<body></body>
</html>

Hi mvoss.
Animations can be runned only on Ext.Element objects, that's why your code doesn't work: you are trying to run your custom animation on an Ext.Component object.

However, to see your animation in action on your floating panel, you should write



animation.run(floatPanel.getEl());


The "getEl()" function in fact, allows you to get the Ext.Element object associated to your floating panel, so your application will works without problems.

The only problem that you will notice is that your floating panel is resized, but its body is not.
This happen because you can run an animation only on a single Ext.Element at a time, for this reason, you should run the animation even on the floating panel body (with a different animation height value)



animation.run(floatPanel.body);


Hope this helps.

mvoss
10 Nov 2011, 11:10 AM
thank you for your answer. It works with your code. In my actual application I have a list inside my floating panel (a menu). I guess I have to run the same pair of animations on the list. Unfortunately the performance on an iPad2 with iOS5 is not very good. Is Sencha Touch using css3 hardware accelerated animations for this? Is the performance in ST 2.0 going to be better with regards to animations?

Regards,
Markus

Jacky Nguyen
10 Nov 2011, 3:52 PM
I just can't wait to see 2.x in action ;)
Will be possible to animate an element in ExtJS4 way?





var p1 = Ext.get('a_1);

p1.animate({
easing: 'easeIn',
duration: 1000,
to: {
height: '200px'
}
});

That would be great!

As of Touch 2.0 DP, the API for animation looks like this:



var p1 = Ext.get('a_1);

Ext.Animator.run({
element: p1,
easing: 'ease-in',
duration: 1000,
from: {
height: 200
},
to: {
height: 500
}
});


You can also animate multiple elements concurrently, simply pass an array of objects to Ext.Animator.run, for example:



Ext.Animator.run([
{
element: p1,
easing: 'ease-in',
duration: 1000,
from: {
height: 200
},
to: {
height: 500
}
},
{
element: p2,
easing: 'ease-out',
duration: 2000,
from: {
'background-color': 'red',
width: 100
},
to: {
'background-color': 'blue',
width: 200
}
}
]);


Just keep in mind we haven't reached beta yet, so the API is still subject to change.

lylepratt
15 Jan 2012, 8:01 AM
Is there any obvious way to animate things to their natural heights? Say I have a panel thats set to be "50px" with the majority of it's height hidden. Then I want to animate it too its full height. I tried setting it to "100%" and "auto" but neither worked.