QuickTween.ts 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  1. import { Component, Node, Vec3, tween, Quat, Sprite, Color, math, easing, Camera, ITweenOption, IPunchTweenOption, IShakeTweenOption } from 'cc';
  2. import { calcPunchData, calcShakeData } from './Util';
  3. //////////////////////
  4. // Transform
  5. //////////////////////
  6. Node.prototype.qtPosition = function (to: Vec3, duration: number, opts?: ITweenOption) {
  7. return tween(this).to(duration, { position: to }, opts);
  8. }
  9. Node.prototype.qtPositionX = function (to: number, duration: number, opts?: ITweenOption) {
  10. const startPos = this.position;
  11. return tween(this).to(duration, { position: new Vec3(to, startPos.y, startPos.z) }, opts);
  12. }
  13. Node.prototype.qtPositionY = function (to: number, duration: number, opts?: ITweenOption) {
  14. const startPos = this.position;
  15. return tween(this).to(duration, { position: new Vec3(startPos.x, to, startPos.z) }, opts);
  16. }
  17. Node.prototype.qtPositionZ = function (to: number, duration: number, opts?: ITweenOption) {
  18. const startPos = this.position;
  19. return tween(this).to(duration, { position: new Vec3(startPos.x, startPos.y, to) }, opts);
  20. }
  21. Node.prototype.qtWorldPosition = function (to: Vec3, duration: number, opts?: ITweenOption) {
  22. return tween(this).to(duration, { worldPosition: to }, opts);
  23. }
  24. Node.prototype.qtWorldPositionX = function (to: number, duration: number, opts?: ITweenOption) {
  25. const startPos = this.worldPosition;
  26. return tween(this).to(duration, { worldPosition: new Vec3(to, startPos.y, startPos.z) }, opts);
  27. }
  28. Node.prototype.qtWorldPositionY = function (to: number, duration: number, opts?: ITweenOption) {
  29. const startPos = this.worldPosition;
  30. return tween(this).to(duration, { worldPosition: new Vec3(startPos.x, to, startPos.z) }, opts);
  31. }
  32. Node.prototype.qtWorldPositionZ = function (to: number, duration: number, opts?: ITweenOption) {
  33. const startPos = this.worldPosition;
  34. return tween(this).to(duration, { worldPosition: new Vec3(startPos.x, startPos.y, to) }, opts);
  35. }
  36. Node.prototype.qtRotation = function (to: Vec3, duration: number, opts?: ITweenOption) {
  37. return tween(this).to(duration, { eulerAngles: to }, opts);
  38. }
  39. Node.prototype.qtRotationQuat = function (to: Quat, duration: number, opts?: ITweenOption) {
  40. return tween(this).to(duration, { rotation: to }, opts);
  41. }
  42. Node.prototype.qtScale = function (to: Vec3 | number, duration: number, opts?: ITweenOption) {
  43. let toScale = to;
  44. if (!(to instanceof Vec3)) {
  45. toScale = new Vec3(to, to, to);
  46. }
  47. return tween(this).to(duration, { scale: toScale }, opts);
  48. }
  49. Node.prototype.qtScaleX = function (to: number, duration: number, opts?: ITweenOption) {
  50. const startScale = this.scale;
  51. return tween(this).to(duration, { scale: new Vec3(to, startScale.y, startScale.z) }, opts);
  52. }
  53. Node.prototype.qtScaleY = function (to: number, duration: number, opts?: ITweenOption) {
  54. const startScale = this.scale;
  55. return tween(this).to(duration, { scale: new Vec3(startScale.x, to, startScale.z) }, opts);
  56. }
  57. Node.prototype.qtScaleZ = function (to: number, duration: number, opts?: ITweenOption) {
  58. const startScale = this.scale;
  59. return tween(this).to(duration, { scale: new Vec3(startScale.x, startScale.y, to) }, opts);
  60. }
  61. Node.prototype.qtPunchPosition = function (punch: Vec3, duration: number, opts?: IPunchTweenOption) {
  62. const vibrato = opts?.vibrato ?? 3;
  63. const elasticity = opts?.elasticity ?? 0.5;
  64. const { tos, durations } = calcPunchData(this.position.clone(), punch, duration, vibrato, elasticity);
  65. const punchTween = tween(this);
  66. tos.forEach((to, index) => {
  67. const d = durations[index];
  68. let tweenOpts: ITweenOption | undefined;
  69. if (index === 0) {
  70. tweenOpts = {
  71. onStart: opts.onStart
  72. }
  73. } else if (index === tos.length - 1) {
  74. tweenOpts = {
  75. onComplete: opts.onComplete
  76. }
  77. }
  78. punchTween.then(tween().to(d, { position: to }, tweenOpts));
  79. });
  80. return punchTween.union();
  81. }
  82. Node.prototype.qtPunchRotation = function (punch: Vec3, duration: number, opts?: IPunchTweenOption) {
  83. const vibrato = opts?.vibrato ?? 3;
  84. const elasticity = opts?.elasticity ?? 0.5;
  85. const { tos, durations } = calcPunchData(this.rotation.clone(), punch, duration, vibrato, elasticity);
  86. const punchTween = tween(this);
  87. tos.forEach((to, index) => {
  88. const d = durations[index];
  89. let tweenOpts: ITweenOption | undefined;
  90. if (index === 0) {
  91. tweenOpts = {
  92. onStart: opts.onStart
  93. }
  94. } else if (index === tos.length - 1) {
  95. tweenOpts = {
  96. onComplete: opts.onComplete
  97. }
  98. }
  99. punchTween.then(tween().to(d, { eulerAngles: to }, tweenOpts));
  100. });
  101. return punchTween.union();
  102. }
  103. Node.prototype.qtPunchScale = function (punch: Vec3, duration: number, opts?: IPunchTweenOption) {
  104. const vibrato = opts?.vibrato ?? 3;
  105. const elasticity = opts?.elasticity ?? 0.5;
  106. const { tos, durations } = calcPunchData(this.scale.clone(), punch, duration, vibrato, elasticity);
  107. const punchTween = tween(this);
  108. tos.forEach((to, index) => {
  109. const d = durations[index];
  110. let tweenOpts: ITweenOption | undefined;
  111. if (index === 0) {
  112. tweenOpts = {
  113. onStart: opts.onStart
  114. }
  115. } else if (index === tos.length - 1) {
  116. tweenOpts = {
  117. onComplete: opts.onComplete
  118. }
  119. }
  120. punchTween.then(tween().to(d, { scale: to }, tweenOpts));
  121. });
  122. return punchTween.union();
  123. }
  124. Node.prototype.qtJumpDistance = function (distance: Vec3, jumpHeight: number, jumpNum: number, duration: number, opts: ITweenOption = {}) {
  125. const tweenPos = new Vec3();
  126. const jumpTween = tween(this);
  127. const totalNum = jumpNum * 2;
  128. this.jumpY = 0;
  129. let startPosY = 0;
  130. const yUpTween = tween().to(duration / totalNum, { jumpY: jumpHeight }, {
  131. onStart: (target: Node) => {
  132. startPosY = target.position.y;
  133. target.jumpY = 0;
  134. },
  135. onUpdate: (target: Node, ratio) => {
  136. tweenPos.set(target.position);
  137. tweenPos.y = startPosY + target.jumpY;
  138. target.position = tweenPos;
  139. },
  140. onComplete: (target: Node) => {
  141. target.jumpY = 0;
  142. }, easing: 'quadOut'
  143. }).to(duration / totalNum, { jumpY: jumpHeight }, {
  144. onStart: (target: Node) => {
  145. startPosY = target.position.y;
  146. },
  147. onUpdate: (target: Node, ratio) => {
  148. tweenPos.set(target.position);
  149. tweenPos.y = startPosY - target.jumpY;
  150. target.position = tweenPos;
  151. },
  152. onComplete: (target: Node) => {
  153. target.jumpY = 0;
  154. }, easing: 'quadIn',
  155. }).union().repeat(jumpNum);
  156. this.jumpOffsetY = 0;
  157. let offsetY = 0;
  158. const offsetYTween = tween().to(duration, { jumpOffsetY: distance.y }, {
  159. onStart: (target: Node) => {
  160. offsetY = distance.y;
  161. target.jumpOffsetY = 0;
  162. },
  163. onUpdate: (target: Node, ratio) => {
  164. const interpOffsetY = easing.quadOut(ratio) * offsetY;
  165. tweenPos.set(target.position);
  166. tweenPos.y += interpOffsetY;
  167. target.position = tweenPos;
  168. },
  169. onComplete: (target: Node) => {
  170. target.jumpOffsetY = 0;
  171. }, easing: 'quadOut'
  172. });
  173. this.jumpX = this.position.x;
  174. this.jumpZ = this.position.z;
  175. const xzTween = tween().to(duration, { jumpX: this.position.x + distance.x, jumpZ: this.position.z + distance.z }, {
  176. onStart: opts.onStart, // 使用默认空对象后的 opts
  177. onUpdate: (target: Node, ratio) => {
  178. tweenPos.set(target.position);
  179. tweenPos.x = target.jumpX;
  180. tweenPos.z = target.jumpZ;
  181. target.position = tweenPos;
  182. opts.onUpdate?.(); // 通过可选链访问方法,避免 undefined 错误
  183. },
  184. onComplete: (target: Node) => {
  185. target.jumpX = target.position.x;
  186. target.jumpZ = target.position.z;
  187. opts.onComplete?.();
  188. }
  189. });
  190. jumpTween.parallel(yUpTween, offsetYTween, xzTween);
  191. return jumpTween;
  192. }
  193. Node.prototype.qtJumpPosition = function (to: Vec3, jumpHeight: number, jumpNum: number, duration: number, opts: ITweenOption = {}) {
  194. const tweenPos = new Vec3();
  195. const jumpTween = tween(this);
  196. const totalNum = jumpNum * 2;
  197. this.jumpY = 0;
  198. let startPosY = 0;
  199. const yUpTween = tween().to(duration / totalNum, { jumpY: jumpHeight }, {
  200. onStart: (target: Node) => {
  201. startPosY = target.position.y;
  202. target.jumpY = 0;
  203. },
  204. onUpdate: (target: Node, ratio) => {
  205. tweenPos.set(target.position);
  206. tweenPos.y = startPosY + target.jumpY;
  207. target.position = tweenPos;
  208. },
  209. onComplete: (target: Node) => {
  210. target.jumpY = 0;
  211. }, easing: 'quadOut'
  212. }).to(duration / totalNum, { jumpY: jumpHeight }, {
  213. onStart: (target: Node) => {
  214. startPosY = target.position.y;
  215. },
  216. onUpdate: (target: Node, ratio) => {
  217. tweenPos.set(target.position);
  218. tweenPos.y = startPosY - target.jumpY;
  219. target.position = tweenPos;
  220. },
  221. onComplete: (target: Node) => {
  222. target.jumpY = 0;
  223. }, easing: 'quadIn',
  224. }).union().repeat(jumpNum);
  225. this.jumpOffsetY = 0;
  226. let offsetY = 0;
  227. const offsetYTween = tween().to(duration, { jumpOffsetY: to.y - this.position.y }, {
  228. onStart: (target: Node) => {
  229. offsetY = to.y - target.position.y;
  230. target.jumpOffsetY = 0;
  231. },
  232. onUpdate: (target: Node, ratio) => {
  233. const interpOffsetY = easing.quadOut(ratio) * offsetY;
  234. tweenPos.set(target.position);
  235. tweenPos.y += interpOffsetY;
  236. target.position = tweenPos;
  237. },
  238. onComplete: (target: Node) => {
  239. target.jumpOffsetY = 0;
  240. }, easing: 'quadOut'
  241. });
  242. this.jumpX = this.position.x;
  243. this.jumpZ = this.position.z;
  244. const xzTween = tween().to(duration, { jumpX: to.x, jumpZ: to.z }, {
  245. onStart: opts.onStart, // 使用 opts 前先检查
  246. onUpdate: (target: Node, ratio) => {
  247. tweenPos.set(target.position);
  248. tweenPos.x = target.jumpX;
  249. tweenPos.z = target.jumpZ;
  250. target.position = tweenPos;
  251. opts.onUpdate?.(); // 通过可选链访问方法,避免 undefined 错误
  252. },
  253. onComplete: (target: Node) => {
  254. target.jumpX = target.position.x;
  255. target.jumpZ = target.position.z;
  256. opts.onComplete?.();
  257. }
  258. });
  259. jumpTween.parallel(yUpTween, offsetYTween, xzTween);
  260. return jumpTween;
  261. }
  262. Node.prototype.qtShakePosition = function (strength: Vec3 | number, duration: number, opts?: IShakeTweenOption) {
  263. const vibrato = opts?.vibrato ?? 10;
  264. const randomness = opts?.randomness ?? 90;
  265. const fadeOut = opts?.fadeOut ?? true;
  266. let toStrength: Vec3;
  267. let vectorBased = false;
  268. if (!(strength instanceof Vec3)) {
  269. toStrength = new Vec3(strength, strength, strength);
  270. } else {
  271. toStrength = strength;
  272. vectorBased = true;
  273. }
  274. const { tos, durations } = calcShakeData(this.position.clone(), duration, toStrength, vibrato, randomness, false, vectorBased, fadeOut)
  275. const shakeTween = tween(this);
  276. tos.forEach((to, index) => {
  277. const d = durations[index];
  278. let tweenOpts: ITweenOption | undefined;
  279. if (index === 0) {
  280. tweenOpts = {
  281. onStart: opts.onStart
  282. }
  283. } else if (index === tos.length - 1) {
  284. tweenOpts = {
  285. onComplete: opts.onComplete
  286. }
  287. }
  288. shakeTween.then(tween().to(d, { position: to }, tweenOpts));
  289. });
  290. return shakeTween.union();
  291. }
  292. Node.prototype.qtShakeRotation = function (strength: Vec3 | number, duration: number, opts?: IShakeTweenOption) {
  293. const vibrato = opts?.vibrato ?? 10;
  294. const randomness = opts?.randomness ?? 90;
  295. const fadeOut = opts?.fadeOut ?? true;
  296. let toStrength: Vec3;
  297. let vectorBased = false;
  298. if (!(strength instanceof Vec3)) {
  299. toStrength = new Vec3(strength, strength, strength);
  300. } else {
  301. toStrength = strength;
  302. vectorBased = true;
  303. }
  304. const { tos, durations } = calcShakeData(this.eulerAngles.clone(), duration, toStrength, vibrato, randomness, false, vectorBased, fadeOut)
  305. const shakeTween = tween(this);
  306. tos.forEach((to, index) => {
  307. const d = durations[index];
  308. let tweenOpts: ITweenOption | undefined;
  309. if (index === 0) {
  310. tweenOpts = {
  311. onStart: opts.onStart
  312. }
  313. } else if (index === tos.length - 1) {
  314. tweenOpts = {
  315. onComplete: opts.onComplete
  316. }
  317. }
  318. shakeTween.then(tween().to(d, { eulerAngles: to }, tweenOpts));
  319. });
  320. return shakeTween.union();
  321. }
  322. Node.prototype.qtShakeScale = function (strength: Vec3 | number, duration: number, opts?: IShakeTweenOption) {
  323. const vibrato = opts?.vibrato ?? 10;
  324. const randomness = opts?.randomness ?? 90;
  325. const fadeOut = opts?.fadeOut ?? true;
  326. let toStrength: Vec3;
  327. let vectorBased = false;
  328. if (!(strength instanceof Vec3)) {
  329. toStrength = new Vec3(strength, strength, strength);
  330. } else {
  331. toStrength = strength;
  332. vectorBased = true;
  333. }
  334. const { tos, durations } = calcShakeData(this.scale.clone(), duration, toStrength, vibrato, randomness, false, vectorBased, fadeOut)
  335. const shakeTween = tween(this);
  336. tos.forEach((to, index) => {
  337. const d = durations[index];
  338. let tweenOpts: ITweenOption | undefined;
  339. if (index === 0) {
  340. tweenOpts = {
  341. onStart: opts.onStart
  342. }
  343. } else if (index === tos.length - 1) {
  344. tweenOpts = {
  345. onComplete: opts.onComplete
  346. }
  347. }
  348. shakeTween.then(tween().to(d, { scale: to }, tweenOpts));
  349. });
  350. return shakeTween.union();
  351. }
  352. //////////////////////
  353. // Sprite
  354. //////////////////////
  355. // good color lerp
  356. // https://www.alanzucconi.com/2016/01/06/colour-interpolation/
  357. Sprite.prototype.qtColor = function (to: Color, duration: number, opts?: ITweenOption) {
  358. return tween(this).to(duration, { color: to }, opts);
  359. }
  360. Sprite.prototype.qtOpacity = function (to: number, duration: number, opts?: ITweenOption) {
  361. const startColor = this.color.clone();
  362. const tempColor = new Color();
  363. return tween(this).to(duration, { color: new Color(startColor.r, startColor.g, startColor.b, to) }, {
  364. onStart: opts.onStart,
  365. onUpdate: (target: { _val: number }, ratio: number) => {
  366. const lerpA = startColor.a + (to - startColor.a) * ratio
  367. tempColor.set(startColor.r, startColor.g, startColor.b, lerpA);
  368. this.color = tempColor;
  369. opts.onUpdate?.();
  370. },
  371. onComplete: opts.onComplete
  372. });
  373. }
  374. //////////////////////
  375. // Camera
  376. //////////////////////
  377. Camera.prototype.qtShakePosition = function (strength: Vec3 | number, duration: number, opts?: IShakeTweenOption) {
  378. const vibrato = opts?.vibrato ?? 10;
  379. const randomness = opts?.randomness ?? 90;
  380. const fadeOut = opts?.fadeOut ?? true;
  381. let toStrength: Vec3;
  382. let vectorBased = false;
  383. if (!(strength instanceof Vec3)) {
  384. toStrength = new Vec3(strength, strength, strength);
  385. } else {
  386. toStrength = strength;
  387. vectorBased = true;
  388. }
  389. const { tos, durations } = calcShakeData(this.node.position.clone(), duration, toStrength, vibrato, randomness, true, vectorBased, fadeOut)
  390. const shakeTween = tween(this.node);
  391. tos.forEach((to, index) => {
  392. const d = durations[index];
  393. let tweenOpts: ITweenOption | undefined;
  394. if (index === 0) {
  395. tweenOpts = {
  396. onStart: opts.onStart
  397. }
  398. } else if (index === tos.length - 1) {
  399. tweenOpts = {
  400. onComplete: opts.onComplete
  401. }
  402. }
  403. shakeTween.then(tween().to(d, { position: to }, tweenOpts));
  404. });
  405. return shakeTween.union();
  406. }