vislite 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/AUTHORS.txt +6 -6
  2. package/CHANGELOG +7 -1
  3. package/LICENSE +20 -20
  4. package/README.md +53 -53
  5. package/lib/Buffer/index.umd.js +2 -2
  6. package/lib/Buffer/index.umd.min.js +2 -2
  7. package/lib/Canvas/index.umd.js +11 -6
  8. package/lib/Canvas/index.umd.min.js +3 -3
  9. package/lib/Cardinal/index.umd.js +2 -2
  10. package/lib/Cardinal/index.umd.min.js +2 -2
  11. package/lib/Eoap/index.umd.js +2 -2
  12. package/lib/Eoap/index.umd.min.js +2 -2
  13. package/lib/Hermite/index.umd.js +2 -2
  14. package/lib/Hermite/index.umd.min.js +2 -2
  15. package/lib/Matrix4/index.umd.js +2 -2
  16. package/lib/Matrix4/index.umd.min.js +2 -2
  17. package/lib/Mercator/index.umd.js +2 -2
  18. package/lib/Mercator/index.umd.min.js +2 -2
  19. package/lib/OralCanvas/index.es.js +11 -6
  20. package/lib/OralCanvas/index.es.min.js +3 -3
  21. package/lib/OralWebGL/index.es.js +10 -5
  22. package/lib/OralWebGL/index.es.min.js +3 -3
  23. package/lib/SVG/index.umd.js +9 -4
  24. package/lib/SVG/index.umd.min.js +3 -3
  25. package/lib/Shader/index.umd.js +2 -2
  26. package/lib/Shader/index.umd.min.js +2 -2
  27. package/lib/Texture/index.umd.js +2 -2
  28. package/lib/Texture/index.umd.min.js +2 -2
  29. package/lib/WebGL/index.umd.js +10 -5
  30. package/lib/WebGL/index.umd.min.js +3 -3
  31. package/lib/animation/index.umd.js +2 -2
  32. package/lib/animation/index.umd.min.js +2 -2
  33. package/lib/getLoopColors/index.umd.js +2 -2
  34. package/lib/getLoopColors/index.umd.min.js +2 -2
  35. package/lib/getWebGLContext/index.umd.js +2 -2
  36. package/lib/getWebGLContext/index.umd.min.js +2 -2
  37. package/lib/index.umd.js +11 -6
  38. package/lib/index.umd.min.js +3 -3
  39. package/lib/rotate/index.umd.js +2 -2
  40. package/lib/rotate/index.umd.min.js +2 -2
  41. package/lib/ruler/index.umd.js +2 -2
  42. package/lib/ruler/index.umd.min.js +2 -2
  43. package/lib/viewHandler/index.umd.js +2 -2
  44. package/lib/viewHandler/index.umd.min.js +2 -2
  45. package/miniprogram/ui-canvas/index.js +99 -99
  46. package/miniprogram/ui-canvas/index.json +4 -4
  47. package/miniprogram/ui-canvas/index.wxml +4 -4
  48. package/miniprogram/ui-canvas/index.wxss +5 -5
  49. package/package/Buffer/index.ts +1 -1
  50. package/package/Canvas/index.ts +1 -1
  51. package/package/Cardinal/index.ts +2 -2
  52. package/package/Eoap/index.ts +2 -2
  53. package/package/Hermite/index.ts +2 -2
  54. package/package/Matrix4/index.ts +2 -2
  55. package/package/Mercator/index.ts +2 -2
  56. package/package/OralCanvas/index.ts +1 -1
  57. package/package/OralWebGL/index.ts +1 -1
  58. package/package/SVG/index.ts +2 -2
  59. package/package/Shader/index.ts +1 -1
  60. package/package/Texture/index.ts +1 -1
  61. package/package/WebGL/index.ts +1 -1
  62. package/package/animation/index.ts +2 -2
  63. package/package/getLoopColors/index.ts +2 -2
  64. package/package/getWebGLContext/index.ts +39 -39
  65. package/package/index.ts +56 -56
  66. package/package/rotate/index.ts +2 -2
  67. package/package/ruler/index.ts +2 -2
  68. package/package/viewHandler/index.ts +2 -2
  69. package/package.json +1 -1
  70. package/src/Canvas.ts +56 -56
  71. package/src/Eoap.ts +66 -66
  72. package/src/Matrix4/index.ts +76 -76
  73. package/src/Matrix4/move.ts +12 -12
  74. package/src/Matrix4/rotate.ts +15 -15
  75. package/src/Matrix4/scale.ts +11 -11
  76. package/src/Matrix4/transform.ts +64 -64
  77. package/src/Mercator.ts +26 -26
  78. package/src/SVG.ts +23 -23
  79. package/src/WebGL.ts +52 -52
  80. package/src/animation.ts +99 -99
  81. package/src/common/assemble.ts +1 -1
  82. package/src/common/canvas/arc.ts +50 -50
  83. package/src/common/canvas/config.ts +157 -157
  84. package/src/common/canvas/gradient.ts +29 -29
  85. package/src/common/canvas/index.ts +10 -7
  86. package/src/common/canvas/painter.ts +355 -355
  87. package/src/common/canvas/texts.ts +18 -18
  88. package/src/common/setStyle.ts +5 -5
  89. package/src/common/svg/config.ts +173 -173
  90. package/src/common/svg/index.ts +334 -334
  91. package/src/common/svg/tool.ts +43 -43
  92. package/src/common/webgl/buffer.ts +79 -79
  93. package/src/common/webgl/doDraw.ts +106 -106
  94. package/src/common/webgl/getColorFactory.ts +26 -26
  95. package/src/common/webgl/getShader.ts +75 -75
  96. package/src/common/webgl/getTexture.ts +11 -11
  97. package/src/common/webgl/getWebGLContext.ts +27 -27
  98. package/src/common/webgl/index.ts +216 -216
  99. package/src/common/webgl/shader.ts +75 -75
  100. package/src/common/webgl/texture.ts +99 -99
  101. package/src/getLoopColors.ts +42 -42
  102. package/src/interpolation/Cardinal.ts +109 -109
  103. package/src/interpolation/Hermite.ts +65 -65
  104. package/src/rotate.ts +7 -7
  105. package/src/ruler.ts +99 -99
  106. package/src/viewHandler.ts +139 -139
  107. package/types/Buffer.d.ts +23 -23
  108. package/types/Canvas.d.ts +282 -282
  109. package/types/CanvasConfig.d.ts +80 -80
  110. package/types/Cardinal.d.ts +13 -13
  111. package/types/Gradient.d.ts +14 -14
  112. package/types/Hermite.d.ts +18 -18
  113. package/types/Map.d.ts +9 -9
  114. package/types/Matrix4.d.ts +42 -42
  115. package/types/Object3D.d.ts +113 -113
  116. package/types/SVG.d.ts +210 -210
  117. package/types/SVGConfig.d.ts +58 -58
  118. package/types/Scene3D.d.ts +6 -6
  119. package/types/Shader.d.ts +15 -15
  120. package/types/Texture.d.ts +16 -16
  121. package/types/WebGL.d.ts +38 -38
  122. package/types/animation.d.ts +6 -6
  123. package/types/getLoopColors.d.ts +2 -2
  124. package/types/getWebGLContext.d.ts +2 -2
  125. package/types/index.d.ts +129 -129
  126. package/types/rotate.d.ts +2 -2
  127. package/types/ruler.d.ts +2 -2
  128. package/types/viewHandler.d.ts +12 -12
  129. package/uni-app/ui-canvas.vue +212 -212
