easing.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. /**
  2. * DevExtreme (animation/easing.js)
  3. * Version: 19.1.16
  4. * Build date: Tue Oct 18 2022
  5. *
  6. * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  7. * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
  8. */
  9. "use strict";
  10. var isFunction = require("../core/utils/type").isFunction;
  11. var CSS_TRANSITION_EASING_REGEX = /cubic-bezier\((\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\)/;
  12. var TransitionTimingFuncMap = {
  13. linear: "cubic-bezier(0, 0, 1, 1)",
  14. swing: "cubic-bezier(0.445, 0.05, 0.55, 0.95)",
  15. ease: "cubic-bezier(0.25, 0.1, 0.25, 1)",
  16. "ease-in": "cubic-bezier(0.42, 0, 1, 1)",
  17. "ease-out": "cubic-bezier(0, 0, 0.58, 1)",
  18. "ease-in-out": "cubic-bezier(0.42, 0, 0.58, 1)"
  19. };
  20. var polynomBezier = function(x1, y1, x2, y2) {
  21. var Cx = 3 * x1;
  22. var Bx = 3 * (x2 - x1) - Cx;
  23. var Ax = 1 - Cx - Bx;
  24. var Cy = 3 * y1;
  25. var By = 3 * (y2 - y1) - Cy;
  26. var Ay = 1 - Cy - By;
  27. var bezierX = function(t) {
  28. return t * (Cx + t * (Bx + t * Ax))
  29. };
  30. var bezierY = function(t) {
  31. return t * (Cy + t * (By + t * Ay))
  32. };
  33. var findXFor = function(t) {
  34. var x = t;
  35. var i = 0;
  36. var z;
  37. while (i < 14) {
  38. z = bezierX(x) - t;
  39. if (Math.abs(z) < .001) {
  40. break
  41. }
  42. x -= z / derivativeX(x);
  43. i++
  44. }
  45. return x
  46. };
  47. var derivativeX = function(t) {
  48. return Cx + t * (2 * Bx + 3 * t * Ax)
  49. };
  50. return function(t) {
  51. return bezierY(findXFor(t))
  52. }
  53. };
  54. var easing = {};
  55. var convertTransitionTimingFuncToEasing = function(cssTransitionEasing) {
  56. cssTransitionEasing = TransitionTimingFuncMap[cssTransitionEasing] || cssTransitionEasing;
  57. var coeffs = cssTransitionEasing.match(CSS_TRANSITION_EASING_REGEX);
  58. var forceName;
  59. if (!coeffs) {
  60. forceName = "linear";
  61. coeffs = TransitionTimingFuncMap[forceName].match(CSS_TRANSITION_EASING_REGEX)
  62. }
  63. coeffs = coeffs.slice(1, 5);
  64. for (var i = 0; i < coeffs.length; i++) {
  65. coeffs[i] = parseFloat(coeffs[i])
  66. }
  67. var easingName = forceName || "cubicbezier_" + coeffs.join("_").replace(/\./g, "p");
  68. if (!isFunction(easing[easingName])) {
  69. easing[easingName] = function(x, t, b, c, d) {
  70. return c * polynomBezier(coeffs[0], coeffs[1], coeffs[2], coeffs[3])(t / d) + b
  71. }
  72. }
  73. return easingName
  74. };
  75. exports.setEasing = function(value) {
  76. easing = value
  77. };
  78. exports.getEasing = function(name) {
  79. return easing[name]
  80. };
  81. exports.convertTransitionTimingFuncToEasing = convertTransitionTimingFuncToEasing;