// 假如我们有三个动画 tweenA、tweenB、tweenC
tweenA.start(); // 需要启动第一个动画，其余的不要start()
tweenA.chain(tweenB); // 动画A链接动画B
tweenB.chain(tweenC); // 动画B链接动画C
tweenC.chain(tweenA); // 动画C链接动画A
	

<style>
	#papa {margin: 30px auto; width: 900px; height: 360px; border: 1px solid gray; position: relative; }
	#b1, #b2, #b3 { position: absolute; left: 10px; top: 20px; width: 60px; height: 60px; border-radius: 50%; background: olive; }
	#b2 { top: 120px; }
	#b3 { top: 220px; }
	.btnsWrap { position: absolute; bottom: 10px; width: 100%; text-align: center; }
	.btnsWrap button { min-width: 70px; margin: 5px; padding: 4px; }
</style>

<div id="papa">
	<div id="b1"></div>
	<div id="b2"></div>
	<div id="b3"></div>
	<div class="btnsWrap">
		<button type="button" value="start">开始</button>
		<button type="button" value="stop">停止</button>
		<button type="button" value="pause">暂停</button>
		<button type="button" value="resume">继续</button>
	</div>
</div>

<script type="module">
	import TWEEN from 'https://638183.freep.cn/638183/3dev/examples/jsm/libs/tween.module.js';

	const btns = papa.querySelectorAll('button'); // 获取按钮
	const balls = [b1, b2, b3]; // 球数组
	const poses = [{ x: 10 }, { x: 10 }, { x: 10 }]; // 初始位置数组
	const endPoses = [{ x: [820, 10] }, { x: [820, 10] }, { x: [820, 10] }]; // 目标位置数组
	const tweens = []; // 动画数组

	// 为每一个球创建tween动画
	balls.forEach( (b, k) => {
		const tween = new TWEEN.Tween(poses[k])
			.to(endPoses[k], 4000)
			.onUpdate( () => b.style.transform = `translate(${poses[k].x}px)` );
		if (k === 0) tween.start(); // 第一个球自动运行动画（不需要自动运行时注释掉或删掉）
		tweens.push(tween);
	});
	
	// 动画链式相互调用
	tweens.forEach( (t, k) => t.chain(tweens[(k + 1) % balls.length]) );

	// 循环运行TWEEN动画
	const animate = () => {
		TWEEN.update();
		requestAnimationFrame(animate);
	};

	// Tween运行、暂停状态
	const tweenState = () => {
		let play = 0, pause = 0; // 播放与暂停的tween动画数量
		tweens.forEach(tw => {
			play += tw.isPlaying() ? 1 : 0;
			pause += tw.isPaused() ? 1 : 0;
		});
		return {play: play > 0, pause: pause > 0 }; // 返回结果
	};

	// 设置按钮状态
	const btnState = () => {
		const state = tweenState(); // 获取当前动画运行状态
		// 播放状态为真
		if (state.play) {
			btns[0].disabled = true;
			btns[1].disabled = false;
			btns[2].disabled = state.pause ? true : false;
			btns[3].disabled = state.pause ? false : true;
		// 暂停状态为真
		} else btns.forEach( (b,k) => b.disabled = k === 0 ? false : true);
	};

	// 按钮点击事件
	btns.forEach(btn => {
		btn.onclick = () => {
			const state = tweenState(); // 获取当前动画运行状态
			switch (btn.value) {
				case 'start': // 开始
					if (!state.play) tweens[0].start();
					break;
				case 'stop': // 停止
					if (state.play) tweens.forEach(tw => tw.stop());
					break;
				case 'pause': // 暂停
					if (!state.pause) tweens.forEach(tw => tw.pause());
					break;
				case 'resume': // 继续
					if (!state.pause) return;
					tweens.forEach(tw => {
						if (tw.isPaused()) tw.resume();
					});
					break;
			}
			btnState(); // 设置按钮状态
		}
	});

	animate(); // 启动动画
	btnState(); // 初始化按钮状态
</script>