@@ -1,15 +1,15 @@
1
- /**
2
- * 围绕0Z轴旋转
3
- * 其它的旋转可以借助transform实现
4
- * 旋转角度单位采用弧度制
5
- */
6
- export default function (deg: number) {
7
- let sin = Math.sin(deg),
8
- cos = Math.cos(deg)
9
- return [
10
- cos, sin, 0, 0,
11
- -sin, cos, 0, 0,
12
- 0, 0, 1, 0,
13
- 0, 0, 0, 1
14
- ]
15
- }
1
+ /**
2
+ * 围绕0Z轴旋转
3
+ * 其它的旋转可以借助transform实现
4
+ * 旋转角度单位采用弧度制
5
+ */
6
+ export default function (deg: number) {
7
+ let sin = Math.sin(deg),
8
+ cos = Math.cos(deg)
9
+ return [
10
+ cos, sin, 0, 0,
11
+ -sin, cos, 0, 0,
12
+ 0, 0, 1, 0,
13
+ 0, 0, 0, 1
14
+ ]
15
+ }
@@ -1,11 +1,11 @@
1
- /**
2
- * 围绕圆心x、y和z分别缩放xTimes, yTimes和zTimes倍
3
- */
4
- export default function (xTimes: number, yTimes: number, zTimes: number, cx: number = 0, cy: number = 0, cz: number = 0) {
5
- return [
6
- xTimes, 0, 0, 0,
7
- 0, yTimes, 0, 0,
8
- 0, 0, zTimes, 0,
9
- cx - cx * xTimes, cy - cy * yTimes, cz - cz * zTimes, 1
10
- ]
11
- }
1
+ /**
2
+ * 围绕圆心x、y和z分别缩放xTimes, yTimes和zTimes倍
3
+ */
4
+ export default function (xTimes: number, yTimes: number, zTimes: number, cx: number = 0, cy: number = 0, cz: number = 0) {
5
+ return [
6
+ xTimes, 0, 0, 0,
7
+ 0, yTimes, 0, 0,
8
+ 0, 0, zTimes, 0,
9
+ cx - cx * xTimes, cy - cy * yTimes, cz - cz * zTimes, 1
10
+ ]
11
+ }
@@ -1,64 +1,64 @@
1
- /**
2
- * 针对任意射线(a1,b1,c1)->(a2,b2,c2)
3
- * 计算出两个变换矩阵
4
- * 分别为:任意射线变成OZ轴变换矩阵 + OZ轴变回原来的射线的变换矩阵
5
- */
6
- export default function (a1: number, b1: number, c1: number, a2: number, b2: number, c2: number) {
7
-
8
- if (typeof a1 === 'number' && typeof b1 === 'number') {
9
-
10
- // 如果设置两个点
11
- // 表示二维上围绕某个点旋转
12
- if (typeof c1 !== 'number') {
13
- c1 = 0
14
- a2 = a1
15
- b2 = b1
16
- c2 = 1
17
- }
18
- // 只设置三个点(设置不足六个点都认为只设置了三个点)
19
- // 表示围绕从原点出发的射线旋转
20
- else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
21
- a2 = a1
22
- b2 = b1
23
- c2 = c1
24
- a1 = 0
25
- b1 = 0
26
- c1 = 0
27
- }
28
-
29
- if (a1 == a2 && b1 == b2 && c1 == c2) throw new Error('It\'s not a legitimate ray!')
30
-
31
- let sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)),
32
- cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1,
33
- sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0,
34
-
35
- b = (a2 - a1) * sin1 + (b2 - b1) * cos1,
36
- c = c2 - c1,
37
-
38
- sqrt2 = Math.sqrt(b * b + c * c),
39
- cos2 = sqrt2 != 0 ? c / sqrt2 : 1,
40
- sin2 = sqrt2 != 0 ? b / sqrt2 : 0
41
-
42
- return [
43
-
44
- // 任意射线变成OZ轴变换矩阵
45
- [
46
- cos1, cos2 * sin1, sin1 * sin2, 0,
47
- -sin1, cos1 * cos2, cos1 * sin2, 0,
48
- 0, -sin2, cos2, 0,
49
- b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
50
- ],
51
-
52
- // OZ轴变回原来的射线的变换矩阵
53
- [
54
- cos1, -sin1, 0, 0,
55
- cos2 * sin1, cos2 * cos1, -sin2, 0,
56
- sin1 * sin2, cos1 * sin2, cos2, 0,
57
- a1, b1, c1, 1
58
- ]
59
-
60
- ]
61
- } else {
62
- throw new Error('a1 and b1 is required!')
63
- }
64
- }
1
+ /**
2
+ * 针对任意射线(a1,b1,c1)->(a2,b2,c2)
3
+ * 计算出两个变换矩阵
4
+ * 分别为:任意射线变成OZ轴变换矩阵 + OZ轴变回原来的射线的变换矩阵
5
+ */
6
+ export default function (a1: number, b1: number, c1: number, a2: number, b2: number, c2: number) {
7
+
8
+ if (typeof a1 === 'number' && typeof b1 === 'number') {
9
+
10
+ // 如果设置两个点
11
+ // 表示二维上围绕某个点旋转
12
+ if (typeof c1 !== 'number') {
13
+ c1 = 0
14
+ a2 = a1
15
+ b2 = b1
16
+ c2 = 1
17
+ }
18
+ // 只设置三个点(设置不足六个点都认为只设置了三个点)
19
+ // 表示围绕从原点出发的射线旋转
20
+ else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
21
+ a2 = a1
22
+ b2 = b1
23
+ c2 = c1
24
+ a1 = 0
25
+ b1 = 0
26
+ c1 = 0
27
+ }
28
+
29
+ if (a1 == a2 && b1 == b2 && c1 == c2) throw new Error('It\'s not a legitimate ray!')
30
+
31
+ let sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)),
32
+ cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1,
33
+ sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0,
34
+
35
+ b = (a2 - a1) * sin1 + (b2 - b1) * cos1,
36
+ c = c2 - c1,
37
+
38
+ sqrt2 = Math.sqrt(b * b + c * c),
39
+ cos2 = sqrt2 != 0 ? c / sqrt2 : 1,
40
+ sin2 = sqrt2 != 0 ? b / sqrt2 : 0
41
+
42
+ return [
43
+
44
+ // 任意射线变成OZ轴变换矩阵
45
+ [
46
+ cos1, cos2 * sin1, sin1 * sin2, 0,
47
+ -sin1, cos1 * cos2, cos1 * sin2, 0,
48
+ 0, -sin2, cos2, 0,
49
+ b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
50
+ ],
51
+
52
+ // OZ轴变回原来的射线的变换矩阵
53
+ [
54
+ cos1, -sin1, 0, 0,
55
+ cos2 * sin1, cos2 * cos1, -sin2, 0,
56
+ sin1 * sin2, cos1 * sin2, cos2, 0,
57
+ a1, b1, c1, 1
58
+ ]
59
+
60
+ ]
61
+ } else {
62
+ throw new Error('a1 and b1 is required!')
63
+ }
64
+ }
package/src/Mercator.ts CHANGED
@@ -1,27 +1,27 @@
1
- import MapType from '../types/Map'
2
-
3
- /* 墨卡托投影 */
4
- class Mercator implements MapType {
5
- readonly name: string = 'Mercator'
6
-
7
- use: (λ: number, φ: number) => number[]
8
- constructor(scale: number = 7, center: number[] = [107, 36]) {
9
-
10
- let perimeter = 100 * scale * Math.PI // 半周长
11
-
12
- let help = perimeter / 180
13
-
14
- let cx = help * center[0] // 中心横坐标
15
- let cy = -1 * help * center[1] // 中心纵坐标
16
-
17
- this.use = (λ: number, φ: number) => {
18
- return [
19
- (help * λ - cx) * 0.8,
20
- -1 * help * φ - cy
21
- ]
22
- }
23
- }
24
-
25
- }
26
-
1
+ import MapType from '../types/Map'
2
+
3
+ /* 墨卡托投影 */
4
+ class Mercator implements MapType {
5
+ readonly name: string = 'Mercator'
6
+
7
+ use: (λ: number, φ: number) => number[]
8
+ constructor(scale: number = 7, center: number[] = [107, 36]) {
9
+
10
+ let perimeter = 100 * scale * Math.PI // 半周长
11
+
12
+ let help = perimeter / 180
13
+
14
+ let cx = help * center[0] // 中心横坐标
15
+ let cy = -1 * help * center[1] // 中心纵坐标
16
+
17
+ this.use = (λ: number, φ: number) => {
18
+ return [
19
+ (help * λ - cx) * 0.8,
20
+ -1 * help * φ - cy
21
+ ]
22
+ }
23
+ }
24
+
25
+ }
26
+
27
27
  export default Mercator
