TextSelectorProperty.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. import {
  2. extendPrototype,
  3. } from '../functionExtensions';
  4. import DynamicPropertyContainer from '../helpers/dynamicProperties';
  5. import PropertyFactory from '../PropertyFactory';
  6. import BezierFactory from '../../3rd_party/BezierEaser';
  7. const TextSelectorProp = (function () {
  8. var max = Math.max;
  9. var min = Math.min;
  10. var floor = Math.floor;
  11. function TextSelectorPropFactory(elem, data) {
  12. this._currentTextLength = -1;
  13. this.k = false;
  14. this.data = data;
  15. this.elem = elem;
  16. this.comp = elem.comp;
  17. this.finalS = 0;
  18. this.finalE = 0;
  19. this.initDynamicPropertyContainer(elem);
  20. this.s = PropertyFactory.getProp(elem, data.s || { k: 0 }, 0, 0, this);
  21. if ('e' in data) {
  22. this.e = PropertyFactory.getProp(elem, data.e, 0, 0, this);
  23. } else {
  24. this.e = { v: 100 };
  25. }
  26. this.o = PropertyFactory.getProp(elem, data.o || { k: 0 }, 0, 0, this);
  27. this.xe = PropertyFactory.getProp(elem, data.xe || { k: 0 }, 0, 0, this);
  28. this.ne = PropertyFactory.getProp(elem, data.ne || { k: 0 }, 0, 0, this);
  29. this.sm = PropertyFactory.getProp(elem, data.sm || { k: 100 }, 0, 0, this);
  30. this.a = PropertyFactory.getProp(elem, data.a, 0, 0.01, this);
  31. if (!this.dynamicProperties.length) {
  32. this.getValue();
  33. }
  34. }
  35. TextSelectorPropFactory.prototype = {
  36. getMult: function (ind) {
  37. if (this._currentTextLength !== this.elem.textProperty.currentData.l.length) {
  38. this.getValue();
  39. }
  40. var x1 = 0;
  41. var y1 = 0;
  42. var x2 = 1;
  43. var y2 = 1;
  44. if (this.ne.v > 0) {
  45. x1 = this.ne.v / 100.0;
  46. } else {
  47. y1 = -this.ne.v / 100.0;
  48. }
  49. if (this.xe.v > 0) {
  50. x2 = 1.0 - this.xe.v / 100.0;
  51. } else {
  52. y2 = 1.0 + this.xe.v / 100.0;
  53. }
  54. var easer = BezierFactory.getBezierEasing(x1, y1, x2, y2).get;
  55. var mult = 0;
  56. var s = this.finalS;
  57. var e = this.finalE;
  58. var type = this.data.sh;
  59. if (type === 2) {
  60. if (e === s) {
  61. mult = ind >= e ? 1 : 0;
  62. } else {
  63. mult = max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1));
  64. }
  65. mult = easer(mult);
  66. } else if (type === 3) {
  67. if (e === s) {
  68. mult = ind >= e ? 0 : 1;
  69. } else {
  70. mult = 1 - max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1));
  71. }
  72. mult = easer(mult);
  73. } else if (type === 4) {
  74. if (e === s) {
  75. mult = 0;
  76. } else {
  77. mult = max(0, min(0.5 / (e - s) + (ind - s) / (e - s), 1));
  78. if (mult < 0.5) {
  79. mult *= 2;
  80. } else {
  81. mult = 1 - 2 * (mult - 0.5);
  82. }
  83. }
  84. mult = easer(mult);
  85. } else if (type === 5) {
  86. if (e === s) {
  87. mult = 0;
  88. } else {
  89. var tot = e - s;
  90. /* ind += 0.5;
  91. mult = -4/(tot*tot)*(ind*ind)+(4/tot)*ind; */
  92. ind = min(max(0, ind + 0.5 - s), e - s);
  93. var x = -tot / 2 + ind;
  94. var a = tot / 2;
  95. mult = Math.sqrt(1 - (x * x) / (a * a));
  96. }
  97. mult = easer(mult);
  98. } else if (type === 6) {
  99. if (e === s) {
  100. mult = 0;
  101. } else {
  102. ind = min(max(0, ind + 0.5 - s), e - s);
  103. mult = (1 + (Math.cos((Math.PI + Math.PI * 2 * (ind) / (e - s))))) / 2; // eslint-disable-line
  104. }
  105. mult = easer(mult);
  106. } else {
  107. if (ind >= floor(s)) {
  108. if (ind - s < 0) {
  109. mult = max(0, min(min(e, 1) - (s - ind), 1));
  110. } else {
  111. mult = max(0, min(e - ind, 1));
  112. }
  113. }
  114. mult = easer(mult);
  115. }
  116. // Smoothness implementation.
  117. // The smoothness represents a reduced range of the original [0; 1] range.
  118. // if smoothness is 25%, the new range will be [0.375; 0.625]
  119. // Steps are:
  120. // - find the lower value of the new range (threshold)
  121. // - if multiplier is smaller than that value, floor it to 0
  122. // - if it is larger,
  123. // - subtract the threshold
  124. // - divide it by the smoothness (this will return the range to [0; 1])
  125. // Note: If it doesn't work on some scenarios, consider applying it before the easer.
  126. if (this.sm.v !== 100) {
  127. var smoothness = this.sm.v * 0.01;
  128. if (smoothness === 0) {
  129. smoothness = 0.00000001;
  130. }
  131. var threshold = 0.5 - smoothness * 0.5;
  132. if (mult < threshold) {
  133. mult = 0;
  134. } else {
  135. mult = (mult - threshold) / smoothness;
  136. if (mult > 1) {
  137. mult = 1;
  138. }
  139. }
  140. }
  141. return mult * this.a.v;
  142. },
  143. getValue: function (newCharsFlag) {
  144. this.iterateDynamicProperties();
  145. this._mdf = newCharsFlag || this._mdf;
  146. this._currentTextLength = this.elem.textProperty.currentData.l.length || 0;
  147. if (newCharsFlag && this.data.r === 2) {
  148. this.e.v = this._currentTextLength;
  149. }
  150. var divisor = this.data.r === 2 ? 1 : 100 / this.data.totalChars;
  151. var o = this.o.v / divisor;
  152. var s = this.s.v / divisor + o;
  153. var e = (this.e.v / divisor) + o;
  154. if (s > e) {
  155. var _s = s;
  156. s = e;
  157. e = _s;
  158. }
  159. this.finalS = s;
  160. this.finalE = e;
  161. },
  162. };
  163. extendPrototype([DynamicPropertyContainer], TextSelectorPropFactory);
  164. function getTextSelectorProp(elem, data, arr) {
  165. return new TextSelectorPropFactory(elem, data, arr);
  166. }
  167. return {
  168. getTextSelectorProp: getTextSelectorProp,
  169. };
  170. }());
  171. export default TextSelectorProp;