合同小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

118 lines
3.1 KiB

  1. import { raf, cancelRaf} from '../raf'
  2. // @ts-nocheck
  3. export class Timeline {
  4. state : string
  5. animations : Set<Animation> = new Set<Animation>()
  6. delAnimations : Animation[] = []
  7. startTimes : Map<Animation, number> = new Map<Animation, number>()
  8. pauseTime : number = 0
  9. pauseStart : number = Date.now()
  10. tickHandler : number = 0
  11. tickHandlers : number[] = []
  12. tick : (() => void) | null = null
  13. constructor() {
  14. this.state = 'Initiated';
  15. }
  16. start() {
  17. if (!(this.state == 'Initiated')) return;
  18. this.state = 'Started';
  19. let startTime = Date.now();
  20. this.pauseTime = 0;
  21. this.tick = () => {
  22. let now = Date.now();
  23. this.animations.forEach((animation : Animation) => {
  24. let t:number;
  25. const ani = this.startTimes.get(animation)
  26. if (ani == null) return
  27. if (ani < startTime) {
  28. t = now - startTime - animation.delay - this.pauseTime;
  29. } else {
  30. t = now - ani - animation.delay - this.pauseTime;
  31. }
  32. if (t > animation.duration) {
  33. this.delAnimations.push(animation)
  34. // 不能在 foreach 里面 对 集合进行删除操作
  35. // this.animations.delete(animation);
  36. t = animation.duration;
  37. }
  38. if (t > 0) animation.run(t);
  39. })
  40. // 不能在 foreach 里面 对 集合进行删除操作
  41. while (this.delAnimations.length > 0) {
  42. const animation = this.delAnimations.pop();
  43. if (animation == null) return
  44. this.animations.delete(animation);
  45. }
  46. // cancelAnimationFrame(this.tickHandler);
  47. if (this.state != 'Started') return
  48. this.tickHandler = raf(()=>{
  49. this.tick!()
  50. })
  51. this.tickHandlers.push(this.tickHandler)
  52. }
  53. if(this.tick != null) {
  54. this.tick!()
  55. }
  56. }
  57. pause() {
  58. if (!(this.state === 'Started')) return;
  59. this.state = 'Paused';
  60. this.pauseStart = Date.now();
  61. cancelRaf(this.tickHandler);
  62. // cancelRaf(this.tickHandler);
  63. }
  64. resume() {
  65. if (!(this.state === 'Paused')) return;
  66. this.state = 'Started';
  67. this.pauseTime += Date.now() - this.pauseStart;
  68. this.tick!();
  69. }
  70. reset() {
  71. this.pause();
  72. this.state = 'Initiated';
  73. this.pauseTime = 0;
  74. this.pauseStart = 0;
  75. this.animations.clear()
  76. this.delAnimations.clear()
  77. this.startTimes.clear()
  78. this.tickHandler = 0;
  79. }
  80. add(animation : Animation, startTime ?: number | null) {
  81. if (startTime == null) startTime = Date.now();
  82. this.animations.add(animation);
  83. this.startTimes.set(animation, startTime);
  84. }
  85. }
  86. export class Animation {
  87. startValue : number
  88. endValue : number
  89. duration : number
  90. timingFunction : (t : number) => number
  91. delay : number
  92. template : (t : number) => void
  93. constructor(
  94. startValue : number,
  95. endValue : number,
  96. duration : number,
  97. delay : number,
  98. timingFunction : (t : number) => number,
  99. template : (v : number) => void) {
  100. this.startValue = startValue;
  101. this.endValue = endValue;
  102. this.duration = duration;
  103. this.timingFunction = timingFunction;
  104. this.delay = delay;
  105. this.template = template;
  106. }
  107. run(time : number) {
  108. let range = this.endValue - this.startValue;
  109. let progress = time / this.duration
  110. if(progress != 1) progress = this.timingFunction(progress)
  111. this.template(this.startValue + range * progress)
  112. }
  113. }