package/src/SVG.ts CHANGED
@@ -1,24 +1,24 @@
1
- import SVGType from '../types/SVG'
2
- import OralSVG from './common/svg/index'
3
-
4
- class SVG extends OralSVG implements SVGType {
5
- constructor(el: HTMLElement | null) {
6
- if (!el) {
7
- throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.")
8
- }
9
-
10
- let width = el.clientWidth, height = el.clientHeight
11
-
12
- let ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
13
- el.appendChild(ViewSVG)
14
-
15
- ViewSVG.setAttribute("width", width + "")
16
- ViewSVG.setAttribute("height", height + "")
17
-
18
- ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height)
19
-
20
- super(ViewSVG)
21
- }
22
- }
23
-
1
+ import SVGType from '../types/SVG'
2
+ import OralSVG from './common/svg/index'
3
+
4
+ class SVG extends OralSVG implements SVGType {
5
+ constructor(el: HTMLElement | null) {
6
+ if (!el) {
7
+ throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.")
8
+ }
9
+
10
+ let width = el.clientWidth, height = el.clientHeight
11
+
12
+ let ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
13
+ el.appendChild(ViewSVG)
14
+
15
+ ViewSVG.setAttribute("width", width + "")
16
+ ViewSVG.setAttribute("height", height + "")
17
+
18
+ ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height)
19
+
20
+ super(ViewSVG)
21
+ }
22
+ }
23
+
24
24
  export default SVG
