easing.ts 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. /**
  2. * 缓动代码来自 https://github.com/sole/tween.js/blob/master/src/Tween.js
  3. * @see http://sole.github.io/tween.js/examples/03_graphs.html
  4. * @exports zrender/animation/easing
  5. */
  6. type easingFunc = (percent: number) => number;
  7. export type AnimationEasing = keyof typeof easingFuncs | easingFunc;
  8. const easingFuncs = {
  9. /**
  10. * @param {number} k
  11. * @return {number}
  12. */
  13. linear(k: number) {
  14. return k;
  15. },
  16. /**
  17. * @param {number} k
  18. * @return {number}
  19. */
  20. quadraticIn(k: number) {
  21. return k * k;
  22. },
  23. /**
  24. * @param {number} k
  25. * @return {number}
  26. */
  27. quadraticOut(k: number) {
  28. return k * (2 - k);
  29. },
  30. /**
  31. * @param {number} k
  32. * @return {number}
  33. */
  34. quadraticInOut(k: number) {
  35. if ((k *= 2) < 1) {
  36. return 0.5 * k * k;
  37. }
  38. return -0.5 * (--k * (k - 2) - 1);
  39. },
  40. // 三次方的缓动(t^3)
  41. /**
  42. * @param {number} k
  43. * @return {number}
  44. */
  45. cubicIn(k: number) {
  46. return k * k * k;
  47. },
  48. /**
  49. * @param {number} k
  50. * @return {number}
  51. */
  52. cubicOut(k: number) {
  53. return --k * k * k + 1;
  54. },
  55. /**
  56. * @param {number} k
  57. * @return {number}
  58. */
  59. cubicInOut(k: number) {
  60. if ((k *= 2) < 1) {
  61. return 0.5 * k * k * k;
  62. }
  63. return 0.5 * ((k -= 2) * k * k + 2);
  64. },
  65. // 四次方的缓动(t^4)
  66. /**
  67. * @param {number} k
  68. * @return {number}
  69. */
  70. quarticIn(k: number) {
  71. return k * k * k * k;
  72. },
  73. /**
  74. * @param {number} k
  75. * @return {number}
  76. */
  77. quarticOut(k: number) {
  78. return 1 - (--k * k * k * k);
  79. },
  80. /**
  81. * @param {number} k
  82. * @return {number}
  83. */
  84. quarticInOut(k: number) {
  85. if ((k *= 2) < 1) {
  86. return 0.5 * k * k * k * k;
  87. }
  88. return -0.5 * ((k -= 2) * k * k * k - 2);
  89. },
  90. // 五次方的缓动(t^5)
  91. /**
  92. * @param {number} k
  93. * @return {number}
  94. */
  95. quinticIn(k: number) {
  96. return k * k * k * k * k;
  97. },
  98. /**
  99. * @param {number} k
  100. * @return {number}
  101. */
  102. quinticOut(k: number) {
  103. return --k * k * k * k * k + 1;
  104. },
  105. /**
  106. * @param {number} k
  107. * @return {number}
  108. */
  109. quinticInOut(k: number) {
  110. if ((k *= 2) < 1) {
  111. return 0.5 * k * k * k * k * k;
  112. }
  113. return 0.5 * ((k -= 2) * k * k * k * k + 2);
  114. },
  115. // 正弦曲线的缓动(sin(t))
  116. /**
  117. * @param {number} k
  118. * @return {number}
  119. */
  120. sinusoidalIn(k: number) {
  121. return 1 - Math.cos(k * Math.PI / 2);
  122. },
  123. /**
  124. * @param {number} k
  125. * @return {number}
  126. */
  127. sinusoidalOut(k: number) {
  128. return Math.sin(k * Math.PI / 2);
  129. },
  130. /**
  131. * @param {number} k
  132. * @return {number}
  133. */
  134. sinusoidalInOut(k: number) {
  135. return 0.5 * (1 - Math.cos(Math.PI * k));
  136. },
  137. // 指数曲线的缓动(2^t)
  138. /**
  139. * @param {number} k
  140. * @return {number}
  141. */
  142. exponentialIn(k: number) {
  143. return k === 0 ? 0 : Math.pow(1024, k - 1);
  144. },
  145. /**
  146. * @param {number} k
  147. * @return {number}
  148. */
  149. exponentialOut(k: number) {
  150. return k === 1 ? 1 : 1 - Math.pow(2, -10 * k);
  151. },
  152. /**
  153. * @param {number} k
  154. * @return {number}
  155. */
  156. exponentialInOut(k: number) {
  157. if (k === 0) {
  158. return 0;
  159. }
  160. if (k === 1) {
  161. return 1;
  162. }
  163. if ((k *= 2) < 1) {
  164. return 0.5 * Math.pow(1024, k - 1);
  165. }
  166. return 0.5 * (-Math.pow(2, -10 * (k - 1)) + 2);
  167. },
  168. // 圆形曲线的缓动(sqrt(1-t^2))
  169. /**
  170. * @param {number} k
  171. * @return {number}
  172. */
  173. circularIn(k: number) {
  174. return 1 - Math.sqrt(1 - k * k);
  175. },
  176. /**
  177. * @param {number} k
  178. * @return {number}
  179. */
  180. circularOut(k: number) {
  181. return Math.sqrt(1 - (--k * k));
  182. },
  183. /**
  184. * @param {number} k
  185. * @return {number}
  186. */
  187. circularInOut(k: number) {
  188. if ((k *= 2) < 1) {
  189. return -0.5 * (Math.sqrt(1 - k * k) - 1);
  190. }
  191. return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1);
  192. },
  193. // 创建类似于弹簧在停止前来回振荡的动画
  194. /**
  195. * @param {number} k
  196. * @return {number}
  197. */
  198. elasticIn(k: number) {
  199. let s;
  200. let a = 0.1;
  201. let p = 0.4;
  202. if (k === 0) {
  203. return 0;
  204. }
  205. if (k === 1) {
  206. return 1;
  207. }
  208. if (!a || a < 1) {
  209. a = 1;
  210. s = p / 4;
  211. }
  212. else {
  213. s = p * Math.asin(1 / a) / (2 * Math.PI);
  214. }
  215. return -(a * Math.pow(2, 10 * (k -= 1))
  216. * Math.sin((k - s) * (2 * Math.PI) / p));
  217. },
  218. /**
  219. * @param {number} k
  220. * @return {number}
  221. */
  222. elasticOut(k: number) {
  223. let s;
  224. let a = 0.1;
  225. let p = 0.4;
  226. if (k === 0) {
  227. return 0;
  228. }
  229. if (k === 1) {
  230. return 1;
  231. }
  232. if (!a || a < 1) {
  233. a = 1;
  234. s = p / 4;
  235. }
  236. else {
  237. s = p * Math.asin(1 / a) / (2 * Math.PI);
  238. }
  239. return (a * Math.pow(2, -10 * k)
  240. * Math.sin((k - s) * (2 * Math.PI) / p) + 1);
  241. },
  242. /**
  243. * @param {number} k
  244. * @return {number}
  245. */
  246. elasticInOut(k: number) {
  247. let s;
  248. let a = 0.1;
  249. let p = 0.4;
  250. if (k === 0) {
  251. return 0;
  252. }
  253. if (k === 1) {
  254. return 1;
  255. }
  256. if (!a || a < 1) {
  257. a = 1;
  258. s = p / 4;
  259. }
  260. else {
  261. s = p * Math.asin(1 / a) / (2 * Math.PI);
  262. }
  263. if ((k *= 2) < 1) {
  264. return -0.5 * (a * Math.pow(2, 10 * (k -= 1))
  265. * Math.sin((k - s) * (2 * Math.PI) / p));
  266. }
  267. return a * Math.pow(2, -10 * (k -= 1))
  268. * Math.sin((k - s) * (2 * Math.PI) / p) * 0.5 + 1;
  269. },
  270. // 在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动
  271. /**
  272. * @param {number} k
  273. * @return {number}
  274. */
  275. backIn(k: number) {
  276. let s = 1.70158;
  277. return k * k * ((s + 1) * k - s);
  278. },
  279. /**
  280. * @param {number} k
  281. * @return {number}
  282. */
  283. backOut(k: number) {
  284. let s = 1.70158;
  285. return --k * k * ((s + 1) * k + s) + 1;
  286. },
  287. /**
  288. * @param {number} k
  289. * @return {number}
  290. */
  291. backInOut(k: number) {
  292. let s = 1.70158 * 1.525;
  293. if ((k *= 2) < 1) {
  294. return 0.5 * (k * k * ((s + 1) * k - s));
  295. }
  296. return 0.5 * ((k -= 2) * k * ((s + 1) * k + s) + 2);
  297. },
  298. // 创建弹跳效果
  299. /**
  300. * @param {number} k
  301. * @return {number}
  302. */
  303. bounceIn(k: number) {
  304. return 1 - easingFuncs.bounceOut(1 - k);
  305. },
  306. /**
  307. * @param {number} k
  308. * @return {number}
  309. */
  310. bounceOut(k: number) {
  311. if (k < (1 / 2.75)) {
  312. return 7.5625 * k * k;
  313. }
  314. else if (k < (2 / 2.75)) {
  315. return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75;
  316. }
  317. else if (k < (2.5 / 2.75)) {
  318. return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375;
  319. }
  320. else {
  321. return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375;
  322. }
  323. },
  324. /**
  325. * @param {number} k
  326. * @return {number}
  327. */
  328. bounceInOut(k: number) {
  329. if (k < 0.5) {
  330. return easingFuncs.bounceIn(k * 2) * 0.5;
  331. }
  332. return easingFuncs.bounceOut(k * 2 - 1) * 0.5 + 0.5;
  333. }
  334. };
  335. export default easingFuncs;