diff --git a/dist/tween.amd.js b/dist/tween.amd.js index 85ceb1ea..5e0e46ad 100644 --- a/dist/tween.amd.js +++ b/dist/tween.amd.js @@ -773,16 +773,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 index 924fcea8..378c6669 100644 --- a/dist/tween.cjs +++ b/dist/tween.cjs @@ -775,16 +775,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 index 709871d1..93f367cc 100644 --- a/dist/tween.esm.js +++ b/dist/tween.esm.js @@ -771,16 +771,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 index 50f3ae3b..3fb49a8a 100644 --- a/dist/tween.umd.js +++ b/dist/tween.umd.js @@ -777,16 +777,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 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/src/Tween.ts b/src/Tween.ts index 4b536ac0..2943e0bc 100644 --- a/src/Tween.ts +++ b/src/Tween.ts @@ -478,22 +478,16 @@ export class Tween { 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)