transitions.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. var easing = {};
  2. //渐变曲线函数,反应加速度的变化
  3. easing.linearTween = function(e, t, i, n) {
  4. return i * e / n + t
  5. }
  6. ,
  7. easing.easeInQuad = function(e, t, i, n) {
  8. return e /= n,
  9. i * e * e + t
  10. }
  11. ,
  12. easing.easeOutQuad = function(e, t, i, n) {
  13. return e /= n,
  14. -i * e * (e - 2) + t
  15. }
  16. ,
  17. easing.easeInOutQuad = function(e, t, i, n) {
  18. return e /= n / 2,
  19. e < 1 ? i / 2 * e * e + t : (e--,
  20. -i / 2 * (e * (e - 2) - 1) + t)
  21. }
  22. ,
  23. easing.easeInCubic = function(e, t, i, n) {
  24. return e /= n,
  25. i * e * e * e + t
  26. }
  27. ,
  28. easing.easeOutCubic = function(e, t, i, n) {
  29. return e /= n,
  30. e--,
  31. i * (e * e * e + 1) + t
  32. }
  33. ,
  34. easing.easeInOutCubic = function(e, t, i, n) {
  35. return e /= n / 2,
  36. e < 1 ? i / 2 * e * e * e + t : (e -= 2,
  37. i / 2 * (e * e * e + 2) + t)
  38. }
  39. ,
  40. easing.easeInQuart = function(e, t, i, n) {
  41. return e /= n,
  42. i * e * e * e * e + t
  43. }
  44. ,
  45. easing.easeOutQuart = function(e, t, i, n) {
  46. return e /= n,
  47. e--,
  48. -i * (e * e * e * e - 1) + t
  49. }
  50. ,
  51. easing.easeInOutQuart = function(e, t, i, n) {
  52. return e /= n / 2,
  53. e < 1 ? i / 2 * e * e * e * e + t : (e -= 2,
  54. -i / 2 * (e * e * e * e - 2) + t)
  55. }
  56. ,
  57. easing.easeInQuint = function(e, t, i, n) {
  58. return e /= n,
  59. i * e * e * e * e * e + t
  60. }
  61. ,
  62. easing.easeOutQuint = function(e, t, i, n) {
  63. return e /= n,
  64. e--,
  65. i * (e * e * e * e * e + 1) + t
  66. }
  67. ,
  68. easing.easeInOutQuint = function(e, t, i, n) {
  69. return e /= n / 2,
  70. e < 1 ? i / 2 * e * e * e * e * e + t : (e -= 2,
  71. i / 2 * (e * e * e * e * e + 2) + t)
  72. }
  73. ,
  74. easing.easeInSine = function(e, t, i, n) {
  75. return -i * Math.cos(e / n * (Math.PI / 2)) + i + t
  76. }
  77. ,
  78. easing.easeOutSine = function(e, t, i, n) {
  79. return i * Math.sin(e / n * (Math.PI / 2)) + t
  80. }
  81. ,
  82. easing.easeInOutSine = function(e, t, i, n) {
  83. return -i / 2 * (Math.cos(Math.PI * e / n) - 1) + t
  84. }
  85. ,
  86. easing.easeInExpo = function(e, t, i, n) {
  87. return i * Math.pow(2, 10 * (e / n - 1)) + t
  88. }
  89. ,
  90. easing.easeOutExpo = function(e, t, i, n) {
  91. return i * (-Math.pow(2, -10 * e / n) + 1) + t
  92. }
  93. ,
  94. easing.easeInOutExpo = function(e, t, i, n) {
  95. return e /= n / 2,
  96. e < 1 ? i / 2 * Math.pow(2, 10 * (e - 1)) + t : (e--,
  97. i / 2 * (-Math.pow(2, -10 * e) + 2) + t)
  98. }
  99. ,
  100. easing.easeInCirc = function(e, t, i, n) {
  101. return e /= n,
  102. -i * (Math.sqrt(1 - e * e) - 1) + t
  103. }
  104. ,
  105. easing.easeOutCirc = function(e, t, i, n) {
  106. return e /= n,
  107. e--,
  108. i * Math.sqrt(1 - e * e) + t
  109. }
  110. ,
  111. easing.easeInOutCirc = function(e, t, i, n) {
  112. return e /= n / 2,
  113. e < 1 ? -i / 2 * (Math.sqrt(1 - e * e) - 1) + t : (e -= 2,
  114. i / 2 * (Math.sqrt(1 - e * e) + 1) + t)
  115. }
  116. ,
  117. easing.easeInElastic = function(e, t, i, n) {
  118. var r = 1.70158
  119. , o = 0
  120. , a = i;
  121. return 0 === e ? t : 1 === (e /= n) ? t + i : (o || (o = .3 * n),
  122. a < Math.abs(i) ? (a = i,
  123. r = o / 4) : r = o / (2 * Math.PI) * Math.asin(i / a),
  124. -(a * Math.pow(2, 10 * (e -= 1)) * Math.sin((e * n - r) * (2 * Math.PI) / o)) + t)
  125. }
  126. ,
  127. easing.easeOutElastic = function(e, t, i, n) {
  128. var r = 1.70158
  129. , o = 0
  130. , a = i;
  131. return 0 === e ? t : 1 === (e /= n) ? t + i : (o || (o = .3 * n),
  132. a < Math.abs(i) ? (a = i,
  133. r = o / 4) : r = o / (2 * Math.PI) * Math.asin(i / a),
  134. a * Math.pow(2, -10 * e) * Math.sin((e * n - r) * (2 * Math.PI) / o) + i + t)
  135. }
  136. ,
  137. easing.easeInOutElastic = function(e, t, i, n) {
  138. var r = 1.70158
  139. , o = 0
  140. , a = i;
  141. return 0 === e ? t : 2 === (e /= n / 2) ? t + i : (o || (o = n * (.3 * 1.5)),
  142. a < Math.abs(i) ? (a = i,
  143. r = o / 4) : r = o / (2 * Math.PI) * Math.asin(i / a),
  144. e < 1 ? -.5 * (a * Math.pow(2, 10 * (e -= 1)) * Math.sin((e * n - r) * (2 * Math.PI) / o)) + t : a * Math.pow(2, -10 * (e -= 1)) * Math.sin((e * n - r) * (2 * Math.PI) / o) * .5 + i + t)
  145. }
  146. ,
  147. easing.easeInBack = function(e, t, i, n, r) {
  148. return void 0 === r && (r = 1.70158),
  149. i * (e /= n) * e * ((r + 1) * e - r) + t
  150. }
  151. ,
  152. easing.easeOutBack = function(e, t, i, n, r) {
  153. return void 0 === r && (r = 1.70158),
  154. i * ((e = e / n - 1) * e * ((r + 1) * e + r) + 1) + t
  155. }
  156. ,
  157. easing.easeInOutBack = function(e, t, i, n, r) {
  158. return void 0 === r && (r = 1.70158),
  159. (e /= n / 2) < 1 ? i / 2 * (e * e * (((r *= 1.525) + 1) * e - r)) + t : i / 2 * ((e -= 2) * e * (((r *= 1.525) + 1) * e + r) + 2) + t
  160. }
  161. ,
  162. easing.easeOutBounce = function(e, t, i, n) {
  163. return (e /= n) < 1 / 2.75 ? i * (7.5625 * e * e) + t : e < 2 / 2.75 ? i * (7.5625 * (e -= 1.5 / 2.75) * e + .75) + t : e < 2.5 / 2.75 ? i * (7.5625 * (e -= 2.25 / 2.75) * e + .9375) + t : i * (7.5625 * (e -= 2.625 / 2.75) * e + .984375) + t
  164. }
  165. ,
  166. easing.easeInBounce = function(e, t, i, r) {
  167. return i - easing.easeOutBounce(r - e, 0, i, r) + t
  168. }
  169. ,
  170. easing.easeInOutBounce = function(e, t, i, r) {
  171. return e < r / 2 ? .5 * easing.easeInBounce(2 * e, 0, i, r) + t : .5 * easing.easeOutBounce(x, 2 * e - r, 0, i, r) + .5 * i + t
  172. }
  173. var lerp = {
  174. vector: function(e, t, f) {//xzw change, add f
  175. var i = e.clone();
  176. return t = t.clone(),
  177. function(n) {
  178. e.set(i.x * (1 - n) + t.x * n, i.y * (1 - n) + t.y * n, i.z * (1 - n) + t.z * n)
  179. f && f(e,n);
  180. }
  181. },
  182. quaternion: function(e, t, f) {//xzw change, add f
  183. var i = e.clone();
  184. return function(n) {
  185. e.copy(i).slerp(t, n);
  186. f && f(e,n);
  187. }
  188. },
  189. property: function(e, t, i, n) {
  190. var r = e[t];
  191. return function(o) {
  192. e[t] = r * (1 - o) + i * o,
  193. n && n(e[t])
  194. }
  195. },
  196. uniform: function(e, t, i) {
  197. var n = e.material.uniforms[t].value;
  198. return function(r) {
  199. try{
  200. e.material.uniforms[t] && (e.material.uniforms[t].value = n * (1 - r) + i * r)
  201. }catch(e){
  202. console.log(1)
  203. }
  204. }
  205. },
  206. matrix4: function(e, t) {
  207. var i = e.clone();
  208. return function(n) {
  209. for (var r = e.elements, o = i.elements, a = t.elements, s = 0; s < 16; s++)
  210. r[s] = o[s] * (1 - n) + a[s] * n
  211. }
  212. },
  213. allUniforms: function(e, t, i) {
  214. var n = e.map(function(e) {
  215. return this.uniform(e, t, i)
  216. }
  217. .bind(this));
  218. return function(e) {
  219. n.forEach(function(t) {
  220. t(e)
  221. })
  222. }
  223. }
  224. };
  225. /*
  226. 渐变
  227. */
  228. var transitions = {
  229. globalDone: null,
  230. funcs: [],
  231. counter: 0,
  232. uniqueID: 0,
  233. start: function(e, t, i, r, o, a, s, cancelFun) {
  234. return r = r || 0,
  235. this.funcs.push({
  236. func: e,
  237. current: -r * Math.abs(t), //当前时间
  238. duration: (1 - Math.max(r, 0)) * Math.abs(t), //总时长
  239. done: i,
  240. easing: o || easing.linearTween, //渐变曲线
  241. cycling: t < 0,
  242. running: !0,
  243. debug: r < 0,
  244. name: a || "T" + this.counter,
  245. id: void 0 === s ? this.counter : s,
  246. paused: !1,
  247. cancelFun : cancelFun, //取消时执行的函数
  248. }),
  249. e(0, 16),
  250. this.counter += 1,
  251. e
  252. },
  253. trigger: function(e) {
  254. var t = void 0 === e.delayRatio ? 0 : e.delayRatio
  255. , i = e.func || function() {}
  256. , r = void 0 === e.duration ? 0 : e.duration;
  257. void 0 !== e.cycling && e.cycling && (r = -Math.abs(r));
  258. var o = e.done || null
  259. , a = e.easing || easing.linearTween
  260. , s = e.name || "R" + this.counter
  261. , l = void 0 === e.id ? this.counter : e.id;
  262. return this.start(i, r, o, t, a, s, l)
  263. },
  264. setTimeout: function(e, t, i) {
  265. var n = void 0 === i ? this.counter : i;
  266. return this.trigger({
  267. done: e,
  268. duration: void 0 === t ? 0 : t,
  269. name: "O" + this.counter,
  270. id: n
  271. })
  272. },
  273. pause: function() {
  274. this.paused = !0
  275. },
  276. resume: function() {
  277. this.paused = !1
  278. },
  279. update: function(e) {
  280. this.funcs.forEach(function(t) {
  281. if (!(t.paused || (t.current += 1e3 * e,
  282. t.current < 0)))
  283. if (t.current >= t.duration && !t.cycling) {
  284. var i = t.easing(1, 0, 1, 1);
  285. t.func(i, 1e3 * e),
  286. t.done && t.done(),
  287. t.running = !1
  288. } else {
  289. var n = t.easing(t.current % t.duration / t.duration, 0, 1, 1)
  290. , r = t.func(n, 1e3 * e) || !1;
  291. r && (t.done && t.done(),
  292. t.running = !1)
  293. }
  294. });
  295. var t = this.funcs.length;
  296. this.funcs = this.funcs.filter(function(e) {
  297. return e.running
  298. });
  299. var i = this.funcs.length;
  300. if (t > 0 && 0 === i && this.globalDone) {
  301. var n = this.globalDone;
  302. this.globalDone = null,
  303. n()
  304. }
  305. },
  306. adjustSpeed: function(e, t) {
  307. for (var i = this.getById(e), n = 0; n < i.length; n++) {
  308. var r = i[n];
  309. r.duration /= t,
  310. r.current /= t
  311. }
  312. },
  313. getById: function(e) {
  314. return this.funcs.filter(function(t) {
  315. return e === t.id
  316. })
  317. },
  318. get: function(e) {
  319. for (var t = 0; t < this.funcs.length; t += 1)
  320. if (this.funcs[t].func === e)
  321. return this.funcs[t];
  322. return null
  323. },
  324. isRunning: function(e) {
  325. var t = this.get(e);
  326. return null !== t && t.running
  327. },
  328. countActive: function() {
  329. for (var e = 0, t = 0; t < this.funcs.length; t += 1)
  330. e += this.funcs[t].running;
  331. return e
  332. },
  333. listActive: function() {
  334. for (var e = [], t = 0; t < this.funcs.length; t += 1)
  335. this.funcs[t].running && e.push(this.funcs[t].name);
  336. return e
  337. },
  338. done: function(e) {
  339. this.globalDone = e
  340. },
  341. cancelById: function(e, dealCancelFun) { //xzw add dealDone
  342. var t = void 0 === e ? 0 : e;
  343. this.funcs = this.funcs.filter(function(e) {
  344. var is = e.id == t;
  345. if(is && dealCancelFun){
  346. e.cancelFun && e.cancelFun()
  347. }
  348. return !is
  349. })
  350. },
  351. cancel: function(e) {
  352. this.funcs = this.funcs.filter(function(t) {
  353. return t.func !== e
  354. })
  355. },
  356. getUniqueId: function() {
  357. return this.uniqueID -= 1,
  358. this.uniqueID
  359. }
  360. };
  361. export {transitions, lerp, easing}