|
|
Ext.fx Namespace
Download SDK: SharpKit.ExtJs.zip
Classes
|
Anim
|
This class manages animation for a specific target. The animation allows
animation of various properties on the target, such as size, position, color and others. Starting Conditions The starting conditions for the animation are provided by the from configuration.
Any/all of the properties in the from configuration can be specified. If a particular
property is not defined, the starting value for that property will be read directly from the target. End Conditions The ending conditions for the animation are provided by the to configuration. These mark
the final values once the animations has finished. The values in the from can mirror
those in the to configuration to provide a starting point. Other Options duration: Specifies the time period of the animation. easing: Specifies the easing of the animation. iterations: Allows the animation to repeat a number of times. alternate: Used in conjunction with iterations, reverses the direction every second iteration. Example Code var myComponent = Ext.create('Ext.Component', {
renderTo: document.body,
width: 200,
height: 200,
style: 'border: 1px solid red;'
});
new Ext.fx.Anim({
target: myComponent,
duration: 1000,
from: {
width: 400 //starting width 400
},
to: {
width: 300, //end width 300
height: 300 // end width 300
}
});
|
|
|
Animator
|
Animation instance This class is used to run keyframe based animations, which follows the CSS3 based animation structure.
Keyframe animations differ from typical from/to animations in that they offer the ability to specify values
at various points throughout the animation. Using Keyframes
The keyframes option is the most important part of specifying an animation when using this
class. A key frame is a point in a particular animation. We represent this as a percentage of the
total animation duration. At each key frame, we can specify the target values at that time. Note that
you must specify the values at 0% and 100%, the start and ending values. There is also a keyframe
event that fires after each key frame is reached. Example Usage
In the example below, we modify the values of the element at each fifth throughout the animation. Ext.create('Ext.fx.Animator', {
target: Ext.getBody().createChild({
style: {
width: '100px',
height: '100px',
'background-color': 'red'
}
}),
duration: 10000, // 10 seconds
keyframes: {
0: {
opacity: 1,
backgroundColor: 'FF0000'
},
20: {
x: 30,
opacity: 0.5
},
40: {
x: 130,
backgroundColor: '0000FF'
},
60: {
y: 80,
opacity: 0.3
},
80: {
width: 200,
y: 200
},
100: {
opacity: 1,
backgroundColor: '00FF00'
}
}
});
|
|
|
AnimatorConfig
|
|
|
|
AnimatorEvents
|
|
|
|
AnimConfig
|
|
|
|
AnimEvents
|
|
|
|
Easing
|
This class contains a series of function definitions used to modify values during an animation.
They describe how the intermediate values used during a transition will be calculated. It allows for a transition to change
speed over its duration. The following options are available: linear The default easing type backIn backOut bounceIn bounceOut ease easeIn easeOut easeInOut elasticIn elasticOut cubic-bezier(x1, y1, x2, y2) Note that cubic-bezier will create a custom easing curve following the CSS3 transition-timing-function
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.
|
|
|
EasingConfig
|
|
|
|
EasingEvents
|
|
|
SharpKit.AspNetAjax
Ext