From 784d49f4dd1c3ede6f8ccbba551e8f3f8188168d Mon Sep 17 00:00:00 2001 From: alphabetX Date: Thu, 11 Sep 2025 11:46:33 +0800 Subject: [PATCH] fix(yoyo): fix yoyo wrong -- 20250911 --- dist/tween.amd.js | 4 +- dist/tween.cjs | 4 +- dist/tween.d.ts | 2 +- dist/tween.esm.js | 4 +- dist/tween.umd.js | 4 +- examples/10_yoyo.html | 6 ++ examples/10_yoyo.js | 135 +++++++++++++++++++++++------------------- package.json | 2 +- src/Tween.ts | 3 +- src/Version.ts | 2 +- 10 files changed, 94 insertions(+), 72 deletions(-) diff --git a/dist/tween.amd.js b/dist/tween.amd.js index 85ceb1ea..3f442f12 100644 --- a/dist/tween.amd.js +++ b/dist/tween.amd.js @@ -769,7 +769,7 @@ define(['exports'], (function (exports) { 'use strict'; } this._onEveryStartCallbackFired = true; } - var elapsedTime = time - this._startTime; + var elapsedTime = this._yoyo ? Math.min(time - this._startTime, this._duration) : time - this._startTime; var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime); var totalTime = this._duration + this._repeat * durationAndDelay; var calculateElapsedPortion = function () { @@ -894,7 +894,7 @@ define(['exports'], (function (exports) { 'use strict'; return Tween; }()); - var VERSION = '25.0.0'; + var VERSION = '25.0.1'; /** * Tween.js - Licensed under the MIT license diff --git a/dist/tween.cjs b/dist/tween.cjs index 924fcea8..ffe1b00a 100644 --- a/dist/tween.cjs +++ b/dist/tween.cjs @@ -771,7 +771,7 @@ var Tween = /** @class */ (function () { } this._onEveryStartCallbackFired = true; } - var elapsedTime = time - this._startTime; + var elapsedTime = this._yoyo ? Math.min(time - this._startTime, this._duration) : time - this._startTime; var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime); var totalTime = this._duration + this._repeat * durationAndDelay; var calculateElapsedPortion = function () { @@ -896,7 +896,7 @@ var Tween = /** @class */ (function () { return Tween; }()); -var VERSION = '25.0.0'; +var VERSION = '25.0.1'; /** * Tween.js - Licensed under the MIT license diff --git a/dist/tween.d.ts b/dist/tween.d.ts index 36f7c930..f19535e6 100644 --- a/dist/tween.d.ts +++ b/dist/tween.d.ts @@ -196,7 +196,7 @@ declare class Sequence { static nextId(): number; } -declare const VERSION = "25.0.0"; +declare const VERSION = "25.0.1"; declare const nextId: typeof Sequence.nextId; /** diff --git a/dist/tween.esm.js b/dist/tween.esm.js index 709871d1..f3080459 100644 --- a/dist/tween.esm.js +++ b/dist/tween.esm.js @@ -767,7 +767,7 @@ var Tween = /** @class */ (function () { } this._onEveryStartCallbackFired = true; } - var elapsedTime = time - this._startTime; + var elapsedTime = this._yoyo ? Math.min(time - this._startTime, this._duration) : time - this._startTime; var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime); var totalTime = this._duration + this._repeat * durationAndDelay; var calculateElapsedPortion = function () { @@ -892,7 +892,7 @@ var Tween = /** @class */ (function () { return Tween; }()); -var VERSION = '25.0.0'; +var VERSION = '25.0.1'; /** * Tween.js - Licensed under the MIT license diff --git a/dist/tween.umd.js b/dist/tween.umd.js index 50f3ae3b..79a8877b 100644 --- a/dist/tween.umd.js +++ b/dist/tween.umd.js @@ -773,7 +773,7 @@ } this._onEveryStartCallbackFired = true; } - var elapsedTime = time - this._startTime; + var elapsedTime = this._yoyo ? Math.min(time - this._startTime, this._duration) : time - this._startTime; var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime); var totalTime = this._duration + this._repeat * durationAndDelay; var calculateElapsedPortion = function () { @@ -898,7 +898,7 @@ return Tween; }()); - var VERSION = '25.0.0'; + var VERSION = '25.0.1'; /** * Tween.js - Licensed under the MIT license diff --git a/examples/10_yoyo.html b/examples/10_yoyo.html index 2045ce36..8b8c813e 100644 --- a/examples/10_yoyo.html +++ b/examples/10_yoyo.html @@ -37,6 +37,9 @@

10 _ yoyo

yoyo with repeat forever, relative values
+
+ yoyo with repeat forever, relative values, without delay +
diff --git a/examples/10_yoyo.js b/examples/10_yoyo.js index 4eaf0ff6..9908b5cf 100644 --- 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/package.json b/package.json index f5d7db1b..11fae56c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@tweenjs/tween.js", "description": "Simple and fast tweening engine with optimised Robert Penner's equations.", - "version": "25.0.0", + "version": "25.0.1", "type": "module", "main": "dist/tween.cjs", "types": "dist/tween.d.ts", diff --git a/src/Tween.ts b/src/Tween.ts index 4b536ac0..9d2b82bb 100644 --- a/src/Tween.ts +++ b/src/Tween.ts @@ -473,7 +473,8 @@ export class Tween { this._onEveryStartCallbackFired = true } - const elapsedTime = time - this._startTime + const elapsedTime = this._yoyo ? Math.min(time - this._startTime, this._duration) : time - this._startTime + const durationAndDelay = this._duration + (this._repeatDelayTime ?? this._delayTime) const totalTime = this._duration + this._repeat * durationAndDelay diff --git a/src/Version.ts b/src/Version.ts index 74134466..caad2cec 100644 --- a/src/Version.ts +++ b/src/Version.ts @@ -1,2 +1,2 @@ -const VERSION = '25.0.0' +const VERSION = '25.0.1' export default VERSION