Skip to content

Commit 94d2dfb

Browse files
trusktrtrusktr
committed
Revert "Merge pull request #683 from tweenjs/humodz/fix-yoyo-repeat"
This reverts commit 66bc783, reversing changes made to 4510411.
1 parent ea96cb3 commit 94d2dfb

11 files changed

Lines changed: 305 additions & 482 deletions

File tree

‎.github/workflows/tests.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,5 @@ jobs:
1919
uses: actions/setup-node@v1
2020
with:
2121
node-version: ${{ matrix.node-version }}
22-
- run: npm clean-install
22+
- run: npm install
2323
- run: npm test

‎README.md‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ JavaScript (TypeScript) tweening engine for easy animations, incorporating optim
99

1010
More languages: [English](./README.md), [简体中文](./README_zh-CN.md)
1111

12-
# Example
12+
---
1313

1414
```html
1515
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
@@ -48,10 +48,7 @@ More languages: [English](./README.md), [简体中文](./README_zh-CN.md)
4848
</script>
4949
```
5050

51-
[Try the above example on CodePen](https://codepen.io/trusktr/pen/KKGaBVz?editors=1000)
52-
53-
Animate numbers in any JavaScript object. For example, [rotate a 3D box made
54-
with Three.js](https://codepen.io/trusktr/pen/ExJqvgZ):
51+
[Try this example on CodePen](https://codepen.io/trusktr/pen/KKGaBVz?editors=1000)
5552

5653
# Installation
5754

‎dist/tween.amd.js‎

Lines changed: 60 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -678,11 +678,13 @@ define(['exports'], (function (exports) { 'use strict';
678678
* it is still playing, just paused).
679679
*/
680680
Tween.prototype.update = function (time, autoStart) {
681+
var _this = this;
681682
var _a;
682683
if (time === void 0) { time = now(); }
683684
if (autoStart === void 0) { autoStart = true; }
684685
if (this._isPaused)
685686
return true;
687+
var property;
686688
var endTime = this._startTime + this._duration;
687689
if (!this._goToEnd && !this._isPlaying) {
688690
if (time > endTime)
@@ -709,85 +711,72 @@ define(['exports'], (function (exports) { 'use strict';
709711
var elapsedTime = time - this._startTime;
710712
var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
711713
var totalTime = this._duration + this._repeat * durationAndDelay;
712-
var elapsed = this._calculateElapsedPortion(elapsedTime, durationAndDelay, totalTime);
714+
var calculateElapsedPortion = function () {
715+
if (_this._duration === 0)
716+
return 1;
717+
if (elapsedTime > totalTime) {
718+
return 1;
719+
}
720+
var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
721+
var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
722+
// TODO use %?
723+
// const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
724+
var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
725+
if (portion === 0 && elapsedTime === _this._duration) {
726+
return 1;
727+
}
728+
return portion;
729+
};
730+
var elapsed = calculateElapsedPortion();
713731
var value = this._easingFunction(elapsed);
714-
var status = this._calculateCompletionStatus(elapsedTime, durationAndDelay);
715-
if (status === 'repeat') {
716-
// the current update is happening after the instant the tween repeated
717-
this._processRepetition(elapsedTime, durationAndDelay);
718-
}
732+
// properties transformations
719733
this._updateProperties(this._object, this._valuesStart, this._valuesEnd, value);
720-
if (status === 'about-to-repeat') {
721-
// the current update is happening at the exact instant the tween is going to repeat
722-
// the values should match the end of the tween, not the beginning,
723-
// that's why _processRepetition happens after _updateProperties
724-
this._processRepetition(elapsedTime, durationAndDelay);
725-
}
726734
if (this._onUpdateCallback) {
727735
this._onUpdateCallback(this._object, elapsed);
728736
}
729-
if (status === 'repeat' || status === 'about-to-repeat') {
730-
if (this._onRepeatCallback) {
731-
this._onRepeatCallback(this._object);
732-
}
733-
this._onEveryStartCallbackFired = false;
734-
}
735-
else if (status === 'completed') {
736-
this._isPlaying = false;
737-
if (this._onCompleteCallback) {
738-
this._onCompleteCallback(this._object);
739-
}
740-
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
741-
// Make the chained tweens start exactly at the time they should,
742-
// even if the `update()` method was called way past the duration of the tween
743-
this._chainedTweens[i].start(this._startTime + this._duration, false);
744-
}
745-
}
746-
return status !== 'completed';
747-
};
748-
Tween.prototype._calculateElapsedPortion = function (elapsedTime, durationAndDelay, totalTime) {
749-
if (this._duration === 0 || elapsedTime > totalTime) {
750-
return 1;
751-
}
752-
var timeIntoCurrentRepeat = elapsedTime % durationAndDelay;
753-
var portion = Math.min(timeIntoCurrentRepeat / this._duration, 1);
754-
if (portion === 0 && elapsedTime !== 0 && elapsedTime % this._duration === 0) {
755-
return 1;
756-
}
757-
return portion;
758-
};
759-
Tween.prototype._calculateCompletionStatus = function (elapsedTime, durationAndDelay) {
760-
if (this._duration !== 0 && elapsedTime < this._duration) {
761-
return 'playing';
762-
}
763-
if (this._repeat <= 0) {
764-
return 'completed';
765-
}
766-
if (elapsedTime === this._duration) {
767-
return 'about-to-repeat';
768-
}
769-
return 'repeat';
770-
};
771-
Tween.prototype._processRepetition = function (elapsedTime, durationAndDelay) {
772-
var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
773-
if (isFinite(this._repeat)) {
774-
this._repeat -= completeCount;
775-
}
776-
// Reassign starting values, restart by making startTime = now
777-
for (var property in this._valuesStartRepeat) {
778-
var valueEnd = this._valuesEnd[property];
779-
if (!this._yoyo && typeof valueEnd === 'string') {
780-
this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(valueEnd);
737+
if (this._duration === 0 || elapsedTime >= this._duration) {
738+
if (this._repeat > 0) {
739+
var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
740+
if (isFinite(this._repeat)) {
741+
this._repeat -= completeCount;
742+
}
743+
// Reassign starting values, restart by making startTime = now
744+
for (property in this._valuesStartRepeat) {
745+
if (!this._yoyo && typeof this._valuesEnd[property] === 'string') {
746+
this._valuesStartRepeat[property] =
747+
// eslint-disable-next-line
748+
// @ts-ignore FIXME?
749+
this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property]);
750+
}
751+
if (this._yoyo) {
752+
this._swapEndStartRepeatValues(property);
753+
}
754+
this._valuesStart[property] = this._valuesStartRepeat[property];
755+
}
756+
if (this._yoyo) {
757+
this._reversed = !this._reversed;
758+
}
759+
this._startTime += durationAndDelay * completeCount;
760+
if (this._onRepeatCallback) {
761+
this._onRepeatCallback(this._object);
762+
}
763+
this._onEveryStartCallbackFired = false;
764+
return true;
781765
}
782-
if (this._yoyo) {
783-
this._swapEndStartRepeatValues(property);
766+
else {
767+
if (this._onCompleteCallback) {
768+
this._onCompleteCallback(this._object);
769+
}
770+
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
771+
// Make the chained tweens start exactly at the time they should,
772+
// even if the `update()` method was called way past the duration of the tween
773+
this._chainedTweens[i].start(this._startTime + this._duration, false);
774+
}
775+
this._isPlaying = false;
776+
return false;
784777
}
785-
this._valuesStart[property] = this._valuesStartRepeat[property];
786778
}
787-
if (this._yoyo) {
788-
this._reversed = !this._reversed;
789-
}
790-
this._startTime += durationAndDelay * completeCount;
779+
return true;
791780
};
792781
Tween.prototype._updateProperties = function (_object, _valuesStart, _valuesEnd, value) {
793782
for (var property in _valuesEnd) {

‎dist/tween.cjs‎

Lines changed: 60 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -680,11 +680,13 @@ var Tween = /** @class */ (function () {
680680
* it is still playing, just paused).
681681
*/
682682
Tween.prototype.update = function (time, autoStart) {
683+
var _this = this;
683684
var _a;
684685
if (time === void 0) { time = now(); }
685686
if (autoStart === void 0) { autoStart = true; }
686687
if (this._isPaused)
687688
return true;
689+
var property;
688690
var endTime = this._startTime + this._duration;
689691
if (!this._goToEnd && !this._isPlaying) {
690692
if (time > endTime)
@@ -711,85 +713,72 @@ var Tween = /** @class */ (function () {
711713
var elapsedTime = time - this._startTime;
712714
var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
713715
var totalTime = this._duration + this._repeat * durationAndDelay;
714-
var elapsed = this._calculateElapsedPortion(elapsedTime, durationAndDelay, totalTime);
716+
var calculateElapsedPortion = function () {
717+
if (_this._duration === 0)
718+
return 1;
719+
if (elapsedTime > totalTime) {
720+
return 1;
721+
}
722+
var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
723+
var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
724+
// TODO use %?
725+
// const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
726+
var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
727+
if (portion === 0 && elapsedTime === _this._duration) {
728+
return 1;
729+
}
730+
return portion;
731+
};
732+
var elapsed = calculateElapsedPortion();
715733
var value = this._easingFunction(elapsed);
716-
var status = this._calculateCompletionStatus(elapsedTime, durationAndDelay);
717-
if (status === 'repeat') {
718-
// the current update is happening after the instant the tween repeated
719-
this._processRepetition(elapsedTime, durationAndDelay);
720-
}
734+
// properties transformations
721735
this._updateProperties(this._object, this._valuesStart, this._valuesEnd, value);
722-
if (status === 'about-to-repeat') {
723-
// the current update is happening at the exact instant the tween is going to repeat
724-
// the values should match the end of the tween, not the beginning,
725-
// that's why _processRepetition happens after _updateProperties
726-
this._processRepetition(elapsedTime, durationAndDelay);
727-
}
728736
if (this._onUpdateCallback) {
729737
this._onUpdateCallback(this._object, elapsed);
730738
}
731-
if (status === 'repeat' || status === 'about-to-repeat') {
732-
if (this._onRepeatCallback) {
733-
this._onRepeatCallback(this._object);
734-
}
735-
this._onEveryStartCallbackFired = false;
736-
}
737-
else if (status === 'completed') {
738-
this._isPlaying = false;
739-
if (this._onCompleteCallback) {
740-
this._onCompleteCallback(this._object);
741-
}
742-
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
743-
// Make the chained tweens start exactly at the time they should,
744-
// even if the `update()` method was called way past the duration of the tween
745-
this._chainedTweens[i].start(this._startTime + this._duration, false);
746-
}
747-
}
748-
return status !== 'completed';
749-
};
750-
Tween.prototype._calculateElapsedPortion = function (elapsedTime, durationAndDelay, totalTime) {
751-
if (this._duration === 0 || elapsedTime > totalTime) {
752-
return 1;
753-
}
754-
var timeIntoCurrentRepeat = elapsedTime % durationAndDelay;
755-
var portion = Math.min(timeIntoCurrentRepeat / this._duration, 1);
756-
if (portion === 0 && elapsedTime !== 0 && elapsedTime % this._duration === 0) {
757-
return 1;
758-
}
759-
return portion;
760-
};
761-
Tween.prototype._calculateCompletionStatus = function (elapsedTime, durationAndDelay) {
762-
if (this._duration !== 0 && elapsedTime < this._duration) {
763-
return 'playing';
764-
}
765-
if (this._repeat <= 0) {
766-
return 'completed';
767-
}
768-
if (elapsedTime === this._duration) {
769-
return 'about-to-repeat';
770-
}
771-
return 'repeat';
772-
};
773-
Tween.prototype._processRepetition = function (elapsedTime, durationAndDelay) {
774-
var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
775-
if (isFinite(this._repeat)) {
776-
this._repeat -= completeCount;
777-
}
778-
// Reassign starting values, restart by making startTime = now
779-
for (var property in this._valuesStartRepeat) {
780-
var valueEnd = this._valuesEnd[property];
781-
if (!this._yoyo && typeof valueEnd === 'string') {
782-
this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(valueEnd);
739+
if (this._duration === 0 || elapsedTime >= this._duration) {
740+
if (this._repeat > 0) {
741+
var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
742+
if (isFinite(this._repeat)) {
743+
this._repeat -= completeCount;
744+
}
745+
// Reassign starting values, restart by making startTime = now
746+
for (property in this._valuesStartRepeat) {
747+
if (!this._yoyo && typeof this._valuesEnd[property] === 'string') {
748+
this._valuesStartRepeat[property] =
749+
// eslint-disable-next-line
750+
// @ts-ignore FIXME?
751+
this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property]);
752+
}
753+
if (this._yoyo) {
754+
this._swapEndStartRepeatValues(property);
755+
}
756+
this._valuesStart[property] = this._valuesStartRepeat[property];
757+
}
758+
if (this._yoyo) {
759+
this._reversed = !this._reversed;
760+
}
761+
this._startTime += durationAndDelay * completeCount;
762+
if (this._onRepeatCallback) {
763+
this._onRepeatCallback(this._object);
764+
}
765+
this._onEveryStartCallbackFired = false;
766+
return true;
783767
}
784-
if (this._yoyo) {
785-
this._swapEndStartRepeatValues(property);
768+
else {
769+
if (this._onCompleteCallback) {
770+
this._onCompleteCallback(this._object);
771+
}
772+
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
773+
// Make the chained tweens start exactly at the time they should,
774+
// even if the `update()` method was called way past the duration of the tween
775+
this._chainedTweens[i].start(this._startTime + this._duration, false);
776+
}
777+
this._isPlaying = false;
778+
return false;
786779
}
787-
this._valuesStart[property] = this._valuesStartRepeat[property];
788780
}
789-
if (this._yoyo) {
790-
this._reversed = !this._reversed;
791-
}
792-
this._startTime += durationAndDelay * completeCount;
781+
return true;
793782
};
794783
Tween.prototype._updateProperties = function (_object, _valuesStart, _valuesEnd, value) {
795784
for (var property in _valuesEnd) {

‎dist/tween.d.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -137,9 +137,6 @@ declare class Tween<T extends UnknownProps> {
137137
* it is still playing, just paused).
138138
*/
139139
update(time?: number, autoStart?: boolean): boolean;
140-
private _calculateElapsedPortion;
141-
private _calculateCompletionStatus;
142-
private _processRepetition;
143140
private _updateProperties;
144141
private _handleRelativeValue;
145142
private _swapEndStartRepeatValues;

0 commit comments

Comments
 (0)