src/fx/CubicBezier.js

   1 /**
   2  * @class Ext.fx.CubicBezier
   3  * @ignore
   4  */
   5 Ext.define('Ext.fx.CubicBezier', {
   6
   7     /* Begin Definitions */
   8
   9     singleton: true,
  10
  11     /* End Definitions */
  12
  13     cubicBezierAtTime: function(t, p1x, p1y, p2x, p2y, duration) {
  14         var cx = 3 * p1x,
  15             bx = 3 * (p2x - p1x) - cx,
  16             ax = 1 - cx - bx,
  17             cy = 3 * p1y,
  18             by = 3 * (p2y - p1y) - cy,
  19             ay = 1 - cy - by;
  20         function sampleCurveX(t) {
  21             return ((ax * t + bx) * t + cx) * t;
  22         }
  23         function solve(x, epsilon) {
  24             var t = solveCurveX(x, epsilon);
  25             return ((ay * t + by) * t + cy) * t;
  26         }
  27         function solveCurveX(x, epsilon) {
  28             var t0, t1, t2, x2, d2, i;
  29             for (t2 = x, i = 0; i < 8; i++) {
  30                 x2 = sampleCurveX(t2) - x;
  31                 if (Math.abs(x2) < epsilon) {
  32                     return t2;
  33                 }
  34                 d2 = (3 * ax * t2 + 2 * bx) * t2 + cx;
  35                 if (Math.abs(d2) < 1e-6) {
  36                     break;
  37                 }
  38                 t2 = t2 - x2 / d2;
  39             }
  40             t0 = 0;
  41             t1 = 1;
  42             t2 = x;
  43             if (t2 < t0) {
  44                 return t0;
  45             }
  46             if (t2 > t1) {
  47                 return t1;
  48             }
  49             while (t0 < t1) {
  50                 x2 = sampleCurveX(t2);
  51                 if (Math.abs(x2 - x) < epsilon) {
  52                     return t2;
  53                 }
  54                 if (x > x2) {
  55                     t0 = t2;
  56                 } else {
  57                     t1 = t2;
  58                 }
  59                 t2 = (t1 - t0) / 2 + t0;
  60             }
  61             return t2;
  62         }
  63         return solve(t, 1 / (200 * duration));
  64     },
  65
  66     cubicBezier: function(x1, y1, x2, y2) {
  67         var fn = function(pos) {
  68             return Ext.fx.CubicBezier.cubicBezierAtTime(pos, x1, y1, x2, y2, 1);
  69         };
  70         fn.toCSS3 = function() {
  71             return 'cubic-bezier(' + [x1, y1, x2, y2].join(',') + ')';
  72         };
  73         fn.reverse = function() {
  74             return Ext.fx.CubicBezier.cubicBezier(1 - x2, 1 - y2, 1 - x1, 1 - y1);
  75         };
  76         return fn;
  77     }
  78 });