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>