PDA

View Full Version : Create a CSS3 animation with Ext.js.Animator



explo91
14 Oct 2013, 2:41 AM
Hi,

I want to create a CSS3 animation when I click on an image.
I see that the Class Ext.js.Animator (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.fx.Animator) is what exactly i need !

I want to use the CSS3 transform property to perform a scale but without success !

My code (I added the image click event extending Ext.Img):


Ext.create('Ego.ux.Img', {
src: record.get('file'),
listeners: {
'click': function() {
console.log('clicked');
Ext.create('Ext.fx.Animator', {
target : this,
duration : 10000, // 10 seconds
keyframes : {
0 : {
transform: 'scale(0.1)'
},
20 : {
transform: 'scale(0.2)'
},
40 : {
transform: 'scale(0.4)'
},
70 : {
transform: 'scale(0.8)'
},
100 : {
transform: 'scale(1)'
}
}
});
}
}
});

The code above run correctly if i replace transform with opacity for example.

I have also a question: the css generated add css rules with prefix for each browsers like :
-moz-transform, -ms-transform - webkit-transform ?

Could you help me ?

explo91
15 Oct 2013, 4:50 AM
After searches, it appears that we can use rotation / translation / scaling only for sprites
Also, we don't specify css attributes like i did.

The code below do the expected behavior:


var image = Ext.create('Ext.draw.Component', {
width : 200,
height : 200,
items : [
{
type : 'image',
src : record.get('file'),
width : 200,
height : 200,
listeners: {
'click': function() {
this.animate({
duration : 5000,
from: {
scale: {
x: 0.1,
y: 0.1
}
},
to: {
scale: {
x: 10,
y: 10
}
}
});
}
}
}
]
});


Another thing is that the config easing: 'cubic-bezier(x1, y1, x2, y2)' seems to not work.
Anyone has used this easing config (extjs 4.2.2) ?

Gary Schlosberg
19 Oct 2013, 11:30 AM
Glad to hear you found a solution. Regarding the 'cubic-bezier' setting for the 'easing' config, are all four values between zero and one?



Note that cubic-bezier will create a custom easing curve following the CSS3 transition-timing-function (http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag) specification. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must be in the range [0, 1] or the definition is invalid.

explo91
21 Oct 2013, 1:24 AM
Yes, my four values were in range [0,1], but i do not really need a cubic-bezier easing config for the moment.

This post can be marked as answered. Thx.