package/src/WebGL.ts CHANGED
@@ -1,53 +1,53 @@
1
- import WebGLType from '../types/WebGL'
2
- import OralWebGL from './common/webgl/index'
3
-
4
- class WebGL extends OralWebGL implements WebGLType {
5
- constructor(el: HTMLElement | null) {
6
- if (!el) {
7
- throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.")
8
- }
9
-
10
- let width = el.clientWidth, height = el.clientHeight
11
-
12
- let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement
13
-
14
- let _el = el as any
15
-
16
- // 如果已经初始化过了
17
- if (_el._vislite_canvas_) {
18
- ViewCanvas = _el._vislite_canvas_[0]
19
- RegionCanvas = _el._vislite_canvas_[1]
20
- }
21
-
22
- // 否则就初始化
23
- else {
24
-
25
- RegionCanvas = document.createElement('canvas')
26
- el.appendChild(RegionCanvas)
27
-
28
- RegionCanvas.style.position = 'absolute'
29
- RegionCanvas.style.zIndex = "-1"
30
-
31
- ViewCanvas = document.createElement('canvas')
32
- el.appendChild(ViewCanvas)
33
-
34
- _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
35
-
36
- el.setAttribute('vislite', 'WebGL')
37
- }
38
-
39
- // 设置画布大小
40
- for (let canvas of [ViewCanvas, RegionCanvas]) {
41
-
42
- canvas.style.width = width + "px"
43
- canvas.setAttribute('width', width + "")
44
-
45
- canvas.style.height = height + "px"
46
- canvas.setAttribute('height', height + "")
47
- }
48
-
49
- super(ViewCanvas, RegionCanvas)
50
- }
51
- }
52
-
1
+ import WebGLType from '../types/WebGL'
2
+ import OralWebGL from './common/webgl/index'
3
+
4
+ class WebGL extends OralWebGL implements WebGLType {
5
+ constructor(el: HTMLElement | null) {
6
+ if (!el) {
7
+ throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.")
8
+ }
9
+
10
+ let width = el.clientWidth, height = el.clientHeight
11
+
12
+ let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement
13
+
14
+ let _el = el as any
15
+
16
+ // 如果已经初始化过了
17
+ if (_el._vislite_canvas_) {
18
+ ViewCanvas = _el._vislite_canvas_[0]
19
+ RegionCanvas = _el._vislite_canvas_[1]
20
+ }
21
+
22
+ // 否则就初始化
23
+ else {
24
+
25
+ RegionCanvas = document.createElement('canvas')
26
+ el.appendChild(RegionCanvas)
27
+
28
+ RegionCanvas.style.position = 'absolute'
29
+ RegionCanvas.style.zIndex = "-1"
30
+
31
+ ViewCanvas = document.createElement('canvas')
32
+ el.appendChild(ViewCanvas)
33
+
34
+ _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
35
+
36
+ el.setAttribute('vislite', 'WebGL')
37
+ }
38
+
39
+ // 设置画布大小
40
+ for (let canvas of [ViewCanvas, RegionCanvas]) {
41
+
42
+ canvas.style.width = width + "px"
43
+ canvas.setAttribute('width', width + "")
44
+
45
+ canvas.style.height = height + "px"
46
+ canvas.setAttribute('height', height + "")
47
+ }
48
+
49
+ super(ViewCanvas, RegionCanvas)
50
+ }
51
+ }
52
+
53
53
  export default WebGL
package/src/animation.ts CHANGED
@@ -1,100 +1,100 @@
1
- //当前正在运动的动画的tick函数堆栈
2
- let $timers: any[] = []
3
- //唯一定时器的定时间隔
4
- let $interval = 13
5
- //定时器ID
6
- let $timerId: any
7
-
8
- /**
9
- * 动画轮播
10
- * @param {function} doback 轮询函数,有一个形参deep,0-1,表示执行进度
11
- * @param {number} duration 动画时长,可选
12
- * @param {function} callback 动画结束回调,可选,有一个形参deep,0-1,表示执行进度
13
- *
14
- * @returns {function} 返回一个函数,调用该函数,可以提前结束动画
15
- */
16
- export default function (doback: (deep: number) => void, duration: number = 400, callback: (deep: number) => void = () => { }): Function {
17
-
18
-
19
- let clock = {
20
- //把tick函数推入堆栈
21
- "timer": function (tick: (deep: number) => void, duration: number, callback: (deep: number) => void) {
22
- if (!tick) {
23
- throw new Error('Tick is required!')
24
- }
25
- let id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0)
26
- $timers.push({
27
- "id": id,
28
- "createTime": new Date(),
29
- "tick": tick,
30
- "duration": duration,
31
- "callback": callback
32
- });
33
- clock.start()
34
- return id
35
- },
36
-
37
- //开启唯一的定时器timerId
38
- "start": function () {
39
- if (!$timerId) {
40
- $timerId = setInterval(clock.tick, $interval)
41
- }
42
- },
43
-
44
- //被定时器调用,遍历timers堆栈
45
- "tick": function () {
46
- let createTime: Date, flag: number, tick: (deep: number) => void, callback: (deep: number) => void, timer: any, duration: number, passTime: number,
47
- timers: any[] = $timers
48
- $timers = []
49
- $timers.length = 0
50
- for (flag = 0; flag < timers.length; flag++) {
51
- //初始化数据
52
- timer = timers[flag]
53
- createTime = timer.createTime
54
- tick = timer.tick
55
- duration = timer.duration
56
- callback = timer.callback
57
-
58
- //执行
59
- passTime = (+new Date().valueOf() - createTime.valueOf()) / duration
60
- passTime = passTime > 1 ? 1 : passTime
61
- tick(passTime)
62
- if (passTime < 1 && timer.id) {
63
- //动画没有结束再添加
64
- $timers.push(timer)
65
- } else {
66
- callback(passTime)
67
- }
68
- }
69
- if ($timers.length <= 0) {
70
- clock.stop()
71
- }
72
- },
73
-
74
- //停止定时器,重置timerId=null
75
- "stop": function () {
76
- if ($timerId) {
77
- clearInterval($timerId)
78
- $timerId = null
79
- }
80
- }
81
- };
82
-
83
- let id = clock.timer(function (deep: number) {
84
- //其中deep为0-1,表示改变的程度
85
- doback(deep)
86
- }, duration, callback)
87
-
88
- // 返回一个函数
89
- // 用于在动画结束前结束动画
90
- return function () {
91
- let i: string
92
- for (i in $timers) {
93
- if ($timers[i].id == id) {
94
- $timers[i].id = undefined
95
- return
96
- }
97
- }
98
- }
99
-
1
+ //当前正在运动的动画的tick函数堆栈
2
+ let $timers: any[] = []
3
+ //唯一定时器的定时间隔
4
+ let $interval = 13
5
+ //定时器ID
6
+ let $timerId: any
7
+
8
+ /**
9
+ * 动画轮播
10
+ * @param {function} doback 轮询函数,有一个形参deep,0-1,表示执行进度
11
+ * @param {number} duration 动画时长,可选
12
+ * @param {function} callback 动画结束回调,可选,有一个形参deep,0-1,表示执行进度
13
+ *
14
+ * @returns {function} 返回一个函数,调用该函数,可以提前结束动画
15
+ */
16
+ export default function (doback: (deep: number) => void, duration: number = 400, callback: (deep: number) => void = () => { }): Function {
17
+
18
+
19
+ let clock = {
20
+ //把tick函数推入堆栈
21
+ "timer": function (tick: (deep: number) => void, duration: number, callback: (deep: number) => void) {
22
+ if (!tick) {
23
+ throw new Error('Tick is required!')
24
+ }
25
+ let id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0)
26
+ $timers.push({
27
+ "id": id,
28
+ "createTime": new Date(),
29
+ "tick": tick,
30
+ "duration": duration,
31
+ "callback": callback
32
+ });
33
+ clock.start()
34
+ return id
35
+ },
36
+
37
+ //开启唯一的定时器timerId
38
+ "start": function () {
39
+ if (!$timerId) {
40
+ $timerId = setInterval(clock.tick, $interval)
41
+ }
42
+ },
43
+
44
+ //被定时器调用,遍历timers堆栈
45
+ "tick": function () {
46
+ let createTime: Date, flag: number, tick: (deep: number) => void, callback: (deep: number) => void, timer: any, duration: number, passTime: number,
47
+ timers: any[] = $timers
48
+ $timers = []
49
+ $timers.length = 0
50
+ for (flag = 0; flag < timers.length; flag++) {
51
+ //初始化数据
52
+ timer = timers[flag]
53
+ createTime = timer.createTime
54
+ tick = timer.tick
55
+ duration = timer.duration
56
+ callback = timer.callback
57
+
58
+ //执行
59
+ passTime = (+new Date().valueOf() - createTime.valueOf()) / duration
60
+ passTime = passTime > 1 ? 1 : passTime
61
+ tick(passTime)
62
+ if (passTime < 1 && timer.id) {
63
+ //动画没有结束再添加
64
+ $timers.push(timer)
65
+ } else {
66
+ callback(passTime)
67
+ }
68
+ }
69
+ if ($timers.length <= 0) {
70
+ clock.stop()
71
+ }
72
+ },
73
+
74
+ //停止定时器,重置timerId=null
75
+ "stop": function () {
76
+ if ($timerId) {
77
+ clearInterval($timerId)
78
+ $timerId = null
79
+ }
80
+ }
81
+ };
82
+
83
+ let id = clock.timer(function (deep: number) {
84
+ //其中deep为0-1,表示改变的程度
85
+ doback(deep)
86
+ }, duration, callback)
87
+
88
+ // 返回一个函数
89
+ // 用于在动画结束前结束动画
90
+ return function () {
91
+ let i: string
92
+ for (i in $timers) {
93
+ if ($timers[i].id == id) {
94
+ $timers[i].id = undefined
95
+ return
96
+ }
97
+ }
98
+ }
99
+
100
100
  }
@@ -7,7 +7,7 @@ export default function (begin: number, end: number, step: number, count: number
7
7
  for (let i = 0; i < count; i++) {
8
8
 
9
9
  // 如果当前位可以进1
10
- if (val[i] < end) {
10
+ if (val[i] + step < end) {
11
11
  val[i] = +(val[i] + step).toFixed(7)
12
12
  break
13
13
  }