CSS3 provides an ability for creating animations by
gradually changing a style of an element. Any number of styles can be changed
during a transition and there could be any number of transitions composing an
animation. Animations in CC3 are created by specifying the “to” and “from”
values or the @keyframe rule. With the @keyframe rule we define the steps
starting from 0% and ending at 100 %. To be browser compatible, both 0% and
100% should be defined.
ExtJS has built-in classes to create animations using the
CCS3 conventions. The two classes providing this functionality are Ext.fx.Anim
and Ext.fx.Animator. Ext.fx.Anim accepts the “keyframes” configuration and
passes the work to the Ext.fx.Animator . Following is an example of a simple
animation using Ext.fx.Anim and keyframes. The keyframe event generated
at each transition will log a current step’s number. While this is might not be a real life example, a similar
animation could potentially be used to alert users that a record is being
edited by someone else at the same time and give them choices on the next
course of action .
JSFiddle: http://jsfiddle.net/qPFf2/10/
var myComponent = Ext.create('Ext.panel.Panel',{
renderTo: Ext.getBody(),
width: 270,
itemId: 'myPanel',
style: {
width: '10px',
height: '10px',
'background-color': '#5687FF'
},
defaultType: 'textfield',
items: [{
fieldLabel:
'First Name'
}, {
fieldLabel: 'Last
Name'
}]
});
Ext.create('Ext.fx.Anim', {
target: myComponent.getEl(),
duration: 8000,
keyframes : {
'0%': {
opacity: 0.6
},
'60%': {
x: 120,
y: 120,
opacity: 1
},
'80%': {
},
'100%': {
x: 0,
y: 0,
opacity: 0
}
},
listeners: {
keyframe:
function(o, n) {
console.log('transition:', n);
}
}
});
More information about Ext.fx.Anim can be found at the Sencha's site.
No comments:
Post a Comment