Skip to content

Commit a1e04c4

Browse files
author
alphabetX
committed
fix(yoyo): yoyo repeat with wrong value
1 parent eb07dd2 commit a1e04c4

File tree

7 files changed

+92
-105
lines changed

7 files changed

+92
-105
lines changed

‎dist/tween.amd.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -751,16 +751,9 @@ define(['exports'], (function (exports) { 'use strict';
751751
var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
752752
var totalTime = this._duration + this._repeat * durationAndDelay;
753753
var calculateElapsedPortion = function () {
754-
if (_this._duration === 0)
754+
if (_this._duration === 0 || elapsedTime > totalTime)
755755
return 1;
756-
if (elapsedTime > totalTime) {
757-
return 1;
758-
}
759-
var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
760-
var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
761-
// TODO use %?
762-
// const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
763-
var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
756+
var portion = Math.min(elapsedTime / _this._duration, 1);
764757
if (portion === 0 && elapsedTime === _this._duration) {
765758
return 1;
766759
}

‎dist/tween.cjs‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -753,16 +753,9 @@ var Tween = /** @class */ (function () {
753753
var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
754754
var totalTime = this._duration + this._repeat * durationAndDelay;
755755
var calculateElapsedPortion = function () {
756-
if (_this._duration === 0)
756+
if (_this._duration === 0 || elapsedTime > totalTime)
757757
return 1;
758-
if (elapsedTime > totalTime) {
759-
return 1;
760-
}
761-
var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
762-
var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
763-
// TODO use %?
764-
// const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
765-
var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
758+
var portion = Math.min(elapsedTime / _this._duration, 1);
766759
if (portion === 0 && elapsedTime === _this._duration) {
767760
return 1;
768761
}

‎dist/tween.esm.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -749,16 +749,9 @@ var Tween = /** @class */ (function () {
749749
var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
750750
var totalTime = this._duration + this._repeat * durationAndDelay;
751751
var calculateElapsedPortion = function () {
752-
if (_this._duration === 0)
752+
if (_this._duration === 0 || elapsedTime > totalTime)
753753
return 1;
754-
if (elapsedTime > totalTime) {
755-
return 1;
756-
}
757-
var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
758-
var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
759-
// TODO use %?
760-
// const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
761-
var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
754+
var portion = Math.min(elapsedTime / _this._duration, 1);
762755
if (portion === 0 && elapsedTime === _this._duration) {
763756
return 1;
764757
}

‎dist/tween.umd.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -755,16 +755,9 @@
755755
var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
756756
var totalTime = this._duration + this._repeat * durationAndDelay;
757757
var calculateElapsedPortion = function () {
758-
if (_this._duration === 0)
758+
if (_this._duration === 0 || elapsedTime > totalTime)
759759
return 1;
760-
if (elapsedTime > totalTime) {
761-
return 1;
762-
}
763-
var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
764-
var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
765-
// TODO use %?
766-
// const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
767-
var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
760+
var portion = Math.min(elapsedTime / _this._duration, 1);
768761
if (portion === 0 && elapsedTime === _this._duration) {
769762
return 1;
770763
}

‎examples/10_yoyo.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ <h2>10 _ yoyo</h2>
3737
<div id="target4" data-rotation="0" data-y="0" class="box" style="left: 600px; top: 0px">
3838
yoyo with repeat forever, relative values
3939
</div>
40+
<div id="target5" data-rotation="0" data-y="0" class="box" style="left: 800px; top: 0px">
41+
yoyo with repeat forever, relative values, without delay
42+
</div>
4043
</div>
4144

4245
<style type="text/css">
@@ -67,6 +70,9 @@ <h2>10 _ yoyo</h2>
6770
#target4 {
6871
background: skyblue;
6972
}
73+
#target5 {
74+
background: rgb(1, 177, 246);
75+
}
7076
</style>
7177
</body>
7278
</html>

‎examples/10_yoyo.js‎

Lines changed: 75 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -5,86 +5,101 @@ const group = new Group()
55

66
animate()
77

8+
const tweenMap = new Map()
9+
810
const target1 = document.getElementById('target1')
9-
const tween1 = new Tween(target1.dataset, group)
10-
.to({rotation: 360, y: 300}, 750)
11-
.repeat(1)
12-
.delay(1000)
13-
.yoyo(true)
14-
.easing(Easing.Cubic.InOut)
15-
.onUpdate(function (object) {
16-
updateBox(target1, object)
17-
})
18-
.start()
11+
tweenMap.set(
12+
'tween1',
13+
new Tween(target1.dataset, group)
14+
.to({rotation: 360, y: 300}, 750)
15+
.repeat(Infinity)
16+
.delay(1000)
17+
.yoyo(true)
18+
.easing(Easing.Quadratic.InOut)
19+
.onUpdate(function (object) {
20+
updateBox(target1, object)
21+
})
22+
.start(),
23+
)
1924
const target2 = document.getElementById('target2')
20-
const tween2 = new Tween(target2.dataset, group)
21-
.to({rotation: 360, y: 300}, 750)
22-
.repeat(Infinity)
23-
.delay(1000)
24-
.yoyo(true)
25-
.easing(Easing.Cubic.InOut)
26-
.onUpdate(function (object) {
27-
updateBox(target2, object)
28-
})
29-
.start()
25+
26+
tweenMap.set(
27+
'tween2',
28+
new Tween(target2.dataset, group)
29+
.to({rotation: 360, y: 300}, 750)
30+
.repeat(Infinity)
31+
.delay(1000)
32+
.yoyo(true)
33+
.easing(Easing.Cubic.InOut)
34+
.onUpdate(function (object) {
35+
updateBox(target2, object)
36+
})
37+
.start(),
38+
)
3039
const target3 = document.getElementById('target3')
31-
const tween3 = new Tween(target3.dataset, group)
32-
.to({rotation: '+360', y: '+300'}, 750)
33-
.repeat(1)
34-
.delay(1000)
35-
.yoyo(true)
36-
.easing(Easing.Cubic.InOut)
37-
.onUpdate(function (object) {
38-
updateBox(target3, object)
39-
})
40-
.start()
40+
tweenMap.set(
41+
'tween3',
42+
new Tween(target3.dataset, group)
43+
.to({rotation: '+360', y: '+300'}, 750)
44+
.repeat(1)
45+
.delay(1000)
46+
.yoyo(true)
47+
.easing(Easing.Cubic.InOut)
48+
.onUpdate(function (object) {
49+
updateBox(target3, object)
50+
})
51+
.start(),
52+
)
4153
const target4 = document.getElementById('target4')
42-
const tween4 = new Tween(target4.dataset, group)
43-
.to({rotation: '+360', y: '+300'}, 750)
44-
.repeat(Infinity)
45-
.delay(1000)
46-
.yoyo(true)
47-
.easing(Easing.Cubic.InOut)
48-
.onUpdate(function (object) {
49-
updateBox(target4, object)
50-
})
51-
.start()
54+
tweenMap.set(
55+
'tween4',
56+
new Tween(target4.dataset, group)
57+
.to({rotation: '+360', y: '+300'}, 750)
58+
.repeat(Infinity)
59+
.delay(1000)
60+
.yoyo(true)
61+
.easing(Easing.Quadratic.InOut)
62+
.onUpdate(function (object) {
63+
updateBox(target4, object)
64+
})
65+
.start(),
66+
)
67+
68+
const target5 = document.getElementById('target5')
69+
tweenMap.set(
70+
'tween5',
71+
new Tween(target5.dataset, group)
72+
.to({rotation: '+360', y: '+300'}, 1050)
73+
.repeat(Infinity)
74+
// .delay(1000) // without delay
75+
.yoyo(true)
76+
.easing(Easing.Quadratic.InOut)
77+
.onUpdate(function (object) {
78+
updateBox(target5, object)
79+
})
80+
.start(),
81+
)
5282

5383
// TODO perhaps add these methods to Group
5484

5585
const restart = (window.restart = function () {
56-
tween1.stop().start()
57-
tween2.stop().start()
58-
tween3.stop().start()
59-
tween4.stop().start()
86+
tweenMap.forEach(tween => tween.start())
6087
})
6188

6289
const stop = (window.stop = function () {
63-
tween1.stop()
64-
tween2.stop()
65-
tween3.stop()
66-
tween4.stop()
90+
tweenMap.forEach(tween => tween.stop())
6791
})
6892

6993
const start = (window.start = function () {
70-
tween1.start()
71-
tween2.start()
72-
tween3.start()
73-
tween4.start()
94+
tweenMap.forEach(tween => tween.start())
7495
})
7596

7697
const pause = (window.pause = function () {
77-
tween1.pause()
78-
tween2.pause()
79-
tween3.pause()
80-
tween4.pause()
98+
tweenMap.forEach(tween => tween.pause())
8199
})
82100

83101
const resume = (window.resume = function () {
84-
tween1.resume()
85-
tween2.resume()
86-
tween3.resume()
87-
tween4.resume()
102+
tweenMap.forEach(tween => tween.resume())
88103
})
89104

90105
function animate(time) {

‎src/Tween.ts‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -474,22 +474,16 @@ export class Tween<T extends UnknownProps = any> {
474474
const totalTime = this._duration + this._repeat * durationAndDelay
475475

476476
const calculateElapsedPortion = () => {
477-
if (this._duration === 0) return 1
478-
if (elapsedTime > totalTime) {
479-
return 1
480-
}
477+
if (this._duration === 0 || elapsedTime > totalTime) return 1
481478

482-
const timesRepeated = Math.trunc(elapsedTime / durationAndDelay)
483-
const timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay
484-
// TODO use %?
485-
// const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
479+
const portion = Math.min(elapsedTime / this._duration, 1)
486480

487-
const portion = Math.min(timeIntoCurrentRepeat / this._duration, 1)
488481
if (portion === 0 && elapsedTime === this._duration) {
489482
return 1
490483
}
491484
return portion
492485
}
486+
493487
const elapsed = calculateElapsedPortion()
494488
const value = this._easingFunction(elapsed)
495489

0 commit comments

Comments
 (0)