CubicBezier.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/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> * @private
  20. */
  21. Ext.define('Ext.fx.CubicBezier', {
  22. /* Begin Definitions */
  23. singleton: true,
  24. /* End Definitions */
  25. cubicBezierAtTime: function(t, p1x, p1y, p2x, p2y, duration) {
  26. var cx = 3 * p1x,
  27. bx = 3 * (p2x - p1x) - cx,
  28. ax = 1 - cx - bx,
  29. cy = 3 * p1y,
  30. by = 3 * (p2y - p1y) - cy,
  31. ay = 1 - cy - by;
  32. function sampleCurveX(t) {
  33. return ((ax * t + bx) * t + cx) * t;
  34. }
  35. function solve(x, epsilon) {
  36. var t = solveCurveX(x, epsilon);
  37. return ((ay * t + by) * t + cy) * t;
  38. }
  39. function solveCurveX(x, epsilon) {
  40. var t0, t1, t2, x2, d2, i;
  41. for (t2 = x, i = 0; i &lt; 8; i++) {
  42. x2 = sampleCurveX(t2) - x;
  43. if (Math.abs(x2) &lt; epsilon) {
  44. return t2;
  45. }
  46. d2 = (3 * ax * t2 + 2 * bx) * t2 + cx;
  47. if (Math.abs(d2) &lt; 1e-6) {
  48. break;
  49. }
  50. t2 = t2 - x2 / d2;
  51. }
  52. t0 = 0;
  53. t1 = 1;
  54. t2 = x;
  55. if (t2 &lt; t0) {
  56. return t0;
  57. }
  58. if (t2 &gt; t1) {
  59. return t1;
  60. }
  61. while (t0 &lt; t1) {
  62. x2 = sampleCurveX(t2);
  63. if (Math.abs(x2 - x) &lt; epsilon) {
  64. return t2;
  65. }
  66. if (x &gt; x2) {
  67. t0 = t2;
  68. } else {
  69. t1 = t2;
  70. }
  71. t2 = (t1 - t0) / 2 + t0;
  72. }
  73. return t2;
  74. }
  75. return solve(t, 1 / (200 * duration));
  76. },
  77. cubicBezier: function(x1, y1, x2, y2) {
  78. var fn = function(pos) {
  79. return Ext.fx.CubicBezier.cubicBezierAtTime(pos, x1, y1, x2, y2, 1);
  80. };
  81. fn.toCSS3 = function() {
  82. return 'cubic-bezier(' + [x1, y1, x2, y2].join(',') + ')';
  83. };
  84. fn.reverse = function() {
  85. return Ext.fx.CubicBezier.cubicBezier(1 - x2, 1 - y2, 1 - x1, 1 - y1);
  86. };
  87. return fn;
  88. }
  89. });</pre>
  90. </body>
  91. </html>