20241026

common/bezier-easing.js

@@ -0,0 +1,184 @@
+(function(f) {
+  if (typeof exports === 'object' && typeof module !== 'undefined') {
+    module.exports = f();
+  } else if (typeof define === 'function' && define.amd) {
+    define([], f);
+  } else {
+    var g;
+    if (typeof window !== 'undefined') {
+      g = window;
+    } else if (typeof global !== 'undefined') {
+      g = global;
+    } else if (typeof self !== 'undefined') {
+      g = self;
+    } else {
+      g = this;
+    }
+    g.BezierEasing = f();
+  }
+})(function() {
+  var define, module, exports;
+  return (function() {
+    function r(e, n, t) {
+      function o(i, f) {
+        if (!n[i]) {
+          if (!e[i]) {
+            var c = 'function' == typeof require && require;
+            if (!f && c) return c(i, !0);
+            if (u) return u(i, !0);
+            var a = new Error("Cannot find module '" + i + "'");
+            throw ((a.code = 'MODULE_NOT_FOUND'), a);
+          }
+          var p = (n[i] = { exports: {} });
+          e[i][0].call(
+            p.exports,
+            function(r) {
+              var n = e[i][1][r];
+              return o(n || r);
+            },
+            p,
+            p.exports,
+            r,
+            e,
+            n,
+            t
+          );
+        }
+        return n[i].exports;
+      }
+      for (var u = 'function' == typeof require && require, i = 0; i < t.length; i++) o(t[i]);
+      return o;
+    }
+    return r;
+  })()(
+    {
+      1: [
+        function(require, module, exports) {
+          /**
+           * https://github.com/gre/bezier-easing
+           * BezierEasing - use bezier curve for transition easing function
+           * by Gaëtan Renaudeau 2014 - 2015 – MIT License
+           */
+
+          // These values are established by empiricism with tests (tradeoff: performance VS precision)
+          var NEWTON_ITERATIONS = 4;
+          var NEWTON_MIN_SLOPE = 0.001;
+          var SUBDIVISION_PRECISION = 0.0000001;
+          var SUBDIVISION_MAX_ITERATIONS = 10;
+
+          var kSplineTableSize = 11;
+          var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+          var float32ArraySupported = typeof Float32Array === 'function';
+
+          function A(aA1, aA2) {
+            return 1.0 - 3.0 * aA2 + 3.0 * aA1;
+          }
+          function B(aA1, aA2) {
+            return 3.0 * aA2 - 6.0 * aA1;
+          }
+          function C(aA1) {
+            return 3.0 * aA1;
+          }
+
+          // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+          function calcBezier(aT, aA1, aA2) {
+            return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
+          }
+
+          // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+          function getSlope(aT, aA1, aA2) {
+            return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
+          }
+
+          function binarySubdivide(aX, aA, aB, mX1, mX2) {
+            var currentX,
+              currentT,
+              i = 0;
+            do {
+              currentT = aA + (aB - aA) / 2.0;
+              currentX = calcBezier(currentT, mX1, mX2) - aX;
+              if (currentX > 0.0) {
+                aB = currentT;
+              } else {
+                aA = currentT;
+              }
+            } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+            return currentT;
+          }
+
+          function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
+            for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
+              var currentSlope = getSlope(aGuessT, mX1, mX2);
+              if (currentSlope === 0.0) {
+                return aGuessT;
+              }
+              var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+              aGuessT -= currentX / currentSlope;
+            }
+            return aGuessT;
+          }
+
+          function LinearEasing(x) {
+            return x;
+          }
+
+          module.exports = function bezier(mX1, mY1, mX2, mY2) {
+            if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
+              throw new Error('bezier x values must be in [0, 1] range');
+            }
+
+            if (mX1 === mY1 && mX2 === mY2) {
+              return LinearEasing;
+            }
+
+            // Precompute samples table
+            var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
+            for (var i = 0; i < kSplineTableSize; ++i) {
+              sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+            }
+
+            function getTForX(aX) {
+              var intervalStart = 0.0;
+              var currentSample = 1;
+              var lastSample = kSplineTableSize - 1;
+
+              for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+                intervalStart += kSampleStepSize;
+              }
+              --currentSample;
+
+              // Interpolate to provide an initial guess for t
+              var dist =
+                (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+              var guessForT = intervalStart + dist * kSampleStepSize;
+
+              var initialSlope = getSlope(guessForT, mX1, mX2);
+              if (initialSlope >= NEWTON_MIN_SLOPE) {
+                return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+              } else if (initialSlope === 0.0) {
+                return guessForT;
+              } else {
+                return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+              }
+            }
+
+            return function BezierEasing(x) {
+              // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+              if (x === 0) {
+                return 0;
+              }
+              if (x === 1) {
+                return 1;
+              }
+              return calcBezier(getTForX(x), mY1, mY2);
+            };
+          };
+        },
+        {}
+      ]
+    },
+    {},
+    [1]
+  )(1);
+});

common/style.css

@@ -0,0 +1,10 @@
+/*
+* @Author: Johnhong9527
+* @Date:   2019-07-25 11:31:08
+* @Last Modified by:   Johnhong9527
+* @Last Modified time: 2019-07-25 11:32:31
+*/
+*{
+  padding: 0;
+  margin: 0;
+}

css/01.css

@@ -0,0 +1,12 @@
+/*
+* @Author: Johnhong9527
+* @Date:   2019-07-25 11:28:47
+* @Last Modified by:   Johnhong9527
+* @Last Modified time: 2019-07-25 11:28:56
+*/
+#motionPath {
+  width: 20px;
+  height: 100px;
+  color:#333;
+  background-color: red;
+}

index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>01</title>
+    <link rel="stylesheet" href="./css/01.css" />
+    <link rel="stylesheet" href="./common/style.css" />
+  </head>
+  <body>
+    <div id="motionPath"></div>
+    <script src="./common/bezier-easing.js"></script>
+    <script src="./js/01.js"></script>
+  </body>
+</html>

js/01.js

@@ -0,0 +1,31 @@
+/*
+* @Author: Johnhong9527
+* @Date:   2019-07-25 11:31:43
+* @Last Modified by:   Johnhong9527
+* @Last Modified time: 2019-07-25 11:44:32
+*/
+var BezierEasing = require('bezier-easing')
+var tween = {
+  paused: false,
+  duration: 6000,
+  easing: BezierEasing(0, 0, 1, 0.5),
+  update: function (v) {
+    // anim 是下文定义的一个描述动画的对象
+    anim.target.innerHTML = v
+  }
+}
+var raf = null
+function play() {
+  raf = requestAnimationFrame(function (t) {
+    step(t);
+  })
+
+  function step(t) {
+    if (!tween.paused) {
+      setInstanceProgress(t);
+      play();
+    } else {
+      raf = cancelAnimationFrame(raf);
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "bezier-easing": "^2.1.0"
+  }
+}

yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+bezier-easing@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"
+  integrity sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY=