Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / CubicBezier.html
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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../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-CubicBezier'>/**
19 </span> * @class Ext.fx.CubicBezier
20  * @ignore
21  */
22 Ext.define('Ext.fx.CubicBezier', {
23
24     /* Begin Definitions */
25
26     singleton: true,
27
28     /* End Definitions */
29
30     cubicBezierAtTime: function(t, p1x, p1y, p2x, p2y, duration) {
31         var cx = 3 * p1x,
32             bx = 3 * (p2x - p1x) - cx,
33             ax = 1 - cx - bx,
34             cy = 3 * p1y,
35             by = 3 * (p2y - p1y) - cy,
36             ay = 1 - cy - by;
37         function sampleCurveX(t) {
38             return ((ax * t + bx) * t + cx) * t;
39         }
40         function solve(x, epsilon) {
41             var t = solveCurveX(x, epsilon);
42             return ((ay * t + by) * t + cy) * t;
43         }
44         function solveCurveX(x, epsilon) {
45             var t0, t1, t2, x2, d2, i;
46             for (t2 = x, i = 0; i &lt; 8; i++) {
47                 x2 = sampleCurveX(t2) - x;
48                 if (Math.abs(x2) &lt; epsilon) {
49                     return t2;
50                 }
51                 d2 = (3 * ax * t2 + 2 * bx) * t2 + cx;
52                 if (Math.abs(d2) &lt; 1e-6) {
53                     break;
54                 }
55                 t2 = t2 - x2 / d2;
56             }
57             t0 = 0;
58             t1 = 1;
59             t2 = x;
60             if (t2 &lt; t0) {
61                 return t0;
62             }
63             if (t2 &gt; t1) {
64                 return t1;
65             }
66             while (t0 &lt; t1) {
67                 x2 = sampleCurveX(t2);
68                 if (Math.abs(x2 - x) &lt; epsilon) {
69                     return t2;
70                 }
71                 if (x &gt; x2) {
72                     t0 = t2;
73                 } else {
74                     t1 = t2;
75                 }
76                 t2 = (t1 - t0) / 2 + t0;
77             }
78             return t2;
79         }
80         return solve(t, 1 / (200 * duration));
81     },
82
83     cubicBezier: function(x1, y1, x2, y2) {
84         var fn = function(pos) {
85             return Ext.fx.CubicBezier.cubicBezierAtTime(pos, x1, y1, x2, y2, 1);
86         };
87         fn.toCSS3 = function() {
88             return 'cubic-bezier(' + [x1, y1, x2, y2].join(',') + ')';
89         };
90         fn.reverse = function() {
91             return Ext.fx.CubicBezier.cubicBezier(1 - x2, 1 - y2, 1 - x1, 1 - y1);
92         };
93         return fn;
94     }
95 });</pre>
96 </body>
97 </html>