/ext-4.1.0_b3/docs/source/CubicBezier.html

https://bitbucket.org/srogerf/javascript · HTML · 97 lines · 92 code · 5 blank · 0 comment · 0 complexity · 6b60c7950ec7a896c08d0ee1a5ee5981 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 

  5.   <title>The source code</title>
    6. 

  6.   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
    7. 

  7.   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
    8. 

  8.   <style type="text/css">
    9. 

  9.     .highlight { display: block; background-color: #ddd; }
    10. 

  10.   </style>
    11. 

  11.   <script type="text/javascript">
    12. 

  12.     function highlight() {
    13. 

  13.       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    14. 

  14.     }
    15. 

  15.   </script>
    16. 

  16. </head>
    17. 

  17. <body onload="prettyPrint(); highlight();">
    18. 

  18.   <pre class="prettyprint lang-js"><span id='Ext-fx-CubicBezier'>/**
    19. 

  19. </span> * @class Ext.fx.CubicBezier
    20. 

  20.  * @ignore
    21. 

  21.  */
    22. 

  22. Ext.define('Ext.fx.CubicBezier', {
    23. 

  23. 

  24.     /* Begin Definitions */
    25. 

  25. 

  26.     singleton: true,
    27. 

  27. 

  28.     /* End Definitions */
    29. 

  29. 

  30.     cubicBezierAtTime: function(t, p1x, p1y, p2x, p2y, duration) {
    31. 

  31.         var cx = 3 * p1x,
    32. 

  32.             bx = 3 * (p2x - p1x) - cx,
    33. 

  33.             ax = 1 - cx - bx,
    34. 

  34.             cy = 3 * p1y,
    35. 

  35.             by = 3 * (p2y - p1y) - cy,
    36. 

  36.             ay = 1 - cy - by;
    37. 

  37.         function sampleCurveX(t) {
    38. 

  38.             return ((ax * t + bx) * t + cx) * t;
    39. 

  39.         }
    40. 

  40.         function solve(x, epsilon) {
    41. 

  41.             var t = solveCurveX(x, epsilon);
    42. 

  42.             return ((ay * t + by) * t + cy) * t;
    43. 

  43.         }
    44. 

  44.         function solveCurveX(x, epsilon) {
    45. 

  45.             var t0, t1, t2, x2, d2, i;
    46. 

  46.             for (t2 = x, i = 0; i &lt; 8; i++) {
    47. 

  47.                 x2 = sampleCurveX(t2) - x;
    48. 

  48.                 if (Math.abs(x2) &lt; epsilon) {
    49. 

  49.                     return t2;
    50. 

  50.                 }
    51. 

  51.                 d2 = (3 * ax * t2 + 2 * bx) * t2 + cx;
    52. 

  52.                 if (Math.abs(d2) &lt; 1e-6) {
    53. 

  53.                     break;
    54. 

  54.                 }
    55. 

  55.                 t2 = t2 - x2 / d2;
    56. 

  56.             }
    57. 

  57.             t0 = 0;
    58. 

  58.             t1 = 1;
    59. 

  59.             t2 = x;
    60. 

  60.             if (t2 &lt; t0) {
    61. 

  61.                 return t0;
    62. 

  62.             }
    63. 

  63.             if (t2 &gt; t1) {
    64. 

  64.                 return t1;
    65. 

  65.             }
    66. 

  66.             while (t0 &lt; t1) {
    67. 

  67.                 x2 = sampleCurveX(t2);
    68. 

  68.                 if (Math.abs(x2 - x) &lt; epsilon) {
    69. 

  69.                     return t2;
    70. 

  70.                 }
    71. 

  71.                 if (x &gt; x2) {
    72. 

  72.                     t0 = t2;
    73. 

  73.                 } else {
    74. 

  74.                     t1 = t2;
    75. 

  75.                 }
    76. 

  76.                 t2 = (t1 - t0) / 2 + t0;
    77. 

  77.             }
    78. 

  78.             return t2;
    79. 

  79.         }
    80. 

  80.         return solve(t, 1 / (200 * duration));
    81. 

  81.     },
    82. 

  82. 

  83.     cubicBezier: function(x1, y1, x2, y2) {
    84. 

  84.         var fn = function(pos) {
    85. 

  85.             return Ext.fx.CubicBezier.cubicBezierAtTime(pos, x1, y1, x2, y2, 1);
    86. 

  86.         };
    87. 

  87.         fn.toCSS3 = function() {
    88. 

  88.             return 'cubic-bezier(' + [x1, y1, x2, y2].join(',') + ')';
    89. 

  89.         };
    90. 

  90.         fn.reverse = function() {
    91. 

  91.             return Ext.fx.CubicBezier.cubicBezier(1 - x2, 1 - y2, 1 - x1, 1 - y1);
    92. 

  92.         };
    93. 

  93.         return fn;
    94. 

  94.     }
    95. 

  95. });</pre>
    96. 

  96. </body>
    97. 

  97. </html>
    98.