PageRenderTime 244ms CodeModel.GetById 22ms RepoModel.GetById 3ms app.codeStats 0ms

/ext-4.0.7/docs/source/Anim.html

https://bitbucket.org/srogerf/javascript
HTML | 471 lines | 428 code | 43 blank | 0 comment | 0 complexity | 938739b3369adaad6d2206a97a9d9616 MD5 | raw file
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-fx-Anim'>/**
  19. </span> * @class Ext.fx.Anim
  20. *
  21. * This class manages animation for a specific {@link #target}. The animation allows
  22. * animation of various properties on the target, such as size, position, color and others.
  23. *
  24. * ## Starting Conditions
  25. * The starting conditions for the animation are provided by the {@link #from} configuration.
  26. * Any/all of the properties in the {@link #from} configuration can be specified. If a particular
  27. * property is not defined, the starting value for that property will be read directly from the target.
  28. *
  29. * ## End Conditions
  30. * The ending conditions for the animation are provided by the {@link #to} configuration. These mark
  31. * the final values once the animations has finished. The values in the {@link #from} can mirror
  32. * those in the {@link #to} configuration to provide a starting point.
  33. *
  34. * ## Other Options
  35. * - {@link #duration}: Specifies the time period of the animation.
  36. * - {@link #easing}: Specifies the easing of the animation.
  37. * - {@link #iterations}: Allows the animation to repeat a number of times.
  38. * - {@link #alternate}: Used in conjunction with {@link #iterations}, reverses the direction every second iteration.
  39. *
  40. * ## Example Code
  41. *
  42. * @example
  43. * var myComponent = Ext.create('Ext.Component', {
  44. * renderTo: document.body,
  45. * width: 200,
  46. * height: 200,
  47. * style: 'border: 1px solid red;'
  48. * });
  49. *
  50. * Ext.create('Ext.fx.Anim', {
  51. * target: myComponent,
  52. * duration: 1000,
  53. * from: {
  54. * width: 400 //starting width 400
  55. * },
  56. * to: {
  57. * width: 300, //end width 300
  58. * height: 300 // end width 300
  59. * }
  60. * });
  61. */
  62. Ext.define('Ext.fx.Anim', {
  63. /* Begin Definitions */
  64. mixins: {
  65. observable: 'Ext.util.Observable'
  66. },
  67. requires: ['Ext.fx.Manager', 'Ext.fx.Animator', 'Ext.fx.Easing', 'Ext.fx.CubicBezier', 'Ext.fx.PropertyHandler'],
  68. /* End Definitions */
  69. isAnimation: true,
  70. <span id='Ext-fx-Anim-cfg-callback'> /**
  71. </span> * @cfg {Function} callback
  72. * A function to be run after the animation has completed.
  73. */
  74. <span id='Ext-fx-Anim-cfg-scope'> /**
  75. </span> * @cfg {Function} scope
  76. * The scope that the {@link #callback} function will be called with
  77. */
  78. <span id='Ext-fx-Anim-cfg-duration'> /**
  79. </span> * @cfg {Number} duration
  80. * Time in milliseconds for a single animation to last. Defaults to 250. If the {@link #iterations} property is
  81. * specified, then each animate will take the same duration for each iteration.
  82. */
  83. duration: 250,
  84. <span id='Ext-fx-Anim-cfg-delay'> /**
  85. </span> * @cfg {Number} delay
  86. * Time to delay before starting the animation. Defaults to 0.
  87. */
  88. delay: 0,
  89. /* private used to track a delayed starting time */
  90. delayStart: 0,
  91. <span id='Ext-fx-Anim-cfg-dynamic'> /**
  92. </span> * @cfg {Boolean} dynamic
  93. * Currently only for Component Animation: Only set a component's outer element size bypassing layouts. Set to true to do full layouts for every frame of the animation. Defaults to false.
  94. */
  95. dynamic: false,
  96. <span id='Ext-fx-Anim-cfg-easing'> /**
  97. </span> * @cfg {String} easing
  98. This describes how the intermediate values used during a transition will be calculated. It allows for a transition to change
  99. speed over its duration.
  100. -backIn
  101. -backOut
  102. -bounceIn
  103. -bounceOut
  104. -ease
  105. -easeIn
  106. -easeOut
  107. -easeInOut
  108. -elasticIn
  109. -elasticOut
  110. -cubic-bezier(x1, y1, x2, y2)
  111. Note that cubic-bezier will create a custom easing curve following the CSS3 [transition-timing-function][0]
  112. specification. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must
  113. be in the range [0, 1] or the definition is invalid.
  114. [0]: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
  115. * @markdown
  116. */
  117. easing: 'ease',
  118. <span id='Ext-fx-Anim-cfg-keyframes'> /**
  119. </span> * @cfg {Object} keyframes
  120. * Animation keyframes follow the CSS3 Animation configuration pattern. 'from' is always considered '0%' and 'to'
  121. * is considered '100%'.&lt;b&gt;Every keyframe declaration must have a keyframe rule for 0% and 100%, possibly defined using
  122. * &quot;from&quot; or &quot;to&quot;&lt;/b&gt;. A keyframe declaration without these keyframe selectors is invalid and will not be available for
  123. * animation. The keyframe declaration for a keyframe rule consists of properties and values. Properties that are unable to
  124. * be animated are ignored in these rules, with the exception of 'easing' which can be changed at each keyframe. For example:
  125. &lt;pre&gt;&lt;code&gt;
  126. keyframes : {
  127. '0%': {
  128. left: 100
  129. },
  130. '40%': {
  131. left: 150
  132. },
  133. '60%': {
  134. left: 75
  135. },
  136. '100%': {
  137. left: 100
  138. }
  139. }
  140. &lt;/code&gt;&lt;/pre&gt;
  141. */
  142. <span id='Ext-fx-Anim-property-damper'> /**
  143. </span> * @private
  144. */
  145. damper: 1,
  146. <span id='Ext-fx-Anim-property-bezierRE'> /**
  147. </span> * @private
  148. */
  149. bezierRE: /^(?:cubic-)?bezier\(([^,]+),([^,]+),([^,]+),([^\)]+)\)/,
  150. <span id='Ext-fx-Anim-cfg-reverse'> /**
  151. </span> * Run the animation from the end to the beginning
  152. * Defaults to false.
  153. * @cfg {Boolean} reverse
  154. */
  155. reverse: false,
  156. <span id='Ext-fx-Anim-property-running'> /**
  157. </span> * Flag to determine if the animation has started
  158. * @property running
  159. * @type Boolean
  160. */
  161. running: false,
  162. <span id='Ext-fx-Anim-property-paused'> /**
  163. </span> * Flag to determine if the animation is paused. Only set this to true if you need to
  164. * keep the Anim instance around to be unpaused later; otherwise call {@link #end}.
  165. * @property paused
  166. * @type Boolean
  167. */
  168. paused: false,
  169. <span id='Ext-fx-Anim-cfg-iterations'> /**
  170. </span> * Number of times to execute the animation. Defaults to 1.
  171. * @cfg {Number} iterations
  172. */
  173. iterations: 1,
  174. <span id='Ext-fx-Anim-cfg-alternate'> /**
  175. </span> * Used in conjunction with iterations to reverse the animation each time an iteration completes.
  176. * @cfg {Boolean} alternate
  177. * Defaults to false.
  178. */
  179. alternate: false,
  180. <span id='Ext-fx-Anim-property-currentIteration'> /**
  181. </span> * Current iteration the animation is running.
  182. * @property currentIteration
  183. * @type Number
  184. */
  185. currentIteration: 0,
  186. <span id='Ext-fx-Anim-property-startTime'> /**
  187. </span> * Starting time of the animation.
  188. * @property startTime
  189. * @type Date
  190. */
  191. startTime: 0,
  192. <span id='Ext-fx-Anim-property-propHandlers'> /**
  193. </span> * Contains a cache of the interpolators to be used.
  194. * @private
  195. * @property propHandlers
  196. * @type Object
  197. */
  198. <span id='Ext-fx-Anim-cfg-target'> /**
  199. </span> * @cfg {String/Object} target
  200. * The {@link Ext.fx.target.Target} to apply the animation to. This should only be specified when creating an Ext.fx.Anim directly.
  201. * The target does not need to be a {@link Ext.fx.target.Target} instance, it can be the underlying object. For example, you can
  202. * pass a Component, Element or Sprite as the target and the Anim will create the appropriate {@link Ext.fx.target.Target} object
  203. * automatically.
  204. */
  205. <span id='Ext-fx-Anim-cfg-from'> /**
  206. </span> * @cfg {Object} from
  207. * An object containing property/value pairs for the beginning of the animation. If not specified, the current state of the
  208. * Ext.fx.target will be used. For example:
  209. &lt;pre&gt;&lt;code&gt;
  210. from : {
  211. opacity: 0, // Transparent
  212. color: '#ffffff', // White
  213. left: 0
  214. }
  215. &lt;/code&gt;&lt;/pre&gt;
  216. */
  217. <span id='Ext-fx-Anim-cfg-to'> /**
  218. </span> * @cfg {Object} to
  219. * An object containing property/value pairs for the end of the animation. For example:
  220. &lt;pre&gt;&lt;code&gt;
  221. to : {
  222. opacity: 1, // Opaque
  223. color: '#00ff00', // Green
  224. left: 500
  225. }
  226. &lt;/code&gt;&lt;/pre&gt;
  227. */
  228. // @private
  229. constructor: function(config) {
  230. var me = this,
  231. curve;
  232. config = config || {};
  233. // If keyframes are passed, they really want an Animator instead.
  234. if (config.keyframes) {
  235. return Ext.create('Ext.fx.Animator', config);
  236. }
  237. config = Ext.apply(me, config);
  238. if (me.from === undefined) {
  239. me.from = {};
  240. }
  241. me.propHandlers = {};
  242. me.config = config;
  243. me.target = Ext.fx.Manager.createTarget(me.target);
  244. me.easingFn = Ext.fx.Easing[me.easing];
  245. me.target.dynamic = me.dynamic;
  246. // If not a pre-defined curve, try a cubic-bezier
  247. if (!me.easingFn) {
  248. me.easingFn = String(me.easing).match(me.bezierRE);
  249. if (me.easingFn &amp;&amp; me.easingFn.length == 5) {
  250. curve = me.easingFn;
  251. me.easingFn = Ext.fx.CubicBezier.cubicBezier(+curve[1], +curve[2], +curve[3], +curve[4]);
  252. }
  253. }
  254. me.id = Ext.id(null, 'ext-anim-');
  255. Ext.fx.Manager.addAnim(me);
  256. me.addEvents(
  257. <span id='Ext-fx-Anim-event-beforeanimate'> /**
  258. </span> * @event beforeanimate
  259. * Fires before the animation starts. A handler can return false to cancel the animation.
  260. * @param {Ext.fx.Anim} this
  261. */
  262. 'beforeanimate',
  263. <span id='Ext-fx-Anim-event-afteranimate'> /**
  264. </span> * @event afteranimate
  265. * Fires when the animation is complete.
  266. * @param {Ext.fx.Anim} this
  267. * @param {Date} startTime
  268. */
  269. 'afteranimate',
  270. <span id='Ext-fx-Anim-event-lastframe'> /**
  271. </span> * @event lastframe
  272. * Fires when the animation's last frame has been set.
  273. * @param {Ext.fx.Anim} this
  274. * @param {Date} startTime
  275. */
  276. 'lastframe'
  277. );
  278. me.mixins.observable.constructor.call(me, config);
  279. if (config.callback) {
  280. me.on('afteranimate', config.callback, config.scope);
  281. }
  282. return me;
  283. },
  284. <span id='Ext-fx-Anim-method-setAttr'> /**
  285. </span> * @private
  286. * Helper to the target
  287. */
  288. setAttr: function(attr, value) {
  289. return Ext.fx.Manager.items.get(this.id).setAttr(this.target, attr, value);
  290. },
  291. <span id='Ext-fx-Anim-method-initAttrs'> /**
  292. </span> * @private
  293. * Set up the initial currentAttrs hash.
  294. */
  295. initAttrs: function() {
  296. var me = this,
  297. from = me.from,
  298. to = me.to,
  299. initialFrom = me.initialFrom || {},
  300. out = {},
  301. start, end, propHandler, attr;
  302. for (attr in to) {
  303. if (to.hasOwnProperty(attr)) {
  304. start = me.target.getAttr(attr, from[attr]);
  305. end = to[attr];
  306. // Use default (numeric) property handler
  307. if (!Ext.fx.PropertyHandler[attr]) {
  308. if (Ext.isObject(end)) {
  309. propHandler = me.propHandlers[attr] = Ext.fx.PropertyHandler.object;
  310. } else {
  311. propHandler = me.propHandlers[attr] = Ext.fx.PropertyHandler.defaultHandler;
  312. }
  313. }
  314. // Use custom handler
  315. else {
  316. propHandler = me.propHandlers[attr] = Ext.fx.PropertyHandler[attr];
  317. }
  318. out[attr] = propHandler.get(start, end, me.damper, initialFrom[attr], attr);
  319. }
  320. }
  321. me.currentAttrs = out;
  322. },
  323. <span id='Ext-fx-Anim-method-start'> /**
  324. </span> * @private
  325. * Fires beforeanimate and sets the running flag.
  326. */
  327. start: function(startTime) {
  328. var me = this,
  329. delay = me.delay,
  330. delayStart = me.delayStart,
  331. delayDelta;
  332. if (delay) {
  333. if (!delayStart) {
  334. me.delayStart = startTime;
  335. return;
  336. }
  337. else {
  338. delayDelta = startTime - delayStart;
  339. if (delayDelta &lt; delay) {
  340. return;
  341. }
  342. else {
  343. // Compensate for frame delay;
  344. startTime = new Date(delayStart.getTime() + delay);
  345. }
  346. }
  347. }
  348. if (me.fireEvent('beforeanimate', me) !== false) {
  349. me.startTime = startTime;
  350. if (!me.paused &amp;&amp; !me.currentAttrs) {
  351. me.initAttrs();
  352. }
  353. me.running = true;
  354. }
  355. },
  356. <span id='Ext-fx-Anim-method-runAnim'> /**
  357. </span> * @private
  358. * Calculate attribute value at the passed timestamp.
  359. * @returns a hash of the new attributes.
  360. */
  361. runAnim: function(elapsedTime) {
  362. var me = this,
  363. attrs = me.currentAttrs,
  364. duration = me.duration,
  365. easingFn = me.easingFn,
  366. propHandlers = me.propHandlers,
  367. ret = {},
  368. easing, values, attr, lastFrame;
  369. if (elapsedTime &gt;= duration) {
  370. elapsedTime = duration;
  371. lastFrame = true;
  372. }
  373. if (me.reverse) {
  374. elapsedTime = duration - elapsedTime;
  375. }
  376. for (attr in attrs) {
  377. if (attrs.hasOwnProperty(attr)) {
  378. values = attrs[attr];
  379. easing = lastFrame ? 1 : easingFn(elapsedTime / duration);
  380. ret[attr] = propHandlers[attr].set(values, easing);
  381. }
  382. }
  383. return ret;
  384. },
  385. <span id='Ext-fx-Anim-method-lastFrame'> /**
  386. </span> * @private
  387. * Perform lastFrame cleanup and handle iterations
  388. * @returns a hash of the new attributes.
  389. */
  390. lastFrame: function() {
  391. var me = this,
  392. iter = me.iterations,
  393. iterCount = me.currentIteration;
  394. iterCount++;
  395. if (iterCount &lt; iter) {
  396. if (me.alternate) {
  397. me.reverse = !me.reverse;
  398. }
  399. me.startTime = new Date();
  400. me.currentIteration = iterCount;
  401. // Turn off paused for CSS3 Transitions
  402. me.paused = false;
  403. }
  404. else {
  405. me.currentIteration = 0;
  406. me.end();
  407. me.fireEvent('lastframe', me, me.startTime);
  408. }
  409. },
  410. <span id='Ext-fx-Anim-method-end'> /**
  411. </span> * Fire afteranimate event and end the animation. Usually called automatically when the
  412. * animation reaches its final frame, but can also be called manually to pre-emptively
  413. * stop and destroy the running animation.
  414. */
  415. end: function() {
  416. var me = this;
  417. me.startTime = 0;
  418. me.paused = false;
  419. me.running = false;
  420. Ext.fx.Manager.removeAnim(me);
  421. me.fireEvent('afteranimate', me, me.startTime);
  422. }
  423. });
  424. // Set flag to indicate that Fx is available. Class might not be available immediately.
  425. Ext.enableFx = true;
  426. </pre>
  427. </body>
  428. </html>