Skip to content

Commit

Permalink
Merge pull request #683 from tweenjs/humodz/fix-yoyo-repeat
Browse files Browse the repository at this point in the history 
fix yoyo repeat
  • Loading branch information
@trusktr
trusktr authored May 5, 2024
2 parents 4510411 + 6415312 commit 66bc783
Show file tree
Hide file tree
Showing 11 changed files with 482 additions and 305 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/tests.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
7 changes: 5 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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

Expand Down
131 changes: 71 additions & 60 deletions dist/tween.amd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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) {
Expand Down
131 changes: 71 additions & 60 deletions dist/tween.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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) {
Expand Down
3 changes: 3 additions & 0 deletions dist/tween.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading

0 comments on commit 66bc783

Please sign in to comment.