解决粒子首位帧衔接问题

src/views/ParticlePanel.vue

@@ -233,14 +233,38 @@
             <NumSlider v-if="sys.config.streamBehavior === 'normal'" label="发射时长" :min="1 / 30" :max="60" :step="1 / 30" v-model="sys.config.duration" />
             <NumSlider v-else label="发射时长 (f)" :min="1" :max="1800" :step="1" :model-value="loopDurationFrames" @update:model-value="setLoopDurationFrames" />
             <div v-if="sys.config.streamBehavior === 'loop'" class="stream-loop-options">
-              <label class="switch-row">
-                <input type="checkbox" :checked="sys.config.generateLoopStartAnimation" @change="setLoopSection('start', $event)" />
-                <span class="switch-ui"></span><span>生成开始循环动画</span>
-              </label>
-              <label class="switch-row">
-                <input type="checkbox" :checked="sys.config.generateLoopEndAnimation" @change="setLoopSection('end', $event)" />
-                <span class="switch-ui"></span><span>生成结束循环动画</span>
-              </label>
+              <div class="loop-section-row">
+                <label class="switch-row">
+                  <input type="checkbox" :checked="sys.config.generateLoopStartAnimation" @change="setLoopSection('start', $event)" />
+                  <span class="switch-ui"></span><span>生成开始循环动画</span>
+                </label>
+                <div v-if="sys.config.generateLoopStartAnimation" class="loop-duration-control">
+                  <label class="switch-row loop-duration-toggle">
+                    <input type="checkbox" :checked="sys.config.loopStartUseCustomDuration" @change="setLoopCustomDuration('start', $event)" />
+                    <span class="switch-ui"></span><span>指定时长</span>
+                  </label>
+                  <label class="loop-section-duration">
+                    <input v-if="sys.config.loopStartUseCustomDuration" :value="sys.config.loopStartDurationFrames" type="number" min="1" max="1800" step="1" aria-label="开始循环段时长" @change="setLoopSectionDuration('start', $event)" /><span v-if="sys.config.loopStartUseCustomDuration">f</span>
+                    <span v-else class="loop-auto-duration">自动 {{ automaticLoopDuration }}f</span>
+                  </label>
+                </div>
+              </div>
+              <div class="loop-section-row">
+                <label class="switch-row">
+                  <input type="checkbox" :checked="sys.config.generateLoopEndAnimation" @change="setLoopSection('end', $event)" />
+                  <span class="switch-ui"></span><span>生成结束循环动画</span>
+                </label>
+                <div v-if="sys.config.generateLoopEndAnimation" class="loop-duration-control">
+                  <label class="switch-row loop-duration-toggle">
+                    <input type="checkbox" :checked="sys.config.loopEndUseCustomDuration" @change="setLoopCustomDuration('end', $event)" />
+                    <span class="switch-ui"></span><span>指定时长</span>
+                  </label>
+                  <label class="loop-section-duration">
+                    <input v-if="sys.config.loopEndUseCustomDuration" :value="sys.config.loopEndDurationFrames" type="number" min="1" max="1800" step="1" aria-label="结束循环段时长" @change="setLoopSectionDuration('end', $event)" /><span v-if="sys.config.loopEndUseCustomDuration">f</span>
+                    <span v-else class="loop-auto-duration">自动 {{ automaticLoopDuration }}f</span>
+                  </label>
+                </div>
+              </div>
             </div>
             <div v-if="sys.config.streamBehavior === 'loop'" class="modifier-hint stream-loop-hint">循环持续模式不支持骨骼跟随和路径跟随；进入或退出时会将粒子跟随设置恢复默认值。</div>
           </template>
@@ -897,6 +921,7 @@ import { downloadEditorConfig, loadEditorConfigFile, loadEditorConfigText } from
 import { defaultSpineExportSettings, ensureSpineExportSettings } from '../export/spineExportSettings'
 import { buildSpineJson, downloadSpineJson } from '../export/spineJsonExporter'
 import { validateSpineJson } from '../export/spineJsonValidator'
