☰

bezier-easing

Bezier Curve based easing functions for Javascript animations

Tento skript by neměl být instalován přímo. Jedná se o knihovnu, kterou by měly jiné skripty využívat pomocí meta příkazu // @require https://update.greatest.deepsurf.us/scripts/7108/29098/bezier-easing.js 

  1. // ==UserScript==
  2. // @name        bezier-easing
  3. // @version     0.4.4
  4. // @description Bezier Curve based easing functions for Javascript animations
  5. // @license		MIT (https://github.com/gre/bezier-easing/blob/master/LICENSE)
  6. // ==/UserScript==
  7.  
  8. /**
  9.  * BezierEasing - use bezier curve for transition easing function
  10.  * by Gaëtan Renaudeau 2014 – MIT License
  11.  *
  12.  * Credits: is based on Firefox's nsSMILKeySpline.cpp
  13.  * Usage:
  14.  * var spline = BezierEasing(0.25, 0.1, 0.25, 1.0)
  15.  * spline(x) => returns the easing value | x must be in [0, 1] range
  16.  *
  17.  */
  18. (function (definition) {
  19.   if (typeof exports === "object") {
  20.     module.exports = definition();
  21.   } else if (typeof define === 'function' && define.amd) {
  22.     define([], definition);
  23.   } else {
  24.     window.BezierEasing = definition();
  25.   }
  26. }(function () {
  27.   var global = this;
  28.  
  29.   // These values are established by empiricism with tests (tradeoff: performance VS precision)
  30.   var NEWTON_ITERATIONS = 4;
  31.   var NEWTON_MIN_SLOPE = 0.001;
  32.   var SUBDIVISION_PRECISION = 0.0000001;
  33.   var SUBDIVISION_MAX_ITERATIONS = 10;
  34.  
  35.   var kSplineTableSize = 11;
  36.   var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
  37.  
  38.   var float32ArraySupported = 'Float32Array' in global;
  39.  
  40.   function BezierEasing (mX1, mY1, mX2, mY2) {
  41.     // Validate arguments
  42.     if (arguments.length !== 4) {
  43.       throw new Error("BezierEasing requires 4 arguments.");
  44.     }
  45.     for (var i=0; i<4; ++i) {
  46.       if (typeof arguments[i] !== "number" || isNaN(arguments[i]) || !isFinite(arguments[i])) {
  47.         throw new Error("BezierEasing arguments should be integers.");
  48.       } 
  49.     }
  50.     if (mX1 < 0 || mX1 > 1 || mX2 < 0 || mX2 > 1) {
  51.       throw new Error("BezierEasing x values must be in [0, 1] range.");
  52.     }
  53.  
  54.     var mSampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
  55.    
  56.     function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
  57.     function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
  58.     function C (aA1)      { return 3.0 * aA1; }
  59.    
  60.     // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
  61.     function calcBezier (aT, aA1, aA2) {
  62.       return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT;
  63.     }
  64.    
  65.     // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
  66.     function getSlope (aT, aA1, aA2) {
  67.       return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
  68.     }
  69.  
  70.     function newtonRaphsonIterate (aX, aGuessT) {
  71.       for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
  72.         var currentSlope = getSlope(aGuessT, mX1, mX2);
  73.         if (currentSlope === 0.0) return aGuessT;
  74.         var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
  75.         aGuessT -= currentX / currentSlope;
  76.       }
  77.       return aGuessT;
  78.     }
  79.  
  80.     function calcSampleValues () {
  81.       for (var i = 0; i < kSplineTableSize; ++i) {
  82.         mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
  83.       }
  84.     }
  85.  
  86.     function binarySubdivide (aX, aA, aB) {
  87.       var currentX, currentT, i = 0;
  88.       do {
  89.         currentT = aA + (aB - aA) / 2.0;
  90.         currentX = calcBezier(currentT, mX1, mX2) - aX;
  91.         if (currentX > 0.0) {
  92.           aB = currentT;
  93.         } else {
  94.           aA = currentT;
  95.         }
  96.       } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
  97.       return currentT;
  98.     }
  99.  
  100.     function getTForX (aX) {
  101.       var intervalStart = 0.0;
  102.       var currentSample = 1;
  103.       var lastSample = kSplineTableSize - 1;
  104.  
  105.       for (; currentSample != lastSample && mSampleValues[currentSample] <= aX; ++currentSample) {
  106.         intervalStart += kSampleStepSize;
  107.       }
  108.       --currentSample;
  109.  
  110.       // Interpolate to provide an initial guess for t
  111.       var dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample+1] - mSampleValues[currentSample]);
  112.       var guessForT = intervalStart + dist * kSampleStepSize;
  113.  
  114.       var initialSlope = getSlope(guessForT, mX1, mX2);
  115.       if (initialSlope >= NEWTON_MIN_SLOPE) {
  116.         return newtonRaphsonIterate(aX, guessForT);
  117.       } else if (initialSlope === 0.0) {
  118.         return guessForT;
  119.       } else {
  120.         return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize);
  121.       }
  122.     }
  123.  
  124.     var _precomputed = false;
  125.     function precompute() {
  126.       _precomputed = true;
  127.       if (mX1 != mY1 || mX2 != mY2)
  128.         calcSampleValues();
  129.     }
  130.  
  131.     var f = function (aX) {
  132.       if (!_precomputed) precompute();
  133.       if (mX1 === mY1 && mX2 === mY2) return aX; // linear
  134.       // Because JavaScript number are imprecise, we should guarantee the extremes are right.
  135.       if (aX === 0) return 0;
  136.       if (aX === 1) return 1;
  137.       return calcBezier(getTForX(aX), mY1, mY2);
  138.     };
  139.  
  140.     f.getControlPoints = function() { return [{ x: mX1, y: mY1 }, { x: mX2, y: mY2 }]; };
  141.  
  142.     var args = [mX1, mY1, mX2, mY2];
  143.     var str = "BezierEasing("+args+")";
  144.     f.toString = function () { return str; };
  145.  
  146.     var css = "cubic-bezier("+args+")";
  147.     f.toCSS = function () { return css; };
  148.  
  149.     return f;
  150.   }
  151.  
  152.   // CSS mapping
  153.   BezierEasing.css = {
  154.     "ease":        BezierEasing(0.25, 0.1, 0.25, 1.0),
  155.     "linear":      BezierEasing(0.00, 0.0, 1.00, 1.0),
  156.     "ease-in":     BezierEasing(0.42, 0.0, 1.00, 1.0),
  157.     "ease-out":    BezierEasing(0.00, 0.0, 0.58, 1.0),
  158.     "ease-in-out": BezierEasing(0.42, 0.0, 0.58, 1.0)
  159.   };
  160.  
  161.   return BezierEasing;
  162.  
  163. }));
  164.