simplify helper

packages/svelte/tests/animation-helpers.js

@@ -36,11 +36,8 @@ class Animation {
 	#keyframes;
 	#duration;
 	#timeline_offset;
-	#reversed;
 	#target;
-	#paused;
 
-	#offset = 0;
 	#finished = () => {};
 	#cancelled = () => {};
 
@@ -57,8 +54,6 @@ class Animation {
 		this.#duration = options.duration || 0;
 
 		this.#timeline_offset = 0;
-		this.#reversed = false;
-		this.#paused = false;
 		this.onfinish = () => {};
 		this.pending = true;
 		this.currentTime = 0;
@@ -69,8 +64,6 @@ class Animation {
 			}
 		};
 
-		this.#offset = raf.time;
-
 		// Promise-like semantics, but call callbacks immediately on raf.tick
 		this.finished = {
 			/** @param {() => void} callback */
@@ -88,22 +81,14 @@ class Animation {
 	}
 
 	play() {
-		this.#paused = false;
 		raf.animations.add(this);
 		this.playState = 'running';
 		this._update();
 	}
 
 	_update() {
-		if (this.#reversed) {
-			if (this.#timeline_offset === 0) {
-				this.currentTime = this.#duration - raf.time;
-			} else {
-				this.currentTime = this.#timeline_offset + (this.#timeline_offset - raf.time);
-			}
-		} else {
-			this.currentTime = raf.time - this.#timeline_offset;
-		}
+		console.log('_update', raf.time);
+		this.currentTime = raf.time - this.#timeline_offset;
 		const target_frame = this.currentTime / this.#duration;
 		this._applyKeyFrame(target_frame);
 
@@ -120,42 +105,30 @@ class Animation {
 		const keyframes = this.#keyframes;
 		const keyframes_size = keyframes.length - 1;
 		const frame = keyframes[Math.min(keyframes_size, Math.floor(keyframes.length * target_frame))];
+
 		for (let prop in frame) {
 			// @ts-ignore
 			this.#target.style[prop] = frame[prop];
 		}
-		if (this.#reversed) {
-			if (this.currentTime <= 0) {
-				this.finish();
-				for (let prop in frame) {
-					// @ts-ignore
-					this.#target.style[prop] = null;
-				}
-			}
-		} else {
-			if (this.currentTime >= this.#duration) {
-				this.finish();
-				for (let prop in frame) {
-					// @ts-ignore
-					this.#target.style[prop] = null;
-				}
+
+		if (this.currentTime >= this.#duration) {
+			this.finish();
+			for (let prop in frame) {
+				// @ts-ignore
+				this.#target.style[prop] = null;
 			}
 		}
 	}
 
 	finish() {
 		this.onfinish();
-		this.currentTime = this.#reversed ? 0 : this.#duration;
-		if (this.#reversed) {
-			raf.animations.delete(this);
-		}
+		this.currentTime = this.#duration;
 		this.playState = 'idle';
 	}
 
 	cancel() {
-		this.#paused = true;
 		if (this.currentTime > 0 && this.currentTime < this.#duration) {
-			this._applyKeyFrame(this.#reversed ? this.#keyframes.length - 1 : 0);
+			this._applyKeyFrame(0);
 		}
 
 		this.#cancelled();
@@ -163,18 +136,8 @@ class Animation {
 	}
 
 	pause() {
-		this.#paused = true;
 		this.playState = 'paused';
 	}
-
-	reverse() {
-		if (this.#paused && !raf.animations.has(this)) {
-			raf.animations.add(this);
-		}
-		this.#timeline_offset = this.currentTime;
-		this.#reversed = !this.#reversed;
-		this.playState = 'running';
-	}
 }
 
 /**