+import { automaticLoopTransitionFrames } from '../core/loopSegmentTiming'
 
 const store = useParticleStore()
 store.settings.exportSettings = ensureSpineExportSettings(store.settings.exportSettings)
@@ -1022,6 +1047,9 @@ const activeIdx = computed(() => {
   return i >= 0 ? i : 0
 })
 const sys = computed(() => store.systems[activeIdx.value] || null)
+const automaticLoopDuration = computed(() => sys.value
+  ? automaticLoopTransitionFrames(sys.value.config, store.timeline.fps)
+  : 30)
 const loopDurationFrames = computed(() => {
   const config = sys.value?.config
   if (!config) return 1
@@ -1180,13 +1208,27 @@ function setLoopSection(section: 'start' | 'end', event: Event) {
   const checked = (event.target as HTMLInputElement).checked
   if (section === 'start') {
     config.generateLoopStartAnimation = checked
-    if (checked) config.generateLoopEndAnimation = false
   } else {
     config.generateLoopEndAnimation = checked
-    if (checked) config.generateLoopStartAnimation = false
   }
 }
 
+function setLoopSectionDuration(section: 'start' | 'end', event: Event) {
+  const config = sys.value?.config
+  if (!config) return
+  const frames = Math.min(1800, Math.max(1, Math.ceil(Number((event.target as HTMLInputElement).value) || 30)))
+  if (section === 'start') config.loopStartDurationFrames = frames
+  else config.loopEndDurationFrames = frames
+}
+
+function setLoopCustomDuration(section: 'start' | 'end', event: Event) {
+  const config = sys.value?.config
+  if (!config) return
+  const checked = (event.target as HTMLInputElement).checked
+  if (section === 'start') config.loopStartUseCustomDuration = checked
+  else config.loopEndUseCustomDuration = checked
+}
+
 function onEmitterFollowModeChange(event: Event, config: {
   emitterFollowMode: 'none' | 'path' | 'bone'
   emitterFollowSpineId: number
@@ -1223,7 +1265,9 @@ type ResetModule = 'emitMode' | 'shape' | 'attr' | 'look' | 'mods' | 'export'
 
 const MODULE_RESET_KEYS: Record<Exclude<ResetModule, 'export'>, string[]> = {
   emitMode: [
-    'mode', 'rate', 'streamBehavior', 'loopDurationFrames', 'generateLoopStartAnimation', 'generateLoopEndAnimation',
+    'mode', 'rate', 'streamBehavior', 'loopDurationFrames',
+    'generateLoopStartAnimation', 'loopStartUseCustomDuration', 'loopStartDurationFrames',
+    'generateLoopEndAnimation', 'loopEndUseCustomDuration', 'loopEndDurationFrames',
     'burstCount', 'burstLoop', 'delay', 'duration',
   ],
   shape: ['shape', 'radius', 'rectW', 'rectH', 'direction', 'spread', 'coneAngle'],
@@ -1888,6 +1932,16 @@ function toggleResourceLock(resourceId: number) {
 .segs { display: flex; gap: 6px; margin: 6px 0; }
 .stream-behavior-segs { margin-top: 10px; }
 .stream-loop-options { display: grid; gap: 8px; margin: 8px 0 4px; padding: 9px 10px; border: 1px solid #32405a; border-radius: 6px; background: #171f2e; }
+.loop-section-row { display: flex; min-height: 27px; align-items: center; justify-content: space-between; gap: 8px; }
+.loop-duration-control { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
+.loop-duration-toggle { gap: 5px; font-size: 10px; white-space: nowrap; }
+.loop-duration-toggle .switch-ui { width: 26px; height: 14px; }
+.loop-duration-toggle .switch-ui::after { width: 10px; height: 10px; }
+.loop-duration-toggle input:checked + .switch-ui::after { transform: translateX(12px); }
+.loop-section-duration { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; color: #7f8ba4; font-size: 11px; }
+.loop-section-duration input { position: static; width: 54px; height: 25px; padding: 0 6px; border: 1px solid #3a465f; border-radius: 5px; outline: none; background: #101725; color: #e4e8f2; text-align: right; opacity: 1; pointer-events: auto; }
+.loop-section-duration input:focus { border-color: #716eff; }
+.loop-auto-duration { min-width: 54px; color: #77839a; text-align: right; white-space: nowrap; }
 .seg { flex: 1; padding: 5px; background: #1e1e2e; border: 1px solid #2e2e44; border-radius: 6px; color: #aab; font-size: 12px; cursor: pointer; }
 .seg.on { background: #3a5a8c; color: #fff; border-color: #5a7ab8; }
 .mini-btn { background: #2e3a55; border: 1px solid #3a4a6a; color: #cdf; border-radius: 5px; padding: 3px 8px; font-size: 11px; cursor: pointer; }

src/views/Stage.vue

@@ -188,6 +188,8 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { Application, Container, Graphics, Sprite, Text, Texture } from 'pixi.js'
 import { ParticleEmitter, ensureEmitterConfig, type ParticleState } from '../core/particleEmitter'
+import { bakeLoopFrames } from '../core/loopFrameBaker'
+import { loopPlaybackRange } from '../core/loopSegmentTiming'
 import { useParticleStore, type CollisionBody, type ParticleSystem, type ScenePath } from '../store/particleStore'
 import { SpineRuntimeLayer } from '../spine/SpineRuntimeLayer'
 import { editorHistoryState, installEditorHistory, setUndoLimit, undoLastOperation } from '../editor/editorHistory'
@@ -1171,108 +1173,6 @@ function appendStateBones(target: BonePreview[], state: ParticleState) {
   })
 }
 
-function cloneParticleFrame(frame: ParticleState[]): ParticleState[] {
-  return frame.map((state) => ({
-    ...state,
-    trailState: state.trailState
-      ? { ...state.trailState, bones: state.trailState.bones.map((bone) => ({ ...bone })) }
-      : undefined,
-  }))
-}
-
-/**
- * 纯循环段保持同一组粒子骨骼贯穿整个片段。
- * 某一粒子在正常生命周期之外不删除骨骼，而是生成 alpha=0 的“假死”快照；
- * 因此视觉上仍按正常时机消失，结构上却不会因骨骼增删破坏首尾衔接。
- */
-function stabilizeLoopParticleBones(frames: ParticleState[][]) {
-  const templates = new Map<string, ParticleState>()
-  for (const frame of frames) {
-    for (const state of frame) if (!templates.has(state.boneName)) templates.set(state.boneName, cloneParticleFrame([state])[0])
-  }
-  const boneNames = [...templates.keys()].sort((a, b) => {
-    const ai = Number(a.replace(/^p_/, ''))
-    const bi = Number(b.replace(/^p_/, ''))
-    return Number.isFinite(ai) && Number.isFinite(bi) ? ai - bi : a.localeCompare(b)
-  })
-  for (let frameIndex = 0; frameIndex < frames.length; frameIndex++) {
-    const byName = new Map(frames[frameIndex].map((state) => [state.boneName, state]))
-    frames[frameIndex] = boneNames.map((boneName) => {
-      const current = byName.get(boneName)
-      if (current) return current
-      const template = cloneParticleFrame([templates.get(boneName)!])[0]
-      return { ...template, alpha: 0, imageVisible: false, trailState: undefined, active: true }
-    })
-  }
-}
-
-/**
- * 预先生成循环持续的独立片段。
- * 三种片段使用相同种子、相同固定步长和相同预热步数，因此启动末帧、纯循环首尾帧、结束首帧完全一致。
- */
-function bakeLoopFrames(system: ParticleSystem, emitter: ParticleEmitter, fps: number, totalFrames: number) {
-  const config = system.config
-  const frameDuration = 1 / Math.max(1, fps)
-  const maxLife = config.lifeMode === 'fixed'
-    ? Math.max(0, Number(config.lifeMin) || 0)
-    : Math.max(0, Number(config.lifeMin) || 0, Number(config.lifeMax) || 0)
-  const durationFrames = Math.max(1, Math.ceil(Number(config.loopDurationFrames) || 1))
-  const maxLifeFrames = Math.max(1, Math.ceil(maxLife * fps))
-  const warmupCycles = Math.max(1, Math.ceil(maxLifeFrames / durationFrames))
-  const delayFrames = Math.max(0, Math.ceil(Math.max(0, Number(config.delay) || 0) * fps))
-  const frames: ParticleState[][] = []
-
-  emitter.reset()
-  if (config.generateLoopStartAnimation) {
-    for (let index = 0; index < delayFrames; index++) frames.push([])
-    // 启动段的第一帧严格为空；随后自然预热到和纯循环段完全相同的稳定衔接状态。
-    frames.push([])
-    for (let cycle = 0; cycle < warmupCycles; cycle++) {
-      if (cycle > 0) emitter.restartEmissionCycle()
-      for (let index = 0; index < durationFrames; index++) {
-        emitter.update(frameDuration, 'force')
-        frames.push(emitter.capture())
-      }
-    }
-  } else {
-    // 预跑足够多的完整周期，让跨周期存活的粒子进入稳定分布。
-    for (let cycle = 0; cycle < warmupCycles; cycle++) {
-      if (cycle > 0) emitter.restartEmissionCycle()
-      for (let index = 0; index < durationFrames; index++) emitter.update(frameDuration, 'force')
-    }
-    const seam = emitter.capture()
-    // 纯循环和结束段在延迟期间保持循环衔接帧；延迟结束后才开始推进周期或消亡。
-    for (let index = 0; index < delayFrames; index++) frames.push(cloneParticleFrame(seam))
-    frames.push(cloneParticleFrame(seam))
-
-    if (config.generateLoopEndAnimation) {
-      // 结束段从衔接帧开始，停止产生新粒子，直到粒子和其拖尾全部消失。
-      const safetyFrames = Math.max(1, Math.ceil(maxLife * fps) + 2)
-      for (let index = 0; index < safetyFrames && emitter.activeCount > 0; index++) {
-        emitter.update(frameDuration, 'off')
-        frames.push(emitter.capture())
-      }
-      if (frames[frames.length - 1]?.length) frames.push([])
-    } else {
-      // 重新开始相同的发射周期，并保留跨周期粒子；末端点由真实演算产生，不再硬复制首帧。
-      emitter.restartEmissionCycle()
-      for (let index = 0; index < durationFrames; index++) {
-        emitter.update(frameDuration, 'force')
-        frames.push(emitter.capture())
-      }
-      stabilizeLoopParticleBones(frames)
-    }
-  }
-
-  const finalFrame = cloneParticleFrame(frames[frames.length - 1] || [])
-  if (frames.length > totalFrames) frames.length = totalFrames
-  while (frames.length < totalFrames) frames.push(cloneParticleFrame(finalFrame))
-  // 循环持续拥有自己的衔接帧规则：纯循环和结束段允许第 0 帧保留骨骼；
-  // 启动段则已在上方按定义生成空首帧。
-  system.frames = frames
-  emitter.apply(frames[0] || [])
-}
-
 function drawBones(bones: BonePreview[]) {
   if (!boneGfx) return
   const g = boneGfx
@@ -1676,7 +1576,10 @@ function loop() {
             if (emitter && !(sys.config.mode === 'stream' && sys.config.streamBehavior === 'loop')) sys.frames[tl.frame] = emitter.capture()
           }
           tl.frame++
-          if (tl.frame >= tl.totalFrames) { tl.frame = 0; tl.recorded = true }
+          if (tl.frame >= tl.totalFrames) {
+            tl.frame = tl.playbackStart
+            tl.recorded = true
+          }
         } else {
           // 回放阶段：每经过一个固定帧时长才应用下一帧。
           for (const sys of store.systems) {
@@ -1691,9 +1594,19 @@ function loop() {
             }
           }
           tl.frame++
-          if (tl.frame >= tl.totalFrames) {
-            if (tl.loop) tl.frame = 0
-            else { tl.frame = tl.totalFrames - 1; tl.playing = false; break }
+          const activeLoopSystem = store.systems.find((system) => system.id === store.activeId)
+          const activeLoopRange = activeLoopSystem?.config.mode === 'stream' && activeLoopSystem.config.streamBehavior === 'loop'
+            ? loopPlaybackRange(activeLoopSystem.config, fps)
+            : null
+          // 烘焙数据保留“末帧 = 首帧”以便导出闭环。预览精确循环段时，末帧只作为
+          // 数学边界，不再与下一轮首帧连续显示两次，避免衔接处停顿一帧。
+          const closesActiveLoop = tl.loop
+            && activeLoopRange?.start === tl.playbackStart
+            && activeLoopRange.end === tl.playbackEnd
+          const playbackLastFrame = closesActiveLoop ? tl.playbackEnd - 1 : tl.playbackEnd
+          if (tl.frame > playbackLastFrame) {
+            if (tl.loop) tl.frame = tl.playbackStart
+            else { tl.frame = tl.playbackEnd; tl.playing = false; break }
           }
         }
       }

src/views/Timeline.vue

@@ -10,6 +10,9 @@
       <button class="tl-btn" @click="store.nextFrame()" title="后一帧">▶</button>
       <button class="tl-btn" @click="store.toEnd()" title="移动到最后一帧">⏭</button>
       <button class="tl-btn" :class="{ on: store.timeline.loop }" @click="store.toggleLoop()" title="循环">⟳</button>
+      <label class="tl-range" title="自定义播放起始帧"><span>A</span><input v-model="playbackStartDraft" type="number" min="0" :max="Math.max(0, store.timeline.playbackEnd - 1)" aria-label="播放起始帧" @change="commitPlaybackStart" @keydown.enter.prevent="commitPlaybackStart" /></label>
+      <label class="tl-range" title="自定义播放结束帧"><span>B</span><input v-model="playbackEndDraft" type="number" :min="store.timeline.playbackStart + 1" :max="Math.max(1, store.timeline.totalFrames - 1)" aria-label="播放结束帧" @change="commitPlaybackEnd" @keydown.enter.prevent="commitPlaybackEnd" /></label>
+      <button v-if="activeLoopPlaybackRange" class="tl-loop-range" :title="`设为闭合自循环范围 ${activeLoopPlaybackRange.start}–${activeLoopPlaybackRange.end}f`" @click="useActiveLoopPlaybackRange">循环段</button>
       <span class="tl-frame">帧 <b>{{ store.timeline.frame }}</b> / <b>{{ Math.max(0, store.timeline.totalFrames - 1) }}</b></span>
       <span class="tl-legend"><i class="legend-emission"></i>持续发射 <i class="legend-life"></i>粒子存在 <i class="legend-spine"></i>Spine 动画</span>
       <div ref="animationMenuRef" class="tl-anim tl-owner-animation">
@@ -89,12 +92,15 @@
             @pointerdown.stop="onBarDown($event, sys)"
           >
             <span class="lane-name">{{ (sys.config as any).name || '系统 ' + (i + 1) }}</span>
-            <span class="bar-life" :style="{ width: lifeWidthPx(sys) + 'px' }"></span>
-            <span
-              v-if="sys.config.mode === 'stream' && !isLoopEnd(sys)"
-              class="bar-emission"
-              :style="{ width: emissionWidthPx(sys) + 'px' }"
-            >
+            <span class="bar-life" :class="{ 'loop-life': isLoopStream(sys) }" :style="{ width: lifeWidthPx(sys) + 'px' }"></span>
+            <template v-if="isLoopStream(sys)">
+              <span v-if="loopStartWidthPx(sys)" class="bar-loop-transition bar-loop-start" :style="{ width: loopStartWidthPx(sys) + 'px' }"></span>
+              <span class="bar-emission bar-loop" :style="{ left: loopStartWidthPx(sys) + 'px', width: emissionWidthPx(sys) + 'px' }">
+                <span class="bar-handle" title="拖动循环段时长" @pointerdown.stop="onBarResizeDown($event, sys)"></span>
+              </span>
+              <span v-if="loopEndWidthPx(sys)" class="bar-loop-transition bar-loop-end" :style="{ left: (loopStartWidthPx(sys) + emissionWidthPx(sys)) + 'px', width: loopEndWidthPx(sys) + 'px' }"></span>
+            </template>
+            <span v-else-if="sys.config.mode === 'stream'" class="bar-emission" :style="{ width: emissionWidthPx(sys) + 'px' }">
               <span class="bar-handle" title="拖动持续发射时长" @pointerdown.stop="onBarResizeDown($event, sys)"></span>
             </span>
           </div>
@@ -118,9 +124,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch, watchEffect } from 'vue'
 import { useParticleStore } from '../store/particleStore'
 import type { SpineSceneObject } from '../spine/spineTypes'
+import { loopPlaybackRange, loopSegmentTiming } from '../core/loopSegmentTiming'
 
 type SysLike = { id: number; config: any }
 
@@ -141,6 +148,11 @@ watchEffect(() => {
 })
 
 const activeParticleSystem = computed(() => store.systems.find((system) => system.id === store.activeId) || null)
+const activeLoopPlaybackRange = computed(() => {
+  const system = activeParticleSystem.value
+  if (!system || !isLoopStream(system)) return null
+  return loopPlaybackRange(system.config, fps.value)
+})
 
 function toggleAnimationMenu() {
   if (!activeParticleSystem.value) return
@@ -196,7 +208,13 @@ const viewFrames = ref(120)
 // 避免 pointermove 每一帧都触发 Stage 清缓存、重置粒子模拟。
 const draftDelays = ref<Record<number, number>>({})
 const draftDurations = ref<Record<number, number>>({})
+const draftLoopDurations = ref<Record<number, number>>({})
 const draftSpineStarts = ref<Record<number, number>>({})
+const playbackStartDraft = ref(String(store.timeline.playbackStart))
+const playbackEndDraft = ref(String(store.timeline.playbackEnd))
+
+watch(() => store.timeline.playbackStart, (value) => { playbackStartDraft.value = String(value) })
+watch(() => store.timeline.playbackEnd, (value) => { playbackEndDraft.value = String(value) })
 
 const totalFrames = computed(() => store.timeline.totalFrames)
 const zoomLabel = computed(() => (viewFrames.value <= 30 ? '放大' : viewFrames.value >= 300 ? '缩小' : '适中'))
@@ -218,6 +236,24 @@ function onSpinePreviewAnimationChange(event: Event) {
   store.timeline.frame = 0
 }
 
+function commitPlaybackStart() {
+  store.setPlaybackStart(Number(playbackStartDraft.value))
+  playbackStartDraft.value = String(store.timeline.playbackStart)
+}
+
+function commitPlaybackEnd() {
+  store.setPlaybackEnd(Number(playbackEndDraft.value))
+  playbackEndDraft.value = String(store.timeline.playbackEnd)
+}
+
+function useActiveLoopPlaybackRange() {
+  const range = activeLoopPlaybackRange.value
+  if (!range) return
+  // 先扩展结束端，再写入起始端，避免旧范围较小时对新起点产生临时钳制。
+  store.setPlaybackEnd(range.end)
+  store.setPlaybackStart(range.start)
+}
+
 // 每像素代表的帧数(视口宽度内放下 viewFrames 帧)
 function pxPerF() {
   const vw = vpRef.value?.clientWidth || 600
@@ -262,14 +298,9 @@ function barWidthPx(sys: SysLike) {
 
 function emissionWidthPx(sys: SysLike) {
   if ((sys.config as any).mode !== 'stream') return 0
-  if (isLoopEnd(sys)) return 0
   if ((sys.config as any).streamBehavior === 'loop') {
     const config = sys.config as any
-    const durationFrames = Math.max(1, Math.ceil(Number(config.loopDurationFrames) || 1))
-    if (config.generateLoopStartAnimation) {
-      const warmupCycles = Math.max(1, Math.ceil((maxParticleLife(sys) * fps.value) / durationFrames))
-      return (durationFrames * warmupCycles) / pxPerF()
-    }
+    const durationFrames = draftLoopDurations.value[sys.id] ?? loopSegmentTiming(config, fps.value).loop
     return durationFrames / pxPerF()
   }
   const duration = draftDurations.value[sys.id] ?? Math.max(1 / fps.value, Number((sys.config as any).duration) || 1)
@@ -279,18 +310,24 @@ function emissionWidthPx(sys: SysLike) {
 function lifeWidthPx(sys: SysLike) {
   const config = sys.config as any
   if (config.mode === 'stream' && config.streamBehavior === 'loop') {
-    // 启动段和纯循环段的存在时长与发射段完全重合；结束段只显示剩余生命/拖尾。
-    if (!config.generateLoopEndAnimation) return emissionWidthPx(sys)
-    return ((maxParticleLife(sys) * fps.value) + 1) / pxPerF()
+    return loopStartWidthPx(sys) + emissionWidthPx(sys) + loopEndWidthPx(sys)
   }
   // 红色底条表示整个系统“仍有粒子存在”的时长：持续发射窗口 + 最长粒子生命。
   // 爆发模式的发射窗口为 0，因此只保留最长粒子生命。
   return emissionWidthPx(sys) + (maxParticleLife(sys) * fps.value) / pxPerF()
 }
 
-function isLoopEnd(sys: SysLike) {
+function isLoopStream(sys: SysLike) {
   const config = sys.config as any
-  return config.mode === 'stream' && config.streamBehavior === 'loop' && config.generateLoopEndAnimation
+  return config.mode === 'stream' && config.streamBehavior === 'loop'
+}
+
+function loopStartWidthPx(sys: SysLike) {
+  return isLoopStream(sys) ? loopSegmentTiming(sys.config as any, fps.value).start / pxPerF() : 0
+}
+
+function loopEndWidthPx(sys: SysLike) {
+  return isLoopStream(sys) ? loopSegmentTiming(sys.config as any, fps.value).end / pxPerF() : 0
 }
 
 function selectedSpineDuration(spine: SpineSceneObject) {
@@ -358,25 +395,35 @@ function onBarDown(e: PointerEvent, sys: SysLike) {
 // 拖动粒子条右缘:调整发射时长 duration
 function onBarResizeDown(e: PointerEvent, sys: SysLike) {
   e.stopPropagation()
-  if (isLoopEnd(sys)) return
+  const loopStream = isLoopStream(sys)
   const startDur = Math.max(0, Number((sys.config as any).duration) || 0)
+  const startLoopFrames = loopSegmentTiming(sys.config as any, fps.value).loop
   const secPerPx = pxPerF() / fps.value
   const barLeft = (e.currentTarget as HTMLElement).closest('.lane-bar')?.getBoundingClientRect().left ?? e.clientX
+  const startOffsetPx = loopStartWidthPx(sys)
   let moved = false
   const move = (ev: PointerEvent) => {
     moved = true
     // 使用右端相对粒子条左端的绝对距离换算发射时长。
     // 因此拖到 60f 就得到 60f，而不是减去粒子生命周期后的剩余帧数。
-    const nd = Math.max(1 / fps.value, Math.min((ev.clientX - barLeft) * secPerPx, 600))
-    draftDurations.value[sys.id] = Math.round(nd * fps.value) / fps.value
+    if (loopStream) {
+      const frames = Math.min(1800, Math.max(1, Math.round((ev.clientX - barLeft - startOffsetPx) / pxPerF())))
+      draftLoopDurations.value[sys.id] = frames
+    } else {
+      const nd = Math.max(1 / fps.value, Math.min((ev.clientX - barLeft) * secPerPx, 600))
+      draftDurations.value[sys.id] = Math.round(nd * fps.value) / fps.value
+    }
   }
   const finish = (commit: boolean) => {
     window.removeEventListener('pointermove', move)
     window.removeEventListener('pointerup', up)
     window.removeEventListener('pointercancel', cancel)
     const value = draftDurations.value[sys.id]
+    const loopValue = draftLoopDurations.value[sys.id]
     delete draftDurations.value[sys.id]
-    if (commit && moved && value != null && value !== startDur) (sys.config as any).duration = value
+    delete draftLoopDurations.value[sys.id]
+    if (commit && moved && loopStream && loopValue != null && loopValue !== startLoopFrames) (sys.config as any).loopDurationFrames = loopValue
+    else if (commit && moved && !loopStream && value != null && value !== startDur) (sys.config as any).duration = value
   }
   const up = () => finish(true)
   const cancel = () => finish(false)
@@ -419,6 +466,11 @@ function onSpineBarDown(e: PointerEvent, spine: SpineSceneObject) {
 .tl-controls { display: flex; align-items: center; gap: 8px; }
 .tl-btn { width: 30px; height: 26px; background: #1e1e2e; border: 1px solid #2e2e44; border-radius: 6px; color: #aab; font-size: 12px; cursor: pointer; }
 .tl-btn.on { background: #3a5a8c; color: #fff; border-color: #5a7ab8; }
+.tl-range { display: flex; height: 25px; align-items: center; gap: 3px; color: #778198; font-size: 10px; }
+.tl-range input { width: 43px; height: 25px; padding: 0 5px; box-sizing: border-box; border: 1px solid #3a3a51; border-radius: 5px; outline: none; background: #181824; color: #e1e4ed; font-size: 11px; text-align: center; }
+.tl-range input:focus { border-color: #716eff; }
+.tl-loop-range { height: 25px; padding: 0 7px; border: 1px solid #4e5680; border-radius: 5px; background: #252943; color: #bfc8e8; font-size: 10px; cursor: pointer; white-space: nowrap; }
+.tl-loop-range:hover { border-color: #716eff; color: #fff; }
 .tl-frame { display: inline-block; flex: 0 0 92px; width: 92px; box-sizing: border-box; font-size: 12px; color: #aab; text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; white-space: nowrap; }
 .tl-frame b { display: inline; color: inherit; font-weight: 400; }
 .tl-legend { display: flex; align-items: center; gap: 4px; color: #778198; font-size: 10px; }
@@ -473,7 +525,12 @@ function onSpineBarDown(e: PointerEvent, spine: SpineSceneObject) {
 .lane-bar:active { cursor: grabbing; }
 .lane-name { position: absolute; left: 14px; right: 5px; top: 2px; z-index: 2; pointer-events: none; font-size: 11px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .bar-life { position: absolute; inset: 0 auto 0 0; z-index: 0; min-width: 1px; border: 1px solid #c05a66; border-radius: 5px; background: #a54551; box-sizing: border-box; }
+.bar-life.loop-life { border-color: #667085; background: #242b39; }
 .bar-emission { position: absolute; inset: 0 auto 0 0; z-index: 1; min-width: 1px; border: 1px solid #45a97d; border-radius: 5px 0 0 5px; background: #2f8b62; box-sizing: border-box; }
+.bar-emission.bar-loop { border-radius: 0; }
+.bar-loop-transition { position: absolute; top: 0; bottom: 0; z-index: 1; border: 1px solid #7d8799; background: #50596a; box-sizing: border-box; }
+.bar-loop-start { left: 0; border-radius: 5px 0 0 5px; }
+.bar-loop-end { border-radius: 0 5px 5px 0; }
 .bar-handle { position: absolute; z-index: 4; right: -4px; top: -1px; bottom: -1px; width: 8px; cursor: ew-resize; background: rgba(255,255,255,0.18); }
 .bar-handle:hover { background: rgba(255,255,255,0.35); }
 .spine-ico { color: #c08cff; }