动态缩略图生成

viewer/spine.html

@@ -29,7 +29,7 @@
 			<span data-i18n="viewer.suffix">尾缀</span>
 			<select id="suffixSelect"></select>
 		</label>
-		<button id="groupThumbBtn" data-i18n="viewer.groupThumbnail" data-i18n-title="viewer.groupThumbnailTitle" title="为关联资源生成缩略图">为关联资源生成缩略图</button>
+		<button id="groupThumbBtn" data-i18n="viewer.groupThumbnail" data-i18n-title="viewer.groupThumbnailTitle" title="左键生成静帧缩略图，右键生成动画缩略图">为关联资源生成缩略图</button>
 		<button id="thumbBtn" data-i18n="viewer.thumbnail" data-i18n-title="viewer.thumbnailTitle" title="将当前帧设为当前素材的缩略图">设为当前素材缩略图</button>
 		<label id="verLabel" style="color: var(--text-dim);" data-i18n-title="viewer.versionTitle" title="Spine 版本"></label>
 		<button id="reloadBtn" title="重新加载目录" data-i18n-title="viewer.reloadTitle">↻</button>
@@ -1042,7 +1042,7 @@
 		}
 	}
 
-	async function generateGroupThumbnails() {
+	async function generateGroupThumbnails(animated = false) {
 		if (!skeleton || !renderer || !activeAssets) { setStatus(t('viewer.noSkeletonForThumb')); return; }
 		const groupThumbBtn = document.getElementById('groupThumbBtn');
 		groupThumbBtn.disabled = true;
@@ -1056,8 +1056,17 @@
 				if (rows.length && rows.every((row) => row.state === 'unavailable')) setStatus(t('viewer.groupNoTargets'), 4000);
 				return;
 			}
-			setStatus(t('viewer.generating'), Infinity);
-			const rendered = await renderCurrentFrameThumbnail();
+			let rendered;
+			const animation = (skeletonData.animations || [])[currentAnim];
+			if (animated && !isStaticAnimation && currentAnim !== SETUP_POSE_INDEX && animation && animationDuration(animation) > STATIC_EPSILON) {
+				const options = await confirmAnimatedThumbnail(animation);
+				if (!options) return;
+				setStatus(t('viewer.animatedGenerating', { current: 0, total: '…' }), Infinity);
+				rendered = await renderAnimatedThumbnail(animation, options);
+			} else {
+				setStatus(t('viewer.generating'), Infinity);
+				rendered = await renderCurrentFrameThumbnail();
+			}
 			const result = await groupThumbnails.applyThumbnailTargets({
 				targets,
 				initialSkipped: rows.length - targets.length,
@@ -1858,7 +1867,11 @@
 	document.getElementById('reloadBtn').addEventListener('click', () => {
 		window.location.reload();
 	});
-	document.getElementById('groupThumbBtn').addEventListener('click', generateGroupThumbnails);
+	document.getElementById('groupThumbBtn').addEventListener('click', () => generateGroupThumbnails());
+	document.getElementById('groupThumbBtn').addEventListener('contextmenu', (event) => {
+		event.preventDefault();
+		generateGroupThumbnails(true);
+	});
 	document.getElementById('thumbBtn').addEventListener('click', generateThumbnail);
 	document.getElementById('thumbBtn').addEventListener('contextmenu', (event) => {
 		event.preventDefault();