fix(yoyo): yoyo repeat with wrong value

alphabetX · alphabetX · commit a1e04c41cc01 · 2024-09-13T13:55:12.000+08:00
diff --git a/dist/tween.amd.js b/dist/tween.amd.js
@@ -751,16 +751,9 @@ define(['exports'], (function (exports) { 'use strict';
             var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
             var totalTime = this._duration + this._repeat * durationAndDelay;
             var calculateElapsedPortion = function () {
-                if (_this._duration === 0)
+                if (_this._duration === 0 || elapsedTime > totalTime)
                     return 1;
-                if (elapsedTime > totalTime) {
-                    return 1;
-                }
-                var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
-                var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
-                // TODO use %?
-                // const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
-                var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
+                var portion = Math.min(elapsedTime / _this._duration, 1);
                 if (portion === 0 && elapsedTime === _this._duration) {
                     return 1;
                 }
diff --git a/dist/tween.cjs b/dist/tween.cjs
@@ -753,16 +753,9 @@ var Tween = /** @class */ (function () {
         var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
         var totalTime = this._duration + this._repeat * durationAndDelay;
         var calculateElapsedPortion = function () {
-            if (_this._duration === 0)
+            if (_this._duration === 0 || elapsedTime > totalTime)
                 return 1;
-            if (elapsedTime > totalTime) {
-                return 1;
-            }
-            var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
-            var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
-            // TODO use %?
-            // const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
-            var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
+            var portion = Math.min(elapsedTime / _this._duration, 1);
             if (portion === 0 && elapsedTime === _this._duration) {
                 return 1;
             }
diff --git a/dist/tween.esm.js b/dist/tween.esm.js
@@ -749,16 +749,9 @@ var Tween = /** @class */ (function () {
         var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
         var totalTime = this._duration + this._repeat * durationAndDelay;
         var calculateElapsedPortion = function () {
-            if (_this._duration === 0)
+            if (_this._duration === 0 || elapsedTime > totalTime)
                 return 1;
-            if (elapsedTime > totalTime) {
-                return 1;
-            }
-            var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
-            var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
-            // TODO use %?
-            // const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
-            var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
+            var portion = Math.min(elapsedTime / _this._duration, 1);
             if (portion === 0 && elapsedTime === _this._duration) {
                 return 1;
             }
diff --git a/dist/tween.umd.js b/dist/tween.umd.js
@@ -755,16 +755,9 @@
             var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
             var totalTime = this._duration + this._repeat * durationAndDelay;
             var calculateElapsedPortion = function () {
-                if (_this._duration === 0)
+                if (_this._duration === 0 || elapsedTime > totalTime)
                     return 1;
-                if (elapsedTime > totalTime) {
-                    return 1;
-                }
-                var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
-                var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
-                // TODO use %?
-                // const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
-                var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
+                var portion = Math.min(elapsedTime / _this._duration, 1);
                 if (portion === 0 && elapsedTime === _this._duration) {
                     return 1;
                 }
diff --git a/examples/10_yoyo.html b/examples/10_yoyo.html
@@ -37,6 +37,9 @@ <h2>10 _ yoyo</h2>
 			<div id="target4" data-rotation="0" data-y="0" class="box" style="left: 600px; top: 0px">
 				yoyo with repeat forever, relative values
 			</div>
+			<div id="target5" data-rotation="0" data-y="0" class="box" style="left: 800px; top: 0px">
+				yoyo with repeat forever, relative values, without delay
+			</div>
 		</div>
 
 		<style type="text/css">
@@ -67,6 +70,9 @@ <h2>10 _ yoyo</h2>
 			#target4 {
 				background: skyblue;
 			}
+			#target5 {
+				background: rgb(1, 177, 246);
+			}
 		</style>
 	</body>
 </html>
diff --git a/examples/10_yoyo.js b/examples/10_yoyo.js
@@ -5,86 +5,101 @@ const group = new Group()
 
 animate()
 
+const tweenMap = new Map()
+
 const target1 = document.getElementById('target1')
-const tween1 = new Tween(target1.dataset, group)
-	.to({rotation: 360, y: 300}, 750)
-	.repeat(1)
-	.delay(1000)
-	.yoyo(true)
-	.easing(Easing.Cubic.InOut)
-	.onUpdate(function (object) {
-		updateBox(target1, object)
-	})
-	.start()
+tweenMap.set(
+	'tween1',
+	new Tween(target1.dataset, group)
+		.to({rotation: 360, y: 300}, 750)
+		.repeat(Infinity)
+		.delay(1000)
+		.yoyo(true)
+		.easing(Easing.Quadratic.InOut)
+		.onUpdate(function (object) {
+			updateBox(target1, object)
+		})
+		.start(),
+)
 const target2 = document.getElementById('target2')
-const tween2 = new Tween(target2.dataset, group)
-	.to({rotation: 360, y: 300}, 750)
-	.repeat(Infinity)
-	.delay(1000)
-	.yoyo(true)
-	.easing(Easing.Cubic.InOut)
-	.onUpdate(function (object) {
-		updateBox(target2, object)
-	})
-	.start()
+
+tweenMap.set(
+	'tween2',
+	new Tween(target2.dataset, group)
+		.to({rotation: 360, y: 300}, 750)
+		.repeat(Infinity)
+		.delay(1000)
+		.yoyo(true)
+		.easing(Easing.Cubic.InOut)
+		.onUpdate(function (object) {
+			updateBox(target2, object)
+		})
+		.start(),
+)
 const target3 = document.getElementById('target3')
-const tween3 = new Tween(target3.dataset, group)
-	.to({rotation: '+360', y: '+300'}, 750)
-	.repeat(1)
-	.delay(1000)
-	.yoyo(true)
-	.easing(Easing.Cubic.InOut)
-	.onUpdate(function (object) {
-		updateBox(target3, object)
-	})
-	.start()
+tweenMap.set(
+	'tween3',
+	new Tween(target3.dataset, group)
+		.to({rotation: '+360', y: '+300'}, 750)
+		.repeat(1)
+		.delay(1000)
+		.yoyo(true)
+		.easing(Easing.Cubic.InOut)
+		.onUpdate(function (object) {
+			updateBox(target3, object)
+		})
+		.start(),
+)
 const target4 = document.getElementById('target4')
-const tween4 = new Tween(target4.dataset, group)
-	.to({rotation: '+360', y: '+300'}, 750)
-	.repeat(Infinity)
-	.delay(1000)
-	.yoyo(true)
-	.easing(Easing.Cubic.InOut)
-	.onUpdate(function (object) {
-		updateBox(target4, object)
-	})
-	.start()
+tweenMap.set(
+	'tween4',
+	new Tween(target4.dataset, group)
+		.to({rotation: '+360', y: '+300'}, 750)
+		.repeat(Infinity)
+		.delay(1000)
+		.yoyo(true)
+		.easing(Easing.Quadratic.InOut)
+		.onUpdate(function (object) {
+			updateBox(target4, object)
+		})
+		.start(),
+)
+
+const target5 = document.getElementById('target5')
+tweenMap.set(
+	'tween5',
+	new Tween(target5.dataset, group)
+		.to({rotation: '+360', y: '+300'}, 1050)
+		.repeat(Infinity)
+		// .delay(1000) // without delay
+		.yoyo(true)
+		.easing(Easing.Quadratic.InOut)
+		.onUpdate(function (object) {
+			updateBox(target5, object)
+		})
+		.start(),
+)
 
 // TODO perhaps add these methods to Group
 
 const restart = (window.restart = function () {
-	tween1.stop().start()
-	tween2.stop().start()
-	tween3.stop().start()
-	tween4.stop().start()
+	tweenMap.forEach(tween => tween.start())
 })
 
 const stop = (window.stop = function () {
-	tween1.stop()
-	tween2.stop()
-	tween3.stop()
-	tween4.stop()
+	tweenMap.forEach(tween => tween.stop())
 })
 
 const start = (window.start = function () {
-	tween1.start()
-	tween2.start()
-	tween3.start()
-	tween4.start()
+	tweenMap.forEach(tween => tween.start())
 })
 
 const pause = (window.pause = function () {
-	tween1.pause()
-	tween2.pause()
-	tween3.pause()
-	tween4.pause()
+	tweenMap.forEach(tween => tween.pause())
 })
 
 const resume = (window.resume = function () {
-	tween1.resume()
-	tween2.resume()
-	tween3.resume()
-	tween4.resume()
+	tweenMap.forEach(tween => tween.resume())
 })
 
 function animate(time) {
diff --git a/src/Tween.ts b/src/Tween.ts
@@ -474,22 +474,16 @@ export class Tween<T extends UnknownProps = any> {
 		const totalTime = this._duration + this._repeat * durationAndDelay
 
 		const calculateElapsedPortion = () => {
-			if (this._duration === 0) return 1
-			if (elapsedTime > totalTime) {
-				return 1
-			}
+			if (this._duration === 0 || elapsedTime > totalTime) return 1
 
-			const timesRepeated = Math.trunc(elapsedTime / durationAndDelay)
-			const timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay
-			// TODO use %?
-			// const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
+			const portion = Math.min(elapsedTime / this._duration, 1)
 
-			const portion = Math.min(timeIntoCurrentRepeat / this._duration, 1)
 			if (portion === 0 && elapsedTime === this._duration) {
 				return 1
 			}
 			return portion
 		}
+
 		const elapsed = calculateElapsedPortion()
 		const value = this._easingFunction(elapsed)
 
