@egjs/axes
Version:
A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates. You can easily create a UI that responds to user actions.
385 lines (384 loc) • 12.2 kB
HTML
<html lang="en">
<head>
<title>Code coverage report for src/animation/EasingManager.ts</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../../prettify.css" />
<link rel="stylesheet" href="../../base.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type='text/css'>
.coverage-summary .sorter {
background-image: url(../../sort-arrow-sprite.png);
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='pad1'>
<h1>
<a href="../../index.html">All files</a> / <a href="index.html">src/animation</a> EasingManager.ts
</h1>
<div class='clearfix'>
</div>
</div>
<div class='status-line high'></div>
<pre><table class="coverage">
<tr><td class="line-count quiet">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114</td><td class="line-coverage quiet"><span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">292x</span>
<span class="cline-any cline-yes">292x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">484x</span>
<span class="cline-any cline-yes">484x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-no"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">97x</span>
<span class="cline-any cline-yes">97x</span>
<span class="cline-any cline-yes">97x</span>
<span class="cline-any cline-yes">97x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2535x</span>
<span class="cline-any cline-yes">2535x</span>
<span class="cline-any cline-yes">2535x</span>
<span class="cline-any cline-yes">2535x</span>
<span class="cline-any cline-yes">2535x</span>
<span class="cline-any cline-yes">5072x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2535x</span>
<span class="cline-any cline-yes">2535x</span>
<span class="cline-any cline-yes">2535x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2535x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">5072x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">5072x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">5072x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">13x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">13x</span>
<span class="cline-any cline-yes">13x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">5072x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">2535x</span>
<span class="cline-any cline-yes">2535x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">3503x</span>
<span class="cline-any cline-neutral"> </span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">import { AxesOption } from "../Axes";
import { Axis } from "../AxisManager";
import { getCirculatedPos } from "../Coordinate";
import { AnimationParam, UpdateAnimationOption } from "../types";
import { map } from "../utils";
import { AnimationManager, AnimationState } from "./AnimationManager";
export class EasingManager extends AnimationManager {
protected _useDuration = true;
protected _options: AxesOption;
private _durationOffset: number;
private _initialEasingPer: number;
private _prevEasingPer: number;
public interpolate(displacement: number, threshold: number): number {
const initSlope = this._easing(0.00001) / 0.00001;
return this._easing(displacement / (threshold * initSlope)) * threshold;
}
public updateAnimation(options: UpdateAnimationOption): void {
const animateParam = this._animateParam;
<span class="missing-if-branch" title="if path not taken" >I</span>if (!animateParam) {
<span class="cstat-no" title="statement not covered" > return;</span>
}
const diffTime = new Date().getTime() - animateParam.startTime;
const pos = options<span class="branch-0 cbranch-no" title="branch not covered" >?.destPos || animateParam.destPos;</span>
const duration = options<span class="branch-0 cbranch-no" title="branch not covered" >?.duration ?? animateParam.duration;</span>
if (options<span class="branch-0 cbranch-no" title="branch not covered" >?.restart || duration <= diffTime) {</span>
this.setTo(pos, duration - diffTime);
return;
}
if (options<span class="branch-0 cbranch-no" title="branch not covered" >?.destPos) {</span>
const currentPos = this.axisManager.get();
// When destination is changed, new delta should be calculated as remaining percent.
// For example, moving x:0, y:0 to x:200, y:200 and it has current easing percent of 92%. coordinate is x:184 and y:184
// If destination changes to x:300, y:300. xdelta:200, ydelta:200 changes to xdelta:116, ydelta:116 and use remaining easingPer as 100%, not 8% as previous.
// Therefore, original easingPer by time is kept. And divided by (1 - self._initialEasingPer) which means new total easing percent. Like calculating 8% as 100%.
this._initialEasingPer = this._prevEasingPer;
animateParam.delta = this.axisManager.getDelta(currentPos, pos);
animateParam.destPos = pos;
}
if (options<span class="branch-0 cbranch-no" title="branch not covered" >?.duration) {</span>
const ratio = (diffTime + this._durationOffset) / animateParam.duration;
// Use durationOffset for keeping animation ratio after duration is changed.
// newRatio = (diffTime + newDurationOffset) / newDuration = oldRatio
// newDurationOffset = oldRatio * newDuration - diffTime
this._durationOffset = ratio * duration - diffTime;
animateParam.duration = duration;
}
}
protected _initState(info: AnimationParam): AnimationState {
this._initialEasingPer = 0;
this._prevEasingPer = 0;
this._durationOffset = 0;
return {
pos: info.depaPos,
easingPer: 0,
finished: false,
};
}
protected _getNextState(prevState: AnimationState): AnimationState {
const animateParam = this._animateParam;
const prevPos = prevState.pos;
const destPos = animateParam.destPos;
const directions = map(prevPos, (value, key) => {
return value <= destPos[key] ? 1 : -1;
});
const diffTime = new Date().getTime() - animateParam.startTime;
const ratio = (diffTime + this._durationOffset) / animateParam.duration;
const easingPer = this._easing(ratio);
const toPos: Axis = this.axisManager.map(prevPos, (pos, options, key) => {
const nextPos =
ratio >= 1
? destPos[key]
: pos +
(animateParam.delta[key] * (easingPer - this._prevEasingPer)) /
(1 - this._initialEasingPer);
// Subtract distance from distance already moved.
// Recalculate the remaining distance.
// Fix the bouncing phenomenon by changing the range.
const circulatedPos = getCirculatedPos(
nextPos,
options.range,
options.circular as boolean[]
);
if (nextPos !== circulatedPos) {
// circular
const rangeOffset =
directions[key] * (options.range[1] - options.range[0]);
destPos[key] -= rangeOffset;
prevPos[key] -= rangeOffset;
}
return circulatedPos;
});
this._prevEasingPer = easingPer;
return {
pos: toPos,
easingPer,
finished: easingPer >= 1,
};
}
private _easing(p: number): number {
return p > 1 ? 1 : this._options.easing(p);
}
}
</pre></td></tr>
</table></pre>
<div class='push'></div><!-- for sticky footer -->
</div><!-- /wrapper -->
<div class='footer quiet pad2 space-top1 center small'>
Code coverage
generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Wed Sep 16 2026 14:00:55 GMT+0900 (Korean Standard Time)
</div>
</div>
<script src="../../prettify.js"></script>
<script>
window.onload = function () {
if (typeof prettyPrint === 'function') {
prettyPrint();
}
};
</script>
<script src="../../sorter.js"></script>
</body>
</html>