X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/docs/output/Ext.util.Animate.js diff --git a/docs/output/Ext.util.Animate.js b/docs/output/Ext.util.Animate.js new file mode 100644 index 00000000..9f8f5338 --- /dev/null +++ b/docs/output/Ext.util.Animate.js @@ -0,0 +1,198 @@ +Ext.data.JsonP.Ext_util_Animate({ + "tagname": "class", + "name": "Ext.util.Animate", + "doc": "
This animation class is a mixin.
\n\nExt.util.Animate provides an API for the creation of animated transitions of properties and styles.
\nThis class is used as a mixin and currently applied to Ext.core.Element, Ext.CompositeElement,\nExt.draw.Sprite, Ext.draw.CompositeSprite, and Ext.Component. Note that Components\nhave a limited subset of what attributes can be animated such as top, left, x, y, height, width, and\nopacity (color, paddings, and margins can not be animated).
All animations require three things - easing
, duration
, and to
(the final end value for each property)\nyou wish to animate. Easing and duration are defaulted values specified below.\nEasing describes how the intermediate values used during a transition will be calculated.\nEasing allows for a transition to change speed over its duration.\nYou may use the defaults for easing and duration, but you must always set a\nto property which is the end value for all animations.
Popular element 'to' configurations are:
\n\nPopular sprite 'to' configurations are:
\n\nThe default duration for animations is 250 (which is a 1/4 of a second). Duration is denoted in\nmilliseconds. Therefore 1 second is 1000, 1 minute would be 60000, and so on. The default easing curve\nused for all animations is 'ease'. Popular easing functions are included and can be found in Easing.
\n\nFor example, a simple animation to fade out an element with a default easing and duration:
\n\nvar p1 = Ext.get('myElementId');\n\np1.animate({\n to: {\n opacity: 0\n }\n});\n
\n\nTo make this animation fade out in a tenth of a second:
\n\nvar p1 = Ext.get('myElementId');\n\np1.animate({\n duration: 100,\n to: {\n opacity: 0\n }\n});\n
\n\nBy default all animations are added to a queue which allows for animation via a chain-style API.\nFor example, the following code will queue 4 animations which occur sequentially (one right after the other):
\n\np1.animate({\n to: {\n x: 500\n }\n}).animate({\n to: {\n y: 150\n }\n}).animate({\n to: {\n backgroundColor: '#f00' //red\n }\n}).animate({\n to: {\n opacity: 0\n }\n});\n
\n\nYou can change this behavior by calling the syncFx method and all\nsubsequent animations for the specified target will be run concurrently (at the same time).
\n\np1.syncFx(); //this will make all animations run at the same time\n\np1.animate({\n to: {\n x: 500\n }\n}).animate({\n to: {\n y: 150\n }\n}).animate({\n to: {\n backgroundColor: '#f00' //red\n }\n}).animate({\n to: {\n opacity: 0\n }\n});\n
\n\nThis works the same as:
\n\np1.animate({\n to: {\n x: 500,\n y: 150,\n backgroundColor: '#f00' //red\n opacity: 0\n }\n});\n
\n\nThe stopAnimation method can be used to stop any\ncurrently running animations and clear any queued animations.
\n\nYou can also set up complex animations with keyframe which follows the\nCSS3 Animation configuration pattern. Note rotation, translation, and scaling can only be done for sprites.\nThe previous example can be written with the following syntax:
\n\np1.animate({\n duration: 1000, //one second total\n keyframes: {\n 25: { //from 0 to 250ms (25%)\n x: 0\n },\n 50: { //from 250ms to 500ms (50%)\n y: 0\n },\n 75: { //from 500ms to 750ms (75%)\n backgroundColor: '#f00' //red\n },\n 100: { //from 750ms to 1sec\n opacity: 0\n }\n }\n});\n
\n\nEach animation you create has events for beforeanimation,\nafteranimate, and lastframe.
\nKeyframed animations adds an additional keyframe event which\nfires for each keyframe in your animation.
All animations support the listeners configuration to attact functions to these events.
\n\nstartAnimate: function() {\n var p1 = Ext.get('myElementId');\n p1.animate({\n duration: 100,\n to: {\n opacity: 0\n },\n listeners: {\n beforeanimate: function() {\n // Execute my custom method before the animation\n this.myBeforeAnimateFn();\n },\n afteranimate: function() {\n // Execute my custom method after the animation\n this.myAfterAnimateFn();\n },\n scope: this\n });\n},\nmyBeforeAnimateFn: function() {\n // My custom logic\n},\nmyAfterAnimateFn: function() {\n // My custom logic\n}\n
\n\nDue to the fact that animations run asynchronously, you can determine if an animation is currently\nrunning on any target by using the getActiveAnimation\nmethod. This method will return false if there are no active animations or return the currently\nrunning Ext.fx.Anim instance.
\n\nIn this example, we're going to wait for the current animation to finish, then stop any other\nqueued animations before we fade our element's opacity to 0:
\n\nvar curAnim = p1.getActiveAnimation();\nif (curAnim) {\n curAnim.on('afteranimate', function() {\n p1.stopAnimation();\n p1.animate({\n to: {\n opacity: 0\n }\n });\n });\n}\n
\n",
+ "extends": null,
+ "mixins": [
+
+ ],
+ "alternateClassNames": [
+
+ ],
+ "xtype": null,
+ "author": null,
+ "docauthor": "Jamie Avins Perform custom animation on this object.
\n
This method is applicable to both the the Component class and the Element class.\nIt performs animated transitions of certain properties of this object over a specified timeline.
\nThe sole parameter is an object which specifies start property values, end property values, and properties which\ndescribe the timeline. Of the properties listed below, only to
is mandatory.
Properties include
from
to
duration
easing
\n- ease
\n- easeIn
\n- easeOut
\n- easeInOut
\n- backIn
\n- backOut
\n- elasticIn
\n- elasticOut
\n- bounceIn
\n- bounceOut
\n
keyframes
listeners
beforeanimate
event or the afteranimate
event.from
, to
, and keyframe
objects:x
y
left
left
value. Units must be supplied.top
top
value. Units must be supplied.width
width
value. Units must be supplied.height
height
value. Units must be supplied.scrollLeft
scrollLeft
value.scrollTop
scrollLeft
value.opacity
opacity
value. This must be a value between 0
and 1
.Be aware than animating an Element which is being used by an Ext Component without in some way informing the Component about the changed element state\nwill result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to\ndirectly animate certain properties of Components.
\nfrom
, to
, and keyframe
objects:x
y
left
left
value in pixels.top
top
value in pixels.width
width
value in pixels.width
width
value in pixels.dynamic
For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct:
\nmyWindow = Ext.create('Ext.window.Window', {\n title: 'Test Component animation',\n width: 500,\n height: 300,\n layout: {\n type: 'hbox',\n align: 'stretch'\n },\n items: [{\n title: 'Left: 33%',\n margins: '5 0 5 5',\n flex: 1\n }, {\n title: 'Left: 66%',\n margins: '5 5 5 5',\n flex: 2\n }]\n});\nmyWindow.show();\nmyWindow.header.el.on('click', function() {\n myWindow.animate({\n to: {\n width: (myWindow.getWidth() == 500) ? 700 : 500,\n height: (myWindow.getHeight() == 300) ? 400 : 300,\n }\n });\n});\n
\nFor performance reasons, by default, the internal layout is only updated when the Window reaches its final \"to\"
size. If dynamic updating of the Window's child\nComponents is required, then configure the animation with dynamic: true
and the two child items will maintain their proportions during the animation.
An object containing properties which describe the animation's start and end states, and the timeline of the animation.
\n", + "optional": false + } + ], + "return": { + "type": "Object", + "doc": "this
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/extjs/src/util/Animate.js", + "linenr": 207, + "html_filename": "Animate.html", + "href": "Animate.html#Ext-util-Animate-method-animate", + "shortDoc": "Perform custom animation on this object.\nThis method is applicable to both the the Component class and the Element cl..." + }, + { + "tagname": "method", + "name": "getActiveAnimation", + "member": "Ext.util.Animate", + "doc": "Returns thq current animation if this object has any effects actively running or queued, else returns false.
\n", + "params": [ + + ], + "return": { + "type": "Mixed", + "doc": "anim if element has active effects, else false
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/extjs/src/util/Animate.js", + "linenr": 377, + "html_filename": "Animate.html", + "href": "Animate.html#Ext-util-Animate-method-getActiveAnimation", + "shortDoc": "Returns thq current animation if this object has any effects actively running or queued, else returns false.
\n" + }, + { + "tagname": "method", + "name": "hasActiveFx", + "member": "Ext.util.Animate", + "doc": "@deprecated 4.0 Replaced by getActiveAnimation\nReturns thq current animation if this object has any effects actively running or queued, else returns false.
\n", + "params": [ + + ], + "return": { + "type": "Mixed", + "doc": "anim if element has active effects, else false
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/extjs/src/util/Animate.js", + "linenr": 369, + "html_filename": "Animate.html", + "href": "Animate.html#Ext-util-Animate-method-hasActiveFx", + "shortDoc": "@deprecated 4.0 Replaced by getActiveAnimation\nReturns thq current animation if this object has any effects actively ..." + }, + { + "tagname": "method", + "name": "sequenceFx", + "member": "Ext.util.Animate", + "doc": "Ensures that all effects queued after sequenceFx is called on this object are\nrun in sequence. This is the opposite of syncFx.
\n", + "params": [ + + ], + "return": { + "type": "Object", + "doc": "this
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/extjs/src/util/Animate.js", + "linenr": 357, + "html_filename": "Animate.html", + "href": "Animate.html#Ext-util-Animate-method-sequenceFx", + "shortDoc": "Ensures that all effects queued after sequenceFx is called on this object are\nrun in sequence. This is the opposite ..." + }, + { + "tagname": "method", + "name": "stopAnimation", + "member": "Ext.util.Animate", + "doc": "Stops any running effects and clears this object's internal effects queue if it contains\nany additional effects that haven't started yet.
\n", + "params": [ + + ], + "return": { + "type": "Ext.core.Element", + "doc": "The Element
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/extjs/src/util/Animate.js", + "linenr": 335, + "html_filename": "Animate.html", + "href": "Animate.html#Ext-util-Animate-method-stopAnimation", + "shortDoc": "Stops any running effects and clears this object's internal effects queue if it contains\nany additional effects that ..." + }, + { + "tagname": "method", + "name": "stopFx", + "member": "Ext.util.Animate", + "doc": "@deprecated 4.0 Replaced by stopAnimation\nStops any running effects and clears this object's internal effects queue if it contains\nany additional effects that haven't started yet.
\n", + "params": [ + + ], + "return": { + "type": "Ext.core.Element", + "doc": "The Element
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/extjs/src/util/Animate.js", + "linenr": 326, + "html_filename": "Animate.html", + "href": "Animate.html#Ext-util-Animate-method-stopFx", + "shortDoc": "@deprecated 4.0 Replaced by stopAnimation\nStops any running effects and clears this object's internal effects queue i..." + }, + { + "tagname": "method", + "name": "syncFx", + "member": "Ext.util.Animate", + "doc": "Ensures that all effects queued after syncFx is called on this object are\nrun concurrently. This is the opposite of sequenceFx.
\n", + "params": [ + + ], + "return": { + "type": "Object", + "doc": "this
\n" + }, + "private": false, + "static": false, + "filename": "/Users/nick/Projects/sencha/SDK/extjs/src/util/Animate.js", + "linenr": 345, + "html_filename": "Animate.html", + "href": "Animate.html#Ext-util-Animate-method-syncFx", + "shortDoc": "Ensures that all effects queued after syncFx is called on this object are\nrun concurrently. This is the opposite of ..." + } + ], + "property": [ + + ], + "event": [ + + ], + "filename": "/Users/nick/Projects/sencha/SDK/extjs/src/util/Animate.js", + "linenr": 1, + "html_filename": "Animate.html", + "href": "Animate.html#Ext-util-Animate", + "cssVar": [ + + ], + "cssMixin": [ + + ], + "component": false, + "superclasses": [ + + ], + "subclasses": [ + + ], + "mixedInto": [ + "Ext.AbstractComponent", + "Ext.draw.CompositeSprite", + "Ext.draw.Sprite" + ], + "allMixins": [ + + ] +}); \ No newline at end of file