fix yoyo repeat

.github/workflows/tests.yml

@@ -19,5 +19,5 @@ jobs:
  uses: actions/setup-node@v1
  with:
  node-version: ${{ matrix.node-version }}
- - run: npm install
+ - run: npm clean-install
  - run: npm test

README.md

@@ -9,7 +9,7 @@ JavaScript (TypeScript) tweening engine for easy animations, incorporating optim
 
 More languages: [English](./README.md), [简体中文](./README_zh-CN.md)
 
----
+# Example
 
 ```html
 <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
@@ -48,7 +48,10 @@ More languages: [English](./README.md), [简体中文](./README_zh-CN.md)
 </script>
 ```
 
-[Try this example on CodePen](https://codepen.io/trusktr/pen/KKGaBVz?editors=1000)
+[Try the above example on CodePen](https://codepen.io/trusktr/pen/KKGaBVz?editors=1000)
+
+Animate numbers in any JavaScript object. For example, [rotate a 3D box made
+with Three.js](https://codepen.io/trusktr/pen/ExJqvgZ):
 
 # Installation
 

dist/tween.amd.js

@@ -678,13 +678,11 @@ define(['exports'], (function (exports) { 'use strict';
  * it is still playing, just paused).
  */
  Tween.prototype.update = function (time, autoStart) {
- var _this = this;
  var _a;
  if (time === void 0) { time = now(); }
  if (autoStart === void 0) { autoStart = true; }
  if (this._isPaused)
  return true;
- var property;
  var endTime = this._startTime + this._duration;
  if (!this._goToEnd && !this._isPlaying) {
  if (time > endTime)
@@ -711,72 +709,85 @@ define(['exports'], (function (exports) { 'use strict';
  var elapsedTime = 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 () {
- if (_this._duration === 0)
- 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);
- if (portion === 0 && elapsedTime === _this._duration) {
- return 1;
- }
- return portion;
- };
- var elapsed = calculateElapsedPortion();
+ var elapsed = this._calculateElapsedPortion(elapsedTime, durationAndDelay, totalTime);
  var value = this._easingFunction(elapsed);
- // properties transformations
+ var status = this._calculateCompletionStatus(elapsedTime, durationAndDelay);
+ if (status === 'repeat') {
+ // the current update is happening after the instant the tween repeated
+ this._processRepetition(elapsedTime, durationAndDelay);
+ }
  this._updateProperties(this._object, this._valuesStart, this._valuesEnd, value);
+ if (status === 'about-to-repeat') {
+ // the current update is happening at the exact instant the tween is going to repeat
+ // the values should match the end of the tween, not the beginning,
+ // that's why _processRepetition happens after _updateProperties
+ this._processRepetition(elapsedTime, durationAndDelay);
+ }
  if (this._onUpdateCallback) {
  this._onUpdateCallback(this._object, elapsed);
  }
- if (this._duration === 0 || elapsedTime >= this._duration) {
- if (this._repeat > 0) {
- var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
- if (isFinite(this._repeat)) {
- this._repeat -= completeCount;
- }
- // Reassign starting values, restart by making startTime = now
- for (property in this._valuesStartRepeat) {
- if (!this._yoyo && typeof this._valuesEnd[property] === 'string') {
- this._valuesStartRepeat[property] =
- // eslint-disable-next-line
- // @ts-ignore FIXME?
- this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property]);
- }
- if (this._yoyo) {
- this._swapEndStartRepeatValues(property);
- }
- this._valuesStart[property] = this._valuesStartRepeat[property];
- }
- if (this._yoyo) {
- this._reversed = !this._reversed;
- }
- this._startTime += durationAndDelay * completeCount;
- if (this._onRepeatCallback) {
- this._onRepeatCallback(this._object);
- }
- this._onEveryStartCallbackFired = false;
- return true;
+ if (status === 'repeat' || status === 'about-to-repeat') {
+ if (this._onRepeatCallback) {
+ this._onRepeatCallback(this._object);
  }
- else {
-  if (this._onCompleteCallback) {
-  this._onCompleteCallback(this._object);
-  }
-  for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
-  // Make the chained tweens start exactly at the time they should,
-  // even if the `update()` method was called way past the duration of the tween
-  this._chainedTweens[i].start(this._startTime + this._duration, false);
- }
- this._isPlaying = false;
- return false;
+ this._onEveryStartCallbackFired = false;
+ }
+ else if (status === 'completed') {
+ this._isPlaying = false;
+ if (this._onCompleteCallback) {
+ this._onCompleteCallback(this._object);
+ }
+ for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
+ // Make the chained tweens start exactly at the time they should,
+ // even if the `update()` method was called way past the duration of the tween
+ this._chainedTweens[i].start(this._startTime + this._duration, false);
  }
  }
- return true;
+ return status !== 'completed';
+ };
+ Tween.prototype._calculateElapsedPortion = function (elapsedTime, durationAndDelay, totalTime) {
+ if (this._duration === 0 || elapsedTime > totalTime) {
+ return 1;
+ }
+ var timeIntoCurrentRepeat = elapsedTime % durationAndDelay;
+ var portion = Math.min(timeIntoCurrentRepeat / this._duration, 1);
+ if (portion === 0 && elapsedTime !== 0 && elapsedTime % this._duration === 0) {
+ return 1;
+ }
+ return portion;
+ };
+ Tween.prototype._calculateCompletionStatus = function (elapsedTime, durationAndDelay) {
+ if (this._duration !== 0 && elapsedTime < this._duration) {
+ return 'playing';
+ }
+ if (this._repeat <= 0) {
+ return 'completed';
+ }
+ if (elapsedTime === this._duration) {
+ return 'about-to-repeat';
+ }
+ return 'repeat';
+ };
+ Tween.prototype._processRepetition = function (elapsedTime, durationAndDelay) {
+ var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
+ if (isFinite(this._repeat)) {
+ this._repeat -= completeCount;
+ }
+ // Reassign starting values, restart by making startTime = now
+ for (var property in this._valuesStartRepeat) {
+ var valueEnd = this._valuesEnd[property];
+ if (!this._yoyo && typeof valueEnd === 'string') {
+ this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(valueEnd);
+ }
+ if (this._yoyo) {
+ this._swapEndStartRepeatValues(property);
+ }
+ this._valuesStart[property] = this._valuesStartRepeat[property];
+ }
+ if (this._yoyo) {
+ this._reversed = !this._reversed;
+ }
+ this._startTime += durationAndDelay * completeCount;
  };
  Tween.prototype._updateProperties = function (_object, _valuesStart, _valuesEnd, value) {
  for (var property in _valuesEnd) {

dist/tween.cjs

@@ -680,13 +680,11 @@ var Tween = /** @class */ (function () {
  * it is still playing, just paused).
  */
  Tween.prototype.update = function (time, autoStart) {
- var _this = this;
  var _a;
  if (time === void 0) { time = now(); }
  if (autoStart === void 0) { autoStart = true; }
  if (this._isPaused)
  return true;
- var property;
  var endTime = this._startTime + this._duration;
  if (!this._goToEnd && !this._isPlaying) {
  if (time > endTime)
@@ -713,72 +711,85 @@ var Tween = /** @class */ (function () {
  var elapsedTime = 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 () {
- if (_this._duration === 0)
- 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);
- if (portion === 0 && elapsedTime === _this._duration) {
- return 1;
- }
- return portion;
- };
- var elapsed = calculateElapsedPortion();
+ var elapsed = this._calculateElapsedPortion(elapsedTime, durationAndDelay, totalTime);
  var value = this._easingFunction(elapsed);
- // properties transformations
+ var status = this._calculateCompletionStatus(elapsedTime, durationAndDelay);
+ if (status === 'repeat') {
+ // the current update is happening after the instant the tween repeated
+ this._processRepetition(elapsedTime, durationAndDelay);
+ }
  this._updateProperties(this._object, this._valuesStart, this._valuesEnd, value);
+ if (status === 'about-to-repeat') {
+ // the current update is happening at the exact instant the tween is going to repeat
+ // the values should match the end of the tween, not the beginning,
+ // that's why _processRepetition happens after _updateProperties
+ this._processRepetition(elapsedTime, durationAndDelay);
+ }
  if (this._onUpdateCallback) {
  this._onUpdateCallback(this._object, elapsed);
  }
- if (this._duration === 0 || elapsedTime >= this._duration) {
- if (this._repeat > 0) {
- var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
- if (isFinite(this._repeat)) {
- this._repeat -= completeCount;
- }
- // Reassign starting values, restart by making startTime = now
- for (property in this._valuesStartRepeat) {
- if (!this._yoyo && typeof this._valuesEnd[property] === 'string') {
- this._valuesStartRepeat[property] =
- // eslint-disable-next-line
- // @ts-ignore FIXME?
- this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property]);
- }
- if (this._yoyo) {
- this._swapEndStartRepeatValues(property);
- }
- this._valuesStart[property] = this._valuesStartRepeat[property];
- }
- if (this._yoyo) {
- this._reversed = !this._reversed;
- }
- this._startTime += durationAndDelay * completeCount;
- if (this._onRepeatCallback) {
- this._onRepeatCallback(this._object);
- }
- this._onEveryStartCallbackFired = false;
- return true;
+ if (status === 'repeat' || status === 'about-to-repeat') {
+ if (this._onRepeatCallback) {
+ this._onRepeatCallback(this._object);
  }
- else {
-  if (this._onCompleteCallback) {
-  this._onCompleteCallback(this._object);
-  }
-  for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
-  // Make the chained tweens start exactly at the time they should,
-  // even if the `update()` method was called way past the duration of the tween
-  this._chainedTweens[i].start(this._startTime + this._duration, false);
- }
- this._isPlaying = false;
- return false;
+ this._onEveryStartCallbackFired = false;
+ }
+ else if (status === 'completed') {
+ this._isPlaying = false;
+ if (this._onCompleteCallback) {
+ this._onCompleteCallback(this._object);
+ }
+ for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
+ // Make the chained tweens start exactly at the time they should,
+ // even if the `update()` method was called way past the duration of the tween
+ this._chainedTweens[i].start(this._startTime + this._duration, false);
  }
  }
- return true;
+ return status !== 'completed';
+ };
+ Tween.prototype._calculateElapsedPortion = function (elapsedTime, durationAndDelay, totalTime) {
+ if (this._duration === 0 || elapsedTime > totalTime) {
+ return 1;
+ }
+ var timeIntoCurrentRepeat = elapsedTime % durationAndDelay;
+ var portion = Math.min(timeIntoCurrentRepeat / this._duration, 1);
+ if (portion === 0 && elapsedTime !== 0 && elapsedTime % this._duration === 0) {
+ return 1;
+ }
+ return portion;
+ };
+ Tween.prototype._calculateCompletionStatus = function (elapsedTime, durationAndDelay) {
+ if (this._duration !== 0 && elapsedTime < this._duration) {
+ return 'playing';
+ }
+ if (this._repeat <= 0) {
+ return 'completed';
+ }
+ if (elapsedTime === this._duration) {
+ return 'about-to-repeat';
+ }
+ return 'repeat';
+ };
+ Tween.prototype._processRepetition = function (elapsedTime, durationAndDelay) {
+ var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
+ if (isFinite(this._repeat)) {
+ this._repeat -= completeCount;
+ }
+ // Reassign starting values, restart by making startTime = now
+ for (var property in this._valuesStartRepeat) {
+ var valueEnd = this._valuesEnd[property];
+ if (!this._yoyo && typeof valueEnd === 'string') {
+ this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(valueEnd);
+ }
+ if (this._yoyo) {
+ this._swapEndStartRepeatValues(property);
+ }
+ this._valuesStart[property] = this._valuesStartRepeat[property];
+ }
+ if (this._yoyo) {
+ this._reversed = !this._reversed;
+ }
+ this._startTime += durationAndDelay * completeCount;
  };
  Tween.prototype._updateProperties = function (_object, _valuesStart, _valuesEnd, value) {
  for (var property in _valuesEnd) {

dist/tween.d.ts

@@ -137,6 +137,9 @@ declare class Tween<T extends UnknownProps> {
  * it is still playing, just paused).
  */
  update(time?: number, autoStart?: boolean): boolean;
+ private _calculateElapsedPortion;
+ private _calculateCompletionStatus;
+ private _processRepetition;
  private _updateProperties;
  private _handleRelativeValue;
  private _swapEndStartRepeatValues;