From 3dd96b21b7395dd5ba074d412b0297a35dbc4d0b Mon Sep 17 00:00:00 2001
From: Stakataka_3030 <stakataka_3030@qq.com>
Date: Wed, 30 Sep 2026 17:15:00 +0800
Subject: [PATCH 01/12] fix: guard scene loading and autosave state

---
 packages/origine2/src/locales/en.po           |  12 ++
 packages/origine2/src/locales/ja.po           |  12 ++
 packages/origine2/src/locales/ko.po           |  12 ++
 packages/origine2/src/locales/zhCn.po         |  12 ++
 .../pages/editor/TextEditor/TextEditor.tsx    | 115 +++++++++++++-----
 .../editor/TextEditor/textEditor.module.scss  |  14 +++
 6 files changed, 147 insertions(+), 30 deletions(-)

diff --git a/packages/origine2/src/locales/en.po b/packages/origine2/src/locales/en.po
index 9c1b4326d..b5e0056b2 100644
--- a/packages/origine2/src/locales/en.po
+++ b/packages/origine2/src/locales/en.po
@@ -761,9 +761,15 @@ msgstr "Scene"
 msgid "场景与分支"
 msgstr "Scenes and branches"
 
+msgid "场景保存失败，请重试"
+msgstr "Failed to save the scene. Please retry."
+
 msgid "场景文件"
 msgstr "Scene file"
 
+msgid "场景读取失败，请检查文件是否存在后重试"
+msgstr "Failed to load the scene. Check that the file exists and retry."
+
 msgid "场景返回"
 msgstr "Return from scene"
 
@@ -1565,6 +1571,9 @@ msgstr "Uploading"
 msgid "正在加载模板配置"
 msgstr "Loading template configuration"
 
+msgid "正在读取场景…"
+msgstr "Loading scene…"
+
 msgid "正在读取用户数据设置"
 msgstr "Reading user data settings"
 
@@ -2405,6 +2414,9 @@ msgstr "Rename template directory"
 msgid "重命名游戏目录"
 msgstr "Rename game directory"
 
+msgid "重试"
+msgstr "Retry"
+
 msgid "鉴赏"
 msgstr "Appreciation"
 
diff --git a/packages/origine2/src/locales/ja.po b/packages/origine2/src/locales/ja.po
index 9394358a1..75f798361 100644
--- a/packages/origine2/src/locales/ja.po
+++ b/packages/origine2/src/locales/ja.po
@@ -761,9 +761,15 @@ msgstr "シーン"
 msgid "场景与分支"
 msgstr "シーンとブランチ"
 
+msgid "场景保存失败，请重试"
+msgstr "シーンの保存に失敗しました。再試行してください。"
+
 msgid "场景文件"
 msgstr "シーンファイル"
 
+msgid "场景读取失败，请检查文件是否存在后重试"
+msgstr "シーンの読み込みに失敗しました。ファイルが存在することを確認して再試行してください。"
+
 msgid "场景返回"
 msgstr "シーンから戻る"
 
@@ -1565,6 +1571,9 @@ msgstr "アップロード中"
 msgid "正在加载模板配置"
 msgstr "テンプレート設定を読み込み中"
 
+msgid "正在读取场景…"
+msgstr "シーンを読み込み中…"
+
 msgid "正在读取用户数据设置"
 msgstr "ユーザーデータ設定を読み込み中"
 
@@ -2405,6 +2414,9 @@ msgstr "テンプレート名変更"
 msgid "重命名游戏目录"
 msgstr "ゲームディレクトリ名変更"
 
+msgid "重试"
+msgstr "再試行"
+
 msgid "鉴赏"
 msgstr "鑑賞"
 
diff --git a/packages/origine2/src/locales/ko.po b/packages/origine2/src/locales/ko.po
index 99056f141..ad3c66c67 100644
--- a/packages/origine2/src/locales/ko.po
+++ b/packages/origine2/src/locales/ko.po
@@ -761,9 +761,15 @@ msgstr "장면"
 msgid "场景与分支"
 msgstr "장면 및 분기"
 
+msgid "场景保存失败，请重试"
+msgstr "장면 저장에 실패했습니다. 다시 시도하세요."
+
 msgid "场景文件"
 msgstr "장면 파일"
 
+msgid "场景读取失败，请检查文件是否存在后重试"
+msgstr "장면을 불러오지 못했습니다. 파일이 있는지 확인한 후 다시 시도하세요."
+
 msgid "场景返回"
 msgstr "씬 반환"
 
@@ -1565,6 +1571,9 @@ msgstr "업로드 중"
 msgid "正在加载模板配置"
 msgstr "템플릿 구성을 불러오는 중"
 
+msgid "正在读取场景…"
+msgstr "장면을 불러오는 중…"
+
 msgid "正在读取用户数据设置"
 msgstr "사용자 데이터 설정을 읽는 중"
 
@@ -2405,6 +2414,9 @@ msgstr "템플릿 목록의 이름 바꾸기"
 msgid "重命名游戏目录"
 msgstr "게임 목록의 이름 바꾸기"
 
+msgid "重试"
+msgstr "다시 시도"
+
 msgid "鉴赏"
 msgstr "감상(갤러리)"
 
diff --git a/packages/origine2/src/locales/zhCn.po b/packages/origine2/src/locales/zhCn.po
index d06242210..42d41da97 100644
--- a/packages/origine2/src/locales/zhCn.po
+++ b/packages/origine2/src/locales/zhCn.po
@@ -761,9 +761,15 @@ msgstr "场景"
 msgid "场景与分支"
 msgstr "场景与分支"
 
+msgid "场景保存失败，请重试"
+msgstr "场景保存失败，请重试"
+
 msgid "场景文件"
 msgstr "场景文件"
 
+msgid "场景读取失败，请检查文件是否存在后重试"
+msgstr "场景读取失败，请检查文件是否存在后重试"
+
 msgid "场景返回"
 msgstr "场景返回"
 
@@ -1565,6 +1571,9 @@ msgstr "正在上传"
 msgid "正在加载模板配置"
 msgstr "正在加载模板配置"
 
+msgid "正在读取场景…"
+msgstr "正在读取场景…"
+
 msgid "正在读取用户数据设置"
 msgstr "正在读取用户数据设置"
 
@@ -2405,6 +2414,9 @@ msgstr "重命名模板目录"
 msgid "重命名游戏目录"
 msgstr "重命名游戏目录"
 
+msgid "重试"
+msgstr "重试"
+
 msgid "鉴赏"
 msgstr "鉴赏"
 
diff --git a/packages/origine2/src/pages/editor/TextEditor/TextEditor.tsx b/packages/origine2/src/pages/editor/TextEditor/TextEditor.tsx
index c3c2e5ce2..f48e3221e 100644
--- a/packages/origine2/src/pages/editor/TextEditor/TextEditor.tsx
+++ b/packages/origine2/src/pages/editor/TextEditor/TextEditor.tsx
@@ -13,7 +13,9 @@ import { eventBus } from '@/utils/eventBus';
 import useEditorStore from '@/store/useEditorStore';
 import { useGameEditorContext } from '@/store/useGameEditorStore';
 import { api } from '@/api';
-import { useValue } from "@/hooks/useValue";
+import { t } from '@lingui/macro';
+import { useValue } from '@/hooks/useValue';
+import { Button } from '@fluentui/react-components';
 
 // 最近一次通过点击光标同步到引擎的场景，所有文本编辑器标签页共享
 let lastClickSyncedScenePath = '';
@@ -26,10 +28,19 @@ interface ITextEditorProps {
 export default function TextEditor(props: ITextEditorProps) {
   const target = useGameEditorContext((state) => state.currentTag);
   const tags = useGameEditorContext((state) => state.tags);
-  const currentText = useRef('Loading Scene Data......');
+  // 加载状态只在界面展示，不能作为场景文本进入保存流程。
+  const currentText = useRef('');
   const sceneName = tags.find((e) => e.path === target?.path)!.name;
   const isAutoWarp = useEditorStore.use.isAutoWarp();
-  const isEditorReady = useValue(false); // 读取完脚本才能算准备就绪
+  const isEditorReady = useValue(false);
+  const loadError = useValue<string | null>(null);
+  const loadedPath = useRef<string | null>(null);
+  const applyingRemoteText = useRef(false);
+  const request = useRef<AbortController | null>(null);
+  const requestSequence = useRef(0);
+  const editVersion = useRef(0);
+  const savedVersion = useRef(0);
+  const saveQueue = useRef<Promise<void>>(Promise.resolve());
 
   // 准备获取 Monaco
   // 建立 Ref
@@ -52,6 +63,7 @@ export default function TextEditor(props: ITextEditorProps) {
       const editorValue = editor.getValue();
       const targetValue = editorValue.split('\n')[event.position.lineNumber - 1];
       if (event.reason === monaco.editor.CursorChangeReason.Explicit) {
+        if (loadedPath.current !== props.targetPath) return;
         const scenePath = target?.path ?? '';
         // 切换标签页后引擎仍停留在其他场景，此时即使点击的是已记录的同一行也需要同步
         const isSceneChanged = scenePath !== lastClickSyncedScenePath;
@@ -119,27 +131,35 @@ export default function TextEditor(props: ITextEditorProps) {
    * @param {string} value
    * @param {any} ev
    */
-  const submitChange = useMemo(() => debounce((value: string | undefined, ev: monaco.editor.IModelContentChangedEvent) => {
+  const submitChange = useMemo(() => debounce((value: string, version: number) => {
     logger.debug('编辑器提交更新');
     // 这里直接使用临时储存的行数, 一般来说光标位置就在改变的行
     const lineNumber = editorLineHolder.getSceneLine(props.targetPath);
-    // const lineNumber = ev.changes[0].range.startLineNumber;
-    // const trueLineNumber = getTrueLinenumber(lineNumber, value ?? "");
-    if (value || value === '') currentText.current = value;
-    eventBus.emit('editor:update-scene', { scene: currentText.current });
-    api.assetsControllerEditTextFile({textFile: currentText.current, path: props.targetPath}).then((res) => {
-      const targetValue = currentText.current.split('\n')[lineNumber - 1];
+    eventBus.emit('editor:update-scene', { scene: value });
+    // 按修改顺序保存，避免较早的请求后完成并覆盖较新的内容。
+    saveQueue.current = saveQueue.current.then(() => api.assetsControllerEditTextFile({textFile: value, path: props.targetPath})).then((res) => {
+      // 后端写入失败时仍返回成功状态码，需同时检查写入结果。
+      if ((res.data as unknown) !== 'Updated.') throw new Error('Scene save failed');
+      if (loadedPath.current !== props.targetPath) return;
+      savedVersion.current = Math.max(savedVersion.current, version);
+      if (version === editVersion.current) loadError.set(null);
+      const targetValue = value.split('\n')[lineNumber - 1];
       EditorPreviewClient.sendSyncScene({
         scenePath: target?.path ?? '',
         lineNumber,
         lineCommandString: targetValue,
       });
+    }).catch(() => {
+      if (loadedPath.current !== props.targetPath) return;
+      loadError.set(t`场景保存失败，请重试`);
     });
   }, 500), [props.targetPath, target?.path]);
 
-  const handleChange = (value: string | undefined, ev: monaco.editor.IModelContentChangedEvent) => {
-    if (!isEditorReady.value) return;
-    submitChange(value, ev);
+  const handleChange = (value: string | undefined) => {
+    if (loadedPath.current !== props.targetPath || applyingRemoteText.current || value === undefined) return;
+    currentText.current = value;
+    editVersion.current += 1;
+    submitChange(value, editVersion.current);
   };
 
   useEffect(() => {
@@ -147,6 +167,7 @@ export default function TextEditor(props: ITextEditorProps) {
   }, [submitChange]);
 
   const syncCurrentLine = useCallback(() => {
+    if (loadedPath.current !== props.targetPath) return;
     const lineNumber = editorLineHolder.getSceneLine(props.targetPath) || editorRef.current?.getPosition()?.lineNumber || 1;
     EditorPreviewClient.sendSyncScene({
       scenePath: target?.path ?? '',
@@ -163,34 +184,55 @@ export default function TextEditor(props: ITextEditorProps) {
     };
   }, [syncCurrentLine]);
 
-  function updateEditData() {
+  const updateEditData = useCallback(() => {
     const path = props.targetPath;
+    const model = editorRef.current?.getModel();
+    // 焦点事件可能早于 Monaco 挂载，尚未保存的修改也不能被磁盘内容覆盖。
+    if (!model || editVersion.current !== savedVersion.current) return;
+    request.current?.abort();
+    const controller = new AbortController();
+    request.current = controller;
+    const sequence = ++requestSequence.current;
+    const version = editVersion.current;
+    loadError.set(null);
     axios
-      .get(path)
+      .get<string>(path, {
+        signal: controller.signal,
+        timeout: 15000,
+        responseType: 'text',
+        transformResponse: [(data) => data],
+      })
       .then((res) => res.data)
       .then((data) => {
-        const dataStr = data.toString();
-        if (dataStr === currentText.current) {
-          return;
-        }
-        currentText.current = dataStr;
-        eventBus.emit('editor:update-scene', { scene: dataStr });
-        const model = editorRef.current?.getModel();
-        model?.applyEdits([
-          {
-            range: model.getFullModelRange(),
-            text: currentText.current,
-            forceMoveMarkers: true
+        if (controller.signal.aborted || sequence !== requestSequence.current || version !== editVersion.current || editorRef.current?.getModel() !== model) return;
+        if (typeof data !== 'string') throw new Error('Invalid scene text response');
+        applyingRemoteText.current = true;
+        try {
+          if (model.getValue() !== data) {
+            model.applyEdits([{ range: model.getFullModelRange(), text: data, forceMoveMarkers: true }]);
           }
-        ]);
+        } finally {
+          applyingRemoteText.current = false;
+        }
+        currentText.current = data;
+        loadedPath.current = path;
         isEditorReady.value = true;
+        eventBus.emit('editor:update-scene', { scene: data });
         const targetPosition = editorLineHolder.getScenePosition(props.targetPath);
         editorRef?.current?.setPosition(targetPosition);
         editorRef?.current?.revealPositionInCenterIfOutsideViewport(targetPosition, monaco.editor.ScrollType.Immediate);
+      }).catch(() => {
+        if (controller.signal.aborted || sequence !== requestSequence.current || version !== editVersion.current) return;
+        loadError.set(t`场景读取失败，请检查文件是否存在后重试`);
       });
-  }
+  }, [props.targetPath]);
 
   useEffect(() => {
+    loadedPath.current = null;
+    isEditorReady.value = false;
+    editVersion.current = 0;
+    savedVersion.current = 0;
+    updateEditData();
     const handleVisibilityChange = () => {
       if (document.visibilityState === 'visible') {
         updateEditData();
@@ -201,10 +243,13 @@ export default function TextEditor(props: ITextEditorProps) {
     document.addEventListener('visibilitychange', handleVisibilityChange);
 
     return () => {
+      request.current?.abort();
+      requestSequence.current += 1;
+      loadedPath.current = null;
       window.removeEventListener('focus', handleVisibilityChange);
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
-  }, []);
+  }, [updateEditData]);
 
   return (
     <div
@@ -219,7 +264,17 @@ export default function TextEditor(props: ITextEditorProps) {
         defaultLanguage="webgal"
         language="webgal"
         defaultValue={currentText.current}
+        options={{ readOnly: !isEditorReady.value }}
       />
+      {(!isEditorReady.value || loadError.value) && <div className={styles.textEditor_status} role={loadError.value ? 'alert' : 'status'}>
+        {loadError.value ?? t`正在读取场景…`}
+        {loadError.value && <Button appearance="secondary" onClick={() => {
+          if (editVersion.current !== savedVersion.current) {
+            loadError.set(null);
+            submitChange(currentText.current, editVersion.current);
+          } else updateEditData();
+        }}>{t`重试`}</Button>}
+      </div>}
     </div>
   );
 }
diff --git a/packages/origine2/src/pages/editor/TextEditor/textEditor.module.scss b/packages/origine2/src/pages/editor/TextEditor/textEditor.module.scss
index c5a28d682..99abf5775 100644
--- a/packages/origine2/src/pages/editor/TextEditor/textEditor.module.scss
+++ b/packages/origine2/src/pages/editor/TextEditor/textEditor.module.scss
@@ -1,4 +1,18 @@
 .textEditor_main{
+  position: relative;
   height: 100%;
   width: 100%;
 }
+
+.textEditor_status{
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  color: var(--colorNeutralForeground1);
+  background: var(--colorNeutralBackground1);
+}

From 41ac5c7393e818b4dd54aa7638e7f76ce453849f Mon Sep 17 00:00:00 2001
From: Mahiru <Mahiru_@outlook.com>
Date: Thu, 1 Oct 2026 10:44:14 +0800
Subject: [PATCH 02/12] =?UTF-8?q?fix:=20=E6=96=87=E4=BB=B6=E6=9C=AA?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4=E6=97=B6=EF=BC=8C=E4=B8=8D=E8=A6=81=E5=9C=A8?=
 =?UTF-8?q?=E5=88=87=E5=9B=9E=E7=AA=97=E5=8F=A3=E6=97=B6=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E8=A7=86=E5=9B=BE=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/origine2/src/pages/editor/TextEditor/TextEditor.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/origine2/src/pages/editor/TextEditor/TextEditor.tsx b/packages/origine2/src/pages/editor/TextEditor/TextEditor.tsx
index f48e3221e..e72834b54 100644
--- a/packages/origine2/src/pages/editor/TextEditor/TextEditor.tsx
+++ b/packages/origine2/src/pages/editor/TextEditor/TextEditor.tsx
@@ -206,6 +206,8 @@ export default function TextEditor(props: ITextEditorProps) {
       .then((data) => {
         if (controller.signal.aborted || sequence !== requestSequence.current || version !== editVersion.current || editorRef.current?.getModel() !== model) return;
         if (typeof data !== 'string') throw new Error('Invalid scene text response');
+        // 已加载且磁盘内容未变时直接返回，保留用户的选区与滚动位置。
+        if (loadedPath.current === path && model.getValue() === data) return;
         applyingRemoteText.current = true;
         try {
           if (model.getValue() !== data) {

From 4f54d93d4ccde20d160953c6587d5b3486e97ea9 Mon Sep 17 00:00:00 2001
From: Mahiru <Mahiru_@outlook.com>
Date: Thu, 1 Oct 2026 10:49:41 +0800
Subject: [PATCH 03/12] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E5=A4=B1=E8=B4=A5=E6=B5=AE=E5=B1=82=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/editor/TextEditor/TextEditor.tsx |  2 +-
 .../editor/TextEditor/textEditor.module.scss   | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/origine2/src/pages/editor/TextEditor/TextEditor.tsx b/packages/origine2/src/pages/editor/TextEditor/TextEditor.tsx
index e72834b54..0429cb20a 100644
--- a/packages/origine2/src/pages/editor/TextEditor/TextEditor.tsx
+++ b/packages/origine2/src/pages/editor/TextEditor/TextEditor.tsx
@@ -270,7 +270,7 @@ export default function TextEditor(props: ITextEditorProps) {
       />
       {(!isEditorReady.value || loadError.value) && <div className={styles.textEditor_status} role={loadError.value ? 'alert' : 'status'}>
         {loadError.value ?? t`正在读取场景…`}
-        {loadError.value && <Button appearance="secondary" onClick={() => {
+        {loadError.value && <Button appearance="secondary" size="small" onClick={() => {
           if (editVersion.current !== savedVersion.current) {
             loadError.set(null);
             submitChange(currentText.current, editVersion.current);
diff --git a/packages/origine2/src/pages/editor/TextEditor/textEditor.module.scss b/packages/origine2/src/pages/editor/TextEditor/textEditor.module.scss
index 99abf5775..da8510453 100644
--- a/packages/origine2/src/pages/editor/TextEditor/textEditor.module.scss
+++ b/packages/origine2/src/pages/editor/TextEditor/textEditor.module.scss
@@ -4,15 +4,21 @@
   width: 100%;
 }
 
+// 顶部居中的 toast 浮层，样式参考 components/message
 .textEditor_status{
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  max-width: calc(100% - 32px);
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 12px;
+  gap: 12px;
+  padding: 8px 16px;
   color: var(--colorNeutralForeground1);
-  background: var(--colorNeutralBackground1);
+  background: var(--bg-card);
+  border: var(--border-md);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
 }

From fd282391bd42a9ec803bee13c8b021f28bc8b7fa Mon Sep 17 00:00:00 2001
From: Mahiru <Mahiru_@outlook.com>
Date: Sun, 4 Oct 2026 14:53:53 +0800
Subject: [PATCH 04/12] =?UTF-8?q?Animation=20v2=20=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E4=BE=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-preview-protocol/src/index.ts |  25 ++
 packages/origine2/package.json                |   1 +
 packages/origine2/src/locales/en.po           |  84 +++++++
 packages/origine2/src/locales/ja.po           |  84 +++++++
 packages/origine2/src/locales/ko.po           |  84 +++++++
 packages/origine2/src/locales/zhCn.po         |  84 +++++++
 .../AnimationEditor/AnimationEditor.tsx       |  54 +++++
 .../AnimationEditor/AnimationFileEditor.tsx   |  46 ++++
 .../animationFileEditor.module.scss           |  18 ++
 .../AnimationEditor/components/InfoTip.tsx    |  16 ++
 .../components/ResizableSplit.tsx             |  55 +++++
 .../components/infoTip.module.scss            |  13 +
 .../components/resizableSplit.module.scss     |  64 +++++
 .../model/animationDocument.ts                | 137 +++++++++++
 .../model/animationSettings.ts                |  77 ++++++
 .../AnimationEditor/model/trackOperations.ts  |  44 ++++
 .../AnimationEditor/model/trackSampling.ts    |  41 ++++
 .../model/useAnimationDocument.ts             |  52 ++++
 .../model/useAnimationProperties.ts           |  67 ++++++
 .../preview/AnimationPreview.tsx              |  46 ++++
 .../preview/animationPreview.module.scss      |  20 ++
 .../preview/previewSettings.ts                |  69 ++++++
 .../preview/useDedicatedPreview.ts            |  59 +++++
 .../settings/AnimationSettingsPanel.tsx       | 110 +++++++++
 .../AnimationEditor/settings/FileSetting.tsx  |  40 ++++
 .../animationSettingsPanel.module.scss        |  66 +++++
 .../timeline/AddPropertyMenu.tsx              |  40 ++++
 .../timeline/AnimationTimeline.tsx            | 134 +++++++++++
 .../timeline/TimelineRuler.tsx                |  46 ++++
 .../timeline/TimelineToolbar.tsx              |  56 +++++
 .../AnimationEditor/timeline/TrackHeader.tsx  | 109 +++++++++
 .../AnimationEditor/timeline/TrackLane.tsx    | 118 +++++++++
 .../AnimationEditor/timeline/buildTrackRow.ts |  80 +++++++
 .../timeline/timeline.module.scss             | 226 ++++++++++++++++++
 .../timeline/timelineLayout.ts                |  37 +++
 .../timeline/useElementWidth.ts               |  15 ++
 .../AnimationEditor/timeline/usePlayback.ts   |  51 ++++
 .../timeline/useTimelineZoom.ts               |  44 ++++
 .../pages/editor/MainArea/EditorToolbar.tsx   |  23 +-
 .../JsonResourceDisplay.tsx                   |  13 +-
 .../ResourceDisplay/ResourceDisplay.tsx       |   4 +-
 .../origine2/src/utils/editorPreviewClient.ts |  26 +-
 packages/origine2/src/utils/eventBus.ts       |   4 +
 .../websocket/editorPreviewHost.spec.ts       |  83 +++++++
 .../Modules/websocket/editorPreviewHost.ts    |  52 +++-
 45 files changed, 2598 insertions(+), 19 deletions(-)
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/AnimationEditor.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/AnimationFileEditor.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/animationFileEditor.module.scss
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/components/InfoTip.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/components/ResizableSplit.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/components/infoTip.module.scss
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/components/resizableSplit.module.scss
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/model/animationDocument.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/model/animationSettings.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/model/trackOperations.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/model/trackSampling.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationDocument.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationProperties.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/preview/AnimationPreview.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/preview/animationPreview.module.scss
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/preview/previewSettings.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/preview/useDedicatedPreview.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/settings/FileSetting.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/settings/animationSettingsPanel.module.scss
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/AddPropertyMenu.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/AnimationTimeline.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/TimelineRuler.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/TimelineToolbar.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackHeader.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackLane.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/buildTrackRow.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/timeline.module.scss
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/timelineLayout.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/useElementWidth.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/usePlayback.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/useTimelineZoom.ts

diff --git a/packages/editor-preview-protocol/src/index.ts b/packages/editor-preview-protocol/src/index.ts
index a18ae9c8d..ced4f888e 100644
--- a/packages/editor-preview-protocol/src/index.ts
+++ b/packages/editor-preview-protocol/src/index.ts
@@ -126,6 +126,16 @@ export interface SetEffectPayload {
   phase?: SetEffectPhase;
 }
 
+/**
+ * 把动画在 time 时刻的状态写入目标，仅用于预览，不写入舞台状态。
+ * animation 为动画 JSON（v1 关键帧数组或 v2 对象），以目标的当前变换为基准状态
+ */
+export interface SeekAnimationPayload {
+  target: string;
+  animation: JsonValue;
+  time: number;
+}
+
 export interface SetFontOptimizationPayload {
   enabled: boolean;
 }
@@ -193,6 +203,7 @@ export const PREVIEW_COMMAND_PAYLOADS = definePayloadMap({
   'preview.command.set-component-visibility': payload<SetComponentVisibilityPayload>(),
   'preview.command.set-font-optimization': payload<SetFontOptimizationPayload>(),
   'preview.command.set-text-read-mode': payload<SetTextReadModePayload>(),
+  'preview.command.seek-animation': payload<SeekAnimationPayload>(),
 });
 
 export type PreviewCommandPayloadByType = typeof PREVIEW_COMMAND_PAYLOADS;
@@ -258,6 +269,16 @@ export interface RegisterPreviewRequestPayload {
   embeddedLaunchId?: string;
 }
 
+/**
+ * 独占预览：embeddedLaunchId 带有此前缀的嵌入式预览只听从指定了它的命令（见 RequestEnvelope.embeddedLaunchId），
+ * 不接收广播，它发出的事件转发给编辑器时会带上 embeddedLaunchId。用于动画编辑器等自带预览窗口的场合
+ */
+export const DEDICATED_PREVIEW_LAUNCH_ID_PREFIX = 'dedicated:';
+
+export function isDedicatedPreviewLaunchId(embeddedLaunchId: string | undefined): boolean {
+  return embeddedLaunchId?.startsWith(DEDICATED_PREVIEW_LAUNCH_ID_PREFIX) ?? false;
+}
+
 export const SESSION_REQUEST_PAYLOADS = definePayloadMap({
   [SESSION_REGISTER_PREVIEW_TYPE]: payload<RegisterPreviewRequestPayload>(),
 });
@@ -325,6 +346,8 @@ export interface EventEnvelope<TPayload = unknown, TType extends string = string
   kind: 'event';
   type: TType;
   payload: TPayload;
+  /** 事件来自哪个独占预览；来自普通预览时缺省 */
+  embeddedLaunchId?: string;
 }
 
 export interface RequestEnvelope<TPayload = unknown, TType extends string = string> {
@@ -332,6 +355,8 @@ export interface RequestEnvelope<TPayload = unknown, TType extends string = stri
   type: TType;
   requestId: string;
   payload: TPayload;
+  /** 只发给这个独占预览；缺省时广播给普通预览 */
+  embeddedLaunchId?: string;
 }
 
 export interface ResponseEnvelope<TPayload = unknown, TType extends string = string> {
diff --git a/packages/origine2/package.json b/packages/origine2/package.json
index 1ad6700ce..c9704ba7d 100644
--- a/packages/origine2/package.json
+++ b/packages/origine2/package.json
@@ -54,6 +54,7 @@
     "monaco-textmate": "^3.0.1",
     "natural-compare-lite": "^1.4.0",
     "onigasm": "^2.2.5",
+    "popmotion": "^11.0.5",
     "primereact": "^9.5.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
diff --git a/packages/origine2/src/locales/en.po b/packages/origine2/src/locales/en.po
index b5e0056b2..5ef445259 100644
--- a/packages/origine2/src/locales/en.po
+++ b/packages/origine2/src/locales/en.po
@@ -290,6 +290,12 @@ msgstr "Theme"
 msgid "亮度"
 msgstr "Brightness"
 
+msgid "仅用于预览，不会写入动画文件"
+msgstr ""
+
+msgid "从上一关键帧到此帧"
+msgstr ""
+
 msgid "从当前状态开始"
 msgstr "Start from current state"
 
@@ -545,6 +551,9 @@ msgstr "Create new game"
 msgid "删除"
 msgstr "Delete"
 
+msgid "删除关键帧"
+msgstr ""
+
 msgid "删除参数"
 msgstr "Delete argument"
 
@@ -557,6 +566,9 @@ msgstr "Delete this sentence"
 msgid "删除模板"
 msgstr "Delete template"
 
+msgid "删除此处的关键帧"
+msgstr ""
+
 msgid "删除游戏"
 msgstr "Delete game"
 
@@ -659,6 +671,9 @@ msgstr "Possible causes include a loop jump in the script, or too many lines to
 msgid "可选项"
 msgstr "Selectable options"
 
+msgid "右"
+msgstr ""
+
 msgid "右侧"
 msgstr "Right"
 
@@ -701,6 +716,9 @@ msgstr "Enable video skipping"
 msgid "唇形同步与眨眼"
 msgstr "Lip sync and blinking"
 
+msgid "回到开头"
+msgstr ""
+
 msgid "回收站"
 msgstr "Trash"
 
@@ -749,6 +767,9 @@ msgstr "Open in File Explorer"
 msgid "在新标签页中预览"
 msgstr "Preview in new tab"
 
+msgid "在此处添加关键帧"
+msgstr ""
+
 msgid "在游戏中显示当前变量"
 msgstr "Display current variables in game"
 
@@ -953,6 +974,9 @@ msgstr "Show locked nodes"
 msgid "属性"
 msgstr "Property"
 
+msgid "左"
+msgstr ""
+
 msgid "左侧"
 msgstr "Left"
 
@@ -998,6 +1022,9 @@ msgstr "Read text inner layer"
 msgid "已读文本外层"
 msgstr "Read text outer layer"
 
+msgid "帧继承"
+msgstr ""
+
 msgid "帮助"
 msgstr "Help"
 
@@ -1037,6 +1064,12 @@ msgstr "Delay time (seconds)"
 msgid "开启"
 msgstr "On"
 
+msgid "开启时，关键帧中的值基于对象当前的状态计算，例如位置、旋转为相加，缩放为相乘；关闭时均为绝对值。可在属性的菜单中修改计算方式。"
+msgstr ""
+
+msgid "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。"
+msgstr ""
+
 msgid "开始"
 msgstr "Start"
 
@@ -1073,6 +1106,9 @@ msgstr "The current environment does not support the system folder picker. Enter
 msgid "当前预览变量"
 msgstr "Current preview variables"
 
+msgid "循环播放"
+msgstr ""
+
 msgid "德语"
 msgstr "German"
 
@@ -1202,6 +1238,9 @@ msgstr "Prompt button text"
 msgid "搜索选项"
 msgstr "Search options"
 
+msgid "播放"
+msgstr ""
+
 msgid "播放一小段视频"
 msgstr "Play a short video"
 
@@ -1253,6 +1292,9 @@ msgstr "Sound effect playback status"
 msgid "效果音文件"
 msgstr "Sound effect file"
 
+msgid "文件内容不是有效的 v2 动画，请在脚本编辑器中修改"
+msgstr ""
+
 msgid "文件名"
 msgstr "File name"
 
@@ -1421,12 +1463,18 @@ msgstr "General dialogue"
 msgid "普通对话，显示角色名"
 msgstr "Normal dialogue, role name shown"
 
+msgid "暂停"
+msgstr ""
+
 msgid "暂无变量快照"
 msgstr "No variable snapshot"
 
 msgid "暂无调试变量，点击“新增变量”创建。"
 msgstr "No debug variables. Click \"Add variable\" to create one."
 
+msgid "更多"
+msgstr ""
+
 msgid "更多设置"
 msgstr "More settings"
 
@@ -1682,6 +1730,9 @@ msgstr "Add node"
 msgid "添加语句"
 msgstr "Add statement"
 
+msgid "清除"
+msgstr ""
+
 msgid "清除当前舞台的特殊效果"
 msgstr "Clear special effects of current stage"
 
@@ -1796,9 +1847,21 @@ msgstr "Target ID"
 msgid "目标行"
 msgstr "Target line"
 
+msgid "相乘"
+msgstr ""
+
+msgid "相乘（基准为 0 时视为 1）"
+msgstr ""
+
+msgid "相加"
+msgstr ""
+
 msgid "相对"
 msgstr "Relative"
 
+msgid "相对动画"
+msgstr ""
+
 msgid "眨眼"
 msgstr "Blink"
 
@@ -1850,6 +1913,9 @@ msgstr "Disabled"
 msgid "移动到回收站失败"
 msgstr "Failed to move to Trash"
 
+msgid "移除属性"
+msgstr ""
+
 msgid "立即注视"
 msgstr "Focus instantly"
 
@@ -1925,6 +1991,9 @@ msgstr "End game"
 msgid "绝对"
 msgstr "Absolutely"
 
+msgid "绝对值"
+msgstr ""
+
 msgid "继续游戏按钮"
 msgstr "Continue button"
 
@@ -1940,6 +2009,9 @@ msgstr "Ease in out"
 msgid "缓出"
 msgstr "Ease out"
 
+msgid "缓动"
+msgstr ""
+
 msgid "缓动类型"
 msgstr "Ease type"
 
@@ -1967,6 +2039,9 @@ msgstr "Traditional Chinese"
 msgid "缩放"
 msgstr "Scale"
 
+msgid "缩放（Ctrl + 滚轮）"
+msgstr ""
+
 msgid "网格视图"
 msgstr "Grid view"
 
@@ -2123,6 +2198,9 @@ msgstr "Name of unlocked CG or BGM"
 msgid "解锁鉴赏类型"
 msgstr "Unlock appreciation type"
 
+msgid "计算方式"
+msgstr ""
+
 msgid "设置"
 msgstr "Settings"
 
@@ -2507,6 +2585,9 @@ msgstr "Preview"
 msgid "预览图标"
 msgstr "Preview icon"
 
+msgid "预览对象"
+msgstr ""
+
 msgid "预览窗口"
 msgstr "Preview window"
 
@@ -2531,6 +2612,9 @@ msgstr "Default"
 msgid "默认 default"
 msgstr "Default: default"
 
+msgid "默认（{0}）"
+msgstr ""
+
 msgid "默认值"
 msgstr "Default value"
 
diff --git a/packages/origine2/src/locales/ja.po b/packages/origine2/src/locales/ja.po
index 75f798361..909f4440c 100644
--- a/packages/origine2/src/locales/ja.po
+++ b/packages/origine2/src/locales/ja.po
@@ -290,6 +290,12 @@ msgstr "テーマ"
 msgid "亮度"
 msgstr "輝度"
 
+msgid "仅用于预览，不会写入动画文件"
+msgstr ""
+
+msgid "从上一关键帧到此帧"
+msgstr ""
+
 msgid "从当前状态开始"
 msgstr "現在の状態から開始"
 
@@ -545,6 +551,9 @@ msgstr "新しいゲームを作成"
 msgid "删除"
 msgstr "削除"
 
+msgid "删除关键帧"
+msgstr ""
+
 msgid "删除参数"
 msgstr "引数を削除"
 
@@ -557,6 +566,9 @@ msgstr "この文を削除"
 msgid "删除模板"
 msgstr "テンプレートを削除"
 
+msgid "删除此处的关键帧"
+msgstr ""
+
 msgid "删除游戏"
 msgstr "ゲームを削除"
 
@@ -659,6 +671,9 @@ msgstr "スクリプト内のループジャンプ、または対象行までの
 msgid "可选项"
 msgstr "選択可能な選択肢"
 
+msgid "右"
+msgstr ""
+
 msgid "右侧"
 msgstr "右"
 
@@ -701,6 +716,9 @@ msgstr "動画のスキップを有効にする"
 msgid "唇形同步与眨眼"
 msgstr "口パクとまばたき"
 
+msgid "回到开头"
+msgstr ""
+
 msgid "回收站"
 msgstr "ゴミ箱"
 
@@ -749,6 +767,9 @@ msgstr "ファイルエクスプローラーで開く"
 msgid "在新标签页中预览"
 msgstr "新しいタブでプレビュー"
 
+msgid "在此处添加关键帧"
+msgstr ""
+
 msgid "在游戏中显示当前变量"
 msgstr "ゲーム内に現在の変数を表示"
 
@@ -953,6 +974,9 @@ msgstr "未解放ノードを表示"
 msgid "属性"
 msgstr "プロパティ"
 
+msgid "左"
+msgstr ""
+
 msgid "左侧"
 msgstr "左"
 
@@ -998,6 +1022,9 @@ msgstr "既読テキスト内側"
 msgid "已读文本外层"
 msgstr "既読テキスト外側"
 
+msgid "帧继承"
+msgstr ""
+
 msgid "帮助"
 msgstr "ヘルプ"
 
@@ -1037,6 +1064,12 @@ msgstr "遅延時間（秒）"
 msgid "开启"
 msgstr "有効化"
 
+msgid "开启时，关键帧中的值基于对象当前的状态计算，例如位置、旋转为相加，缩放为相乘；关闭时均为绝对值。可在属性的菜单中修改计算方式。"
+msgstr ""
+
+msgid "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。"
+msgstr ""
+
 msgid "开始"
 msgstr "開始"
 
@@ -1073,6 +1106,9 @@ msgstr "現在の環境ではシステムのフォルダー選択を使用でき
 msgid "当前预览变量"
 msgstr "現在のプレビュー変数"
 
+msgid "循环播放"
+msgstr ""
+
 msgid "德语"
 msgstr "ドイツ語"
 
@@ -1202,6 +1238,9 @@ msgstr "提示ボタンのテキスト"
 msgid "搜索选项"
 msgstr "検索オプション"
 
+msgid "播放"
+msgstr ""
+
 msgid "播放一小段视频"
 msgstr "動画ファイルを再生する"
 
@@ -1253,6 +1292,9 @@ msgstr "効果音再生状態"
 msgid "效果音文件"
 msgstr "効果音ファイル"
 
+msgid "文件内容不是有效的 v2 动画，请在脚本编辑器中修改"
+msgstr ""
+
 msgid "文件名"
 msgstr "ファイル名"
 
@@ -1421,12 +1463,18 @@ msgstr "ダイアログ"
 msgid "普通对话，显示角色名"
 msgstr "通常の会話、キャラクター名を表示"
 
+msgid "暂停"
+msgstr ""
+
 msgid "暂无变量快照"
 msgstr "変数スナップショットはありません"
 
 msgid "暂无调试变量，点击“新增变量”创建。"
 msgstr "デバッグ変数はありません。「変数を追加」をクリックして作成してください。"
 
+msgid "更多"
+msgstr ""
+
 msgid "更多设置"
 msgstr "その他の設定"
 
@@ -1682,6 +1730,9 @@ msgstr "ノードを追加"
 msgid "添加语句"
 msgstr "ステートメントを追加"
 
+msgid "清除"
+msgstr ""
+
 msgid "清除当前舞台的特殊效果"
 msgstr "現在のステージの特殊効果をクリア"
 
@@ -1796,9 +1847,21 @@ msgstr "対象 ID"
 msgid "目标行"
 msgstr "対象行"
 
+msgid "相乘"
+msgstr ""
+
+msgid "相乘（基准为 0 时视为 1）"
+msgstr ""
+
+msgid "相加"
+msgstr ""
+
 msgid "相对"
 msgstr "相対"
 
+msgid "相对动画"
+msgstr ""
+
 msgid "眨眼"
 msgstr "瞬き"
 
@@ -1850,6 +1913,9 @@ msgstr "無効化"
 msgid "移动到回收站失败"
 msgstr "ゴミ箱への移動に失敗しました"
 
+msgid "移除属性"
+msgstr ""
+
 msgid "立即注视"
 msgstr "即座に注視"
 
@@ -1925,6 +1991,9 @@ msgstr "ゲーム終了"
 msgid "绝对"
 msgstr "絶対"
 
+msgid "绝对值"
+msgstr ""
+
 msgid "继续游戏按钮"
 msgstr "「続きから」ボタン"
 
@@ -1940,6 +2009,9 @@ msgstr "イーズインアウト"
 msgid "缓出"
 msgstr "イーズアウト"
 
+msgid "缓动"
+msgstr ""
+
 msgid "缓动类型"
 msgstr "イージングタイプ"
 
@@ -1967,6 +2039,9 @@ msgstr "繁体字中国語"
 msgid "缩放"
 msgstr "スケール"
 
+msgid "缩放（Ctrl + 滚轮）"
+msgstr ""
+
 msgid "网格视图"
 msgstr "グリッドビュー"
 
@@ -2123,6 +2198,9 @@ msgstr "CG/BGMの名前"
 msgid "解锁鉴赏类型"
 msgstr "タイプ"
 
+msgid "计算方式"
+msgstr ""
+
 msgid "设置"
 msgstr "設定"
 
@@ -2507,6 +2585,9 @@ msgstr "プレビュー"
 msgid "预览图标"
 msgstr "プレビューアイコン"
 
+msgid "预览对象"
+msgstr ""
+
 msgid "预览窗口"
 msgstr "プレビューウィンドウ"
 
@@ -2531,6 +2612,9 @@ msgstr "デフォルト"
 msgid "默认 default"
 msgstr "既定値 default"
 
+msgid "默认（{0}）"
+msgstr ""
+
 msgid "默认值"
 msgstr "デフォルト値"
 
diff --git a/packages/origine2/src/locales/ko.po b/packages/origine2/src/locales/ko.po
index ad3c66c67..d857d6769 100644
--- a/packages/origine2/src/locales/ko.po
+++ b/packages/origine2/src/locales/ko.po
@@ -290,6 +290,12 @@ msgstr "테마"
 msgid "亮度"
 msgstr "밝기"
 
+msgid "仅用于预览，不会写入动画文件"
+msgstr ""
+
+msgid "从上一关键帧到此帧"
+msgstr ""
+
 msgid "从当前状态开始"
 msgstr "현재 상태에서 시작"
 
@@ -545,6 +551,9 @@ msgstr "새 게임 생성"
 msgid "删除"
 msgstr "삭제"
 
+msgid "删除关键帧"
+msgstr ""
+
 msgid "删除参数"
 msgstr "인자 삭제"
 
@@ -557,6 +566,9 @@ msgstr "현재 문장 삭제"
 msgid "删除模板"
 msgstr "템플릿 삭제"
 
+msgid "删除此处的关键帧"
+msgstr ""
+
 msgid "删除游戏"
 msgstr "게임 삭제"
 
@@ -659,6 +671,9 @@ msgstr "스크립트 간에 무한 루프가 있거나 대상 줄 이전에 빨
 msgid "可选项"
 msgstr "선택 가능 항목"
 
+msgid "右"
+msgstr ""
+
 msgid "右侧"
 msgstr "우측"
 
@@ -701,6 +716,9 @@ msgstr "비디오 건너뛰기 활성화"
 msgid "唇形同步与眨眼"
 msgstr "립싱크 및 눈 깜박임"
 
+msgid "回到开头"
+msgstr ""
+
 msgid "回收站"
 msgstr "휴지통"
 
@@ -749,6 +767,9 @@ msgstr "파일 탐색기에서 열기"
 msgid "在新标签页中预览"
 msgstr "새 탭에서 미리보기"
 
+msgid "在此处添加关键帧"
+msgstr ""
+
 msgid "在游戏中显示当前变量"
 msgstr "게임 내에서 현재 변수 표시"
 
@@ -953,6 +974,9 @@ msgstr "잠금 해제되지 않은 노드 표시"
 msgid "属性"
 msgstr "속성"
 
+msgid "左"
+msgstr ""
+
 msgid "左侧"
 msgstr "왼쪽"
 
@@ -998,6 +1022,9 @@ msgstr "읽은 텍스트 내부"
 msgid "已读文本外层"
 msgstr "읽은 텍스트 외부"
 
+msgid "帧继承"
+msgstr ""
+
 msgid "帮助"
 msgstr "도움말"
 
@@ -1037,6 +1064,12 @@ msgstr "지연 시간(초)"
 msgid "开启"
 msgstr "켜기"
 
+msgid "开启时，关键帧中的值基于对象当前的状态计算，例如位置、旋转为相加，缩放为相乘；关闭时均为绝对值。可在属性的菜单中修改计算方式。"
+msgstr ""
+
+msgid "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。"
+msgstr ""
+
 msgid "开始"
 msgstr "시작"
 
@@ -1073,6 +1106,9 @@ msgstr "현재 환경은 시스템 파일 탐색기를 지원하지 않습니다
 msgid "当前预览变量"
 msgstr "현재 미리보기 변수"
 
+msgid "循环播放"
+msgstr ""
+
 msgid "德语"
 msgstr "독일어"
 
@@ -1202,6 +1238,9 @@ msgstr "힌트 버튼 텍스트"
 msgid "搜索选项"
 msgstr "옵션 검색"
 
+msgid "播放"
+msgstr ""
+
 msgid "播放一小段视频"
 msgstr "비디오 클립 재생"
 
@@ -1253,6 +1292,9 @@ msgstr "효과음 재생 상태"
 msgid "效果音文件"
 msgstr "효과음 파일"
 
+msgid "文件内容不是有效的 v2 动画，请在脚本编辑器中修改"
+msgstr ""
+
 msgid "文件名"
 msgstr "파일 이름"
 
@@ -1421,12 +1463,18 @@ msgstr "일반 대화"
 msgid "普通对话，显示角色名"
 msgstr "일반 대화, 캐릭터 이름 표시"
 
+msgid "暂停"
+msgstr ""
+
 msgid "暂无变量快照"
 msgstr "변수 스냅샷 없음"
 
 msgid "暂无调试变量，点击“新增变量”创建。"
 msgstr "디버그 변수가 없습니다. “변수 추가”를 클릭하여 생성하세요."
 
+msgid "更多"
+msgstr ""
+
 msgid "更多设置"
 msgstr "추가 설정"
 
@@ -1682,6 +1730,9 @@ msgstr "노드 추가"
 msgid "添加语句"
 msgstr "문장 추가"
 
+msgid "清除"
+msgstr ""
+
 msgid "清除当前舞台的特殊效果"
 msgstr "현재 스테이지의 이펙트 초기화"
 
@@ -1796,9 +1847,21 @@ msgstr "대상 ID"
 msgid "目标行"
 msgstr "대상 줄"
 
+msgid "相乘"
+msgstr ""
+
+msgid "相乘（基准为 0 时视为 1）"
+msgstr ""
+
+msgid "相加"
+msgstr ""
+
 msgid "相对"
 msgstr "상대적"
 
+msgid "相对动画"
+msgstr ""
+
 msgid "眨眼"
 msgstr "눈 깜박임"
 
@@ -1850,6 +1913,9 @@ msgstr "비활성화"
 msgid "移动到回收站失败"
 msgstr "휴지통으로 이동하지 못했습니다"
 
+msgid "移除属性"
+msgstr ""
+
 msgid "立即注视"
 msgstr "즉시 주시"
 
@@ -1925,6 +1991,9 @@ msgstr "게임 종료"
 msgid "绝对"
 msgstr "절대적"
 
+msgid "绝对值"
+msgstr ""
+
 msgid "继续游戏按钮"
 msgstr "이어하기 버튼"
 
@@ -1940,6 +2009,9 @@ msgstr "이즈 인 아웃"
 msgid "缓出"
 msgstr "이즈 아웃"
 
+msgid "缓动"
+msgstr ""
+
 msgid "缓动类型"
 msgstr "이징 유형"
 
@@ -1967,6 +2039,9 @@ msgstr "중국어 번체"
 msgid "缩放"
 msgstr "축소/확대"
 
+msgid "缩放（Ctrl + 滚轮）"
+msgstr ""
+
 msgid "网格视图"
 msgstr "그리드 보기"
 
@@ -2123,6 +2198,9 @@ msgstr "해금된 CG 또는 BGM 이름"
 msgid "解锁鉴赏类型"
 msgstr "해금 갤러리 유형"
 
+msgid "计算方式"
+msgstr ""
+
 msgid "设置"
 msgstr "설정"
 
@@ -2507,6 +2585,9 @@ msgstr "미리보기"
 msgid "预览图标"
 msgstr "미리보기 아이콘"
 
+msgid "预览对象"
+msgstr ""
+
 msgid "预览窗口"
 msgstr "미리보기 창"
 
@@ -2531,6 +2612,9 @@ msgstr "기본값"
 msgid "默认 default"
 msgstr "기본값 default"
 
+msgid "默认（{0}）"
+msgstr ""
+
 msgid "默认值"
 msgstr "기본값"
 
diff --git a/packages/origine2/src/locales/zhCn.po b/packages/origine2/src/locales/zhCn.po
index 42d41da97..a45b72982 100644
--- a/packages/origine2/src/locales/zhCn.po
+++ b/packages/origine2/src/locales/zhCn.po
@@ -290,6 +290,12 @@ msgstr "主题"
 msgid "亮度"
 msgstr "亮度"
 
+msgid "仅用于预览，不会写入动画文件"
+msgstr "仅用于预览，不会写入动画文件"
+
+msgid "从上一关键帧到此帧"
+msgstr "从上一关键帧到此帧"
+
 msgid "从当前状态开始"
 msgstr "从当前状态开始"
 
@@ -545,6 +551,9 @@ msgstr "创建新游戏"
 msgid "删除"
 msgstr "删除"
 
+msgid "删除关键帧"
+msgstr "删除关键帧"
+
 msgid "删除参数"
 msgstr "删除参数"
 
@@ -557,6 +566,9 @@ msgstr "删除本句"
 msgid "删除模板"
 msgstr "删除模板"
 
+msgid "删除此处的关键帧"
+msgstr "删除此处的关键帧"
+
 msgid "删除游戏"
 msgstr "删除游戏"
 
@@ -659,6 +671,9 @@ msgstr "可能原因是脚本中存在循环跳转，或者目标行之前需要
 msgid "可选项"
 msgstr "可选项"
 
+msgid "右"
+msgstr "右"
+
 msgid "右侧"
 msgstr "右侧"
 
@@ -701,6 +716,9 @@ msgstr "启用视频跳过"
 msgid "唇形同步与眨眼"
 msgstr "唇形同步与眨眼"
 
+msgid "回到开头"
+msgstr "回到开头"
+
 msgid "回收站"
 msgstr "回收站"
 
@@ -749,6 +767,9 @@ msgstr "在文件管理器中打开"
 msgid "在新标签页中预览"
 msgstr "在新标签页中预览"
 
+msgid "在此处添加关键帧"
+msgstr "在此处添加关键帧"
+
 msgid "在游戏中显示当前变量"
 msgstr "在游戏中显示当前变量"
 
@@ -953,6 +974,9 @@ msgstr "展示未解锁节点"
 msgid "属性"
 msgstr "属性"
 
+msgid "左"
+msgstr "左"
+
 msgid "左侧"
 msgstr "左侧"
 
@@ -998,6 +1022,9 @@ msgstr "已读文本内层"
 msgid "已读文本外层"
 msgstr "已读文本外层"
 
+msgid "帧继承"
+msgstr "帧继承"
+
 msgid "帮助"
 msgstr "帮助"
 
@@ -1037,6 +1064,12 @@ msgstr "延迟时间（秒）"
 msgid "开启"
 msgstr "开启"
 
+msgid "开启时，关键帧中的值基于对象当前的状态计算，例如位置、旋转为相加，缩放为相乘；关闭时均为绝对值。可在属性的菜单中修改计算方式。"
+msgstr "开启时，关键帧中的值基于对象当前的状态计算，例如位置、旋转为相加，缩放为相乘；关闭时均为绝对值。可在属性的菜单中修改计算方式。"
+
+msgid "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。"
+msgstr "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。"
+
 msgid "开始"
 msgstr "开始"
 
@@ -1073,6 +1106,9 @@ msgstr "当前环境不支持系统文件夹选择器，请手动输入路径。
 msgid "当前预览变量"
 msgstr "当前预览变量"
 
+msgid "循环播放"
+msgstr "循环播放"
+
 msgid "德语"
 msgstr "德语"
 
@@ -1202,6 +1238,9 @@ msgstr "提示按钮文本"
 msgid "搜索选项"
 msgstr "搜索选项"
 
+msgid "播放"
+msgstr "播放"
+
 msgid "播放一小段视频"
 msgstr "播放一小段视频"
 
@@ -1253,6 +1292,9 @@ msgstr "效果音播放状态"
 msgid "效果音文件"
 msgstr "效果音文件"
 
+msgid "文件内容不是有效的 v2 动画，请在脚本编辑器中修改"
+msgstr "文件内容不是有效的 v2 动画，请在脚本编辑器中修改"
+
 msgid "文件名"
 msgstr "文件名"
 
@@ -1421,12 +1463,18 @@ msgstr "普通对话"
 msgid "普通对话，显示角色名"
 msgstr "普通对话，显示角色名"
 
+msgid "暂停"
+msgstr "暂停"
+
 msgid "暂无变量快照"
 msgstr "暂无变量快照"
 
 msgid "暂无调试变量，点击“新增变量”创建。"
 msgstr "暂无调试变量，点击“新增变量”创建。"
 
+msgid "更多"
+msgstr "更多"
+
 msgid "更多设置"
 msgstr "更多设置"
 
@@ -1682,6 +1730,9 @@ msgstr "添加节点"
 msgid "添加语句"
 msgstr "添加语句"
 
+msgid "清除"
+msgstr "清除"
+
 msgid "清除当前舞台的特殊效果"
 msgstr "清除当前舞台的特殊效果"
 
@@ -1796,9 +1847,21 @@ msgstr "目标 ID"
 msgid "目标行"
 msgstr "目标行"
 
+msgid "相乘"
+msgstr "相乘"
+
+msgid "相乘（基准为 0 时视为 1）"
+msgstr "相乘（基准为 0 时视为 1）"
+
+msgid "相加"
+msgstr "相加"
+
 msgid "相对"
 msgstr "相对"
 
+msgid "相对动画"
+msgstr "相对动画"
+
 msgid "眨眼"
 msgstr "眨眼"
 
@@ -1850,6 +1913,9 @@ msgstr "禁用"
 msgid "移动到回收站失败"
 msgstr "移动到回收站失败"
 
+msgid "移除属性"
+msgstr "移除属性"
+
 msgid "立即注视"
 msgstr "立即注视"
 
@@ -1925,6 +1991,9 @@ msgstr "结束游戏"
 msgid "绝对"
 msgstr "绝对"
 
+msgid "绝对值"
+msgstr "绝对值"
+
 msgid "继续游戏按钮"
 msgstr "继续游戏按钮"
 
@@ -1940,6 +2009,9 @@ msgstr "缓入缓出"
 msgid "缓出"
 msgstr "缓出"
 
+msgid "缓动"
+msgstr "缓动"
+
 msgid "缓动类型"
 msgstr "缓动类型"
 
@@ -1967,6 +2039,9 @@ msgstr "繁体中文"
 msgid "缩放"
 msgstr "缩放"
 
+msgid "缩放（Ctrl + 滚轮）"
+msgstr "缩放（Ctrl + 滚轮）"
+
 msgid "网格视图"
 msgstr "网格视图"
 
@@ -2123,6 +2198,9 @@ msgstr "解锁的 CG 或 BGM 名称"
 msgid "解锁鉴赏类型"
 msgstr "解锁鉴赏类型"
 
+msgid "计算方式"
+msgstr "计算方式"
+
 msgid "设置"
 msgstr "设置"
 
@@ -2507,6 +2585,9 @@ msgstr "预览"
 msgid "预览图标"
 msgstr "预览图标"
 
+msgid "预览对象"
+msgstr "预览对象"
+
 msgid "预览窗口"
 msgstr "预览窗口"
 
@@ -2531,6 +2612,9 @@ msgstr "默认"
 msgid "默认 default"
 msgstr "默认 default"
 
+msgid "默认（{0}）"
+msgstr "默认（{0}）"
+
 msgid "默认值"
 msgstr "默认值"
 
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/AnimationEditor.tsx b/packages/origine2/src/pages/editor/AnimationEditor/AnimationEditor.tsx
new file mode 100644
index 000000000..ea0b8b73c
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/AnimationEditor.tsx
@@ -0,0 +1,54 @@
+import { useMemo, useState } from 'react';
+import type { JsonValue } from '@webgal/editor-preview-protocol';
+import { ResizableSplit } from './components/ResizableSplit';
+import { toAnimationObject } from './model/animationDocument';
+import { useAnimationDocument } from './model/useAnimationDocument';
+import { AnimationPreview } from './preview/AnimationPreview';
+import { usePreviewSettings } from './preview/previewSettings';
+import { AnimationSettingsPanel } from './settings/AnimationSettingsPanel';
+import { AnimationTimeline } from './timeline/AnimationTimeline';
+
+interface IAnimationEditorProps {
+  url: string;
+  initialText: string;
+}
+
+/**
+ * Animation v2 的图形编辑器。
+ * 上半部分左为预览、右为与时间轴无关的设置，下半部分为时间轴，区域之间的分割线可拖动
+ */
+export function AnimationEditor({ url, initialText }: IAnimationEditorProps) {
+  const { doc, updateTracks, updateFields } = useAnimationDocument(url, initialText);
+  const [previewSettings, updatePreviewSettings] = usePreviewSettings();
+  /** 播放头时刻（毫秒） */
+  const [time, setTime] = useState(0);
+  // 动画对象由 JSON 解析而来，必定可以序列化
+  const animation = useMemo(() => toAnimationObject(doc) as JsonValue, [doc]);
+
+  const preview = <AnimationPreview animation={animation} time={time} settings={previewSettings} />;
+  const settings = (
+    <AnimationSettingsPanel
+      fields={doc.fields}
+      updateFields={updateFields}
+      preview={previewSettings}
+      onPreviewChange={updatePreviewSettings}
+    />
+  );
+
+  return (
+    <ResizableSplit
+      direction="vertical"
+      storageKey="animation-editor-timeline-split"
+      first={<ResizableSplit direction="horizontal" storageKey="animation-editor-preview-split" first={preview} second={settings} />}
+      second={
+        <AnimationTimeline
+          doc={doc}
+          updateTracks={updateTracks}
+          updateFields={updateFields}
+          time={time}
+          onTimeChange={setTime}
+        />
+      }
+    />
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/AnimationFileEditor.tsx b/packages/origine2/src/pages/editor/AnimationEditor/AnimationFileEditor.tsx
new file mode 100644
index 000000000..a13233979
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/AnimationFileEditor.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { t } from '@lingui/macro';
+import { useGameEditorContext } from '@/store/useGameEditorStore';
+import EditorToolbar from '@/pages/editor/MainArea/EditorToolbar';
+import {
+  JsonResourceDisplay,
+  useJsonFileText,
+} from '@/pages/editor/ResourceDisplay/JsonResourceDisplay/JsonResourceDisplay';
+import { AnimationEditor } from './AnimationEditor';
+import { isEditableAnimation } from './model/animationDocument';
+import styles from './animationFileEditor.module.scss';
+
+/**
+ * 打开 JSON 文件：v2 动画可以在图形编辑器与脚本编辑器之间切换，其他 JSON 只用脚本编辑器
+ */
+export function AnimationFileEditor({ url }: { url: string }) {
+  const { data } = useJsonFileText(url);
+  const isCodeMode = useGameEditorContext((state) => state.isCodeMode);
+  const isInAnimationDir = url.includes('/game/animation/');
+  /**
+   * 打开时是否为 v2 动画。之后即使在脚本编辑器中暂时改坏了内容，也保留切换按钮，
+   * 避免按钮随输入闪烁、代码编辑器被重新创建
+   */
+  const [isAnimationFile, setIsAnimationFile] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    if (data !== undefined) setIsAnimationFile((prev) => prev ?? isEditableAnimation(data, isInAnimationDir));
+  }, [data, isInAnimationDir]);
+
+  if (data === undefined || isAnimationFile === null) return null;
+
+  const getEditor = () => {
+    if (!isAnimationFile || isCodeMode) return <JsonResourceDisplay url={url} />;
+    if (!isEditableAnimation(data, isInAnimationDir)) {
+      return <div className={styles.invalid}>{t`文件内容不是有效的 v2 动画，请在脚本编辑器中修改`}</div>;
+    }
+    return <AnimationEditor url={url} initialText={data} />;
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.editor}>{getEditor()}</div>
+      {isAnimationFile && <EditorToolbar showSceneInfo={false} />}
+    </div>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/animationFileEditor.module.scss b/packages/origine2/src/pages/editor/AnimationEditor/animationFileEditor.module.scss
new file mode 100644
index 000000000..da08a9908
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/animationFileEditor.module.scss
@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.editor {
+  flex: 1;
+  min-height: 0;
+}
+
+.invalid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-sub);
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/components/InfoTip.tsx b/packages/origine2/src/pages/editor/AnimationEditor/components/InfoTip.tsx
new file mode 100644
index 000000000..84b3f91b4
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/components/InfoTip.tsx
@@ -0,0 +1,16 @@
+import { Tooltip } from '@fluentui/react-components';
+import { InfoRegular } from '@fluentui/react-icons';
+import styles from './infoTip.module.scss';
+
+/**
+ * 需要解释的地方只放一个 info 图标，说明放在 tooltip 里
+ */
+export function InfoTip({ content }: { content: string }) {
+  return (
+    <Tooltip content={content} relationship="description" withArrow>
+      <span className={styles.infoTip} tabIndex={0}>
+        <InfoRegular />
+      </span>
+    </Tooltip>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/components/ResizableSplit.tsx b/packages/origine2/src/pages/editor/AnimationEditor/components/ResizableSplit.tsx
new file mode 100644
index 000000000..66a7637d2
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/components/ResizableSplit.tsx
@@ -0,0 +1,55 @@
+import { PointerEvent, ReactNode, useRef, useState } from 'react';
+import styles from './resizableSplit.module.scss';
+
+interface IResizableSplitProps {
+  /** horizontal：左右排列；vertical：上下排列 */
+  direction: 'horizontal' | 'vertical';
+  /** 用于在 localStorage 中记住分割位置 */
+  storageKey: string;
+  first: ReactNode;
+  second: ReactNode;
+}
+
+const MIN_RATIO = 0.15;
+const MAX_RATIO = 0.85;
+
+/**
+ * 两个区域加一条可拖动的分割线，分割位置按比例记住
+ */
+export function ResizableSplit({ direction, storageKey, first, second }: IResizableSplitProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [ratio, setRatio] = useState(() => Number(localStorage.getItem(storageKey)) || 0.5);
+  const [isDragging, setIsDragging] = useState(false);
+  const isHorizontal = direction === 'horizontal';
+
+  // 拖动时捕获指针，即使经过预览 iframe 也能持续收到移动事件
+  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setIsDragging(true);
+  };
+
+  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!isDragging || !rect) return;
+    const offset = isHorizontal ? (event.clientX - rect.left) / rect.width : (event.clientY - rect.top) / rect.height;
+    setRatio(Math.min(MAX_RATIO, Math.max(MIN_RATIO, offset)));
+  };
+
+  const handlePointerUp = () => {
+    setIsDragging(false);
+    localStorage.setItem(storageKey, ratio.toString());
+  };
+
+  return (
+    <div ref={containerRef} className={`${styles.split} ${isHorizontal ? styles.horizontal : styles.vertical}`}>
+      <div className={styles.pane} style={{ flexBasis: `${ratio * 100}%` }}>{first}</div>
+      <div
+        className={`${styles.divider} ${isDragging ? styles.dragging : ''}`}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+      />
+      <div className={`${styles.pane} ${styles.rest}`}>{second}</div>
+    </div>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/components/infoTip.module.scss b/packages/origine2/src/pages/editor/AnimationEditor/components/infoTip.module.scss
new file mode 100644
index 000000000..b32729f12
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/components/infoTip.module.scss
@@ -0,0 +1,13 @@
+.infoTip {
+  display: inline-flex;
+  align-items: center;
+  color: var(--text-weak);
+  font-size: 14px;
+  cursor: help;
+  outline: none;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--primary);
+  }
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/components/resizableSplit.module.scss b/packages/origine2/src/pages/editor/AnimationEditor/components/resizableSplit.module.scss
new file mode 100644
index 000000000..281fa91a6
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/components/resizableSplit.module.scss
@@ -0,0 +1,64 @@
+.split {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.horizontal {
+  flex-direction: row;
+}
+
+.vertical {
+  flex-direction: column;
+}
+
+.pane {
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.rest {
+  flex: 1;
+}
+
+// 看上去是一条细线，可拖动的范围更宽一些
+.divider {
+  position: relative;
+  flex: none;
+  background: var(--bg-divider);
+  z-index: 1;
+
+  &::before {
+    content: '';
+    position: absolute;
+  }
+
+  &:hover,
+  &.dragging {
+    background: var(--primary);
+  }
+}
+
+// 热区只在拖动方向上加宽，另一方向不能超出分割线，否则会撑出外层的滚动条
+.horizontal > .divider {
+  width: 1px;
+  cursor: col-resize;
+
+  &::before {
+    inset: 0 -3px;
+  }
+}
+
+.vertical > .divider {
+  height: 1px;
+  cursor: row-resize;
+
+  &::before {
+    inset: -3px 0;
+  }
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/model/animationDocument.ts b/packages/origine2/src/pages/editor/AnimationEditor/model/animationDocument.ts
new file mode 100644
index 000000000..45aa70679
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/model/animationDocument.ts
@@ -0,0 +1,137 @@
+/**
+ * @file 动画文件（Animation v2）与编辑器模型之间的转换。
+ *
+ * 文件中的关键帧是一个数组，每帧的 duration 是距上一帧的时长，一帧可以同时指定多个属性；
+ * 编辑器按属性拆成轨道，每个关键点记录距动画开始的绝对时间，便于在时间轴上逐属性编辑。
+ * 格式说明见 WebGAL 仓库的 dev-docs/Animation v2.md
+ */
+import set from 'lodash/set';
+import { createId } from '@/utils/createId';
+
+export const DEFAULT_EASE = 'easeInOut';
+
+export interface IKeyPoint {
+  id: string;
+  /** 距动画开始的时间（毫秒） */
+  time: number;
+  value: number;
+  /** 从上一关键点到达本点所用的缓动 */
+  ease: string;
+}
+
+export interface ITrack {
+  /** 属性路径，如 'alpha'、'position.x' */
+  path: string;
+  /** 按时间先后排列；时间相同的关键点构成跳变 */
+  points: IKeyPoint[];
+}
+
+export interface IAnimationDocument {
+  /** 关键帧以外的顶层字段，原样保留（version、relative、inherit、relativeCalc 等） */
+  fields: Record<string, unknown>;
+  /** 时间轴上显示的轨道；没有关键点的轨道只用于显示，不会写入文件 */
+  tracks: ITrack[];
+}
+
+type AnimationObject = Record<string, unknown> & { keyframes: unknown[] };
+
+/** 新建的动画默认显示的属性 */
+const DEFAULT_TRACK_PATHS = ['position.x', 'position.y', 'scale.x', 'scale.y', 'alpha'];
+
+/**
+ * 是否可用图形编辑器编辑：v2 动画，或者 animation 目录下的空文件（新建的动画）。
+ * v1 动画（顶层为关键帧数组）以及其他 JSON 都不算
+ */
+export function isEditableAnimation(text: string, isInAnimationDir: boolean): boolean {
+  if (text.trim() === '') return isInAnimationDir;
+  const animation = tryParse(text);
+  return animation !== null && (animation.version === undefined || animation.version === 2);
+}
+
+export function parseAnimation(text: string): IAnimationDocument {
+  const { keyframes, ...fields } = tryParse(text) ?? { version: 2, keyframes: [] };
+  const tracks = framesToTracks(keyframes);
+  return {
+    fields,
+    tracks: tracks.length > 0 ? tracks : DEFAULT_TRACK_PATHS.map((path) => ({ path, points: [] })),
+  };
+}
+
+export function serializeAnimation(doc: IAnimationDocument): string {
+  return JSON.stringify(toAnimationObject(doc), null, 2);
+}
+
+export function toAnimationObject(doc: IAnimationDocument): AnimationObject {
+  return { ...doc.fields, keyframes: tracksToFrames(doc.tracks) };
+}
+
+/**
+ * 动画时长：最后一个关键点的时间
+ */
+export function getAnimationDuration(tracks: ITrack[]): number {
+  return Math.max(0, ...tracks.flatMap((track) => track.points.map((point) => point.time)));
+}
+
+function tryParse(text: string): AnimationObject | null {
+  try {
+    const value = JSON.parse(text);
+    const isObject = typeof value === 'object' && value !== null && !Array.isArray(value);
+    return isObject && Array.isArray(value.keyframes) ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+function framesToTracks(keyframes: unknown[]): ITrack[] {
+  const tracks = new Map<string, IKeyPoint[]>();
+  let time = 0;
+  for (const frame of keyframes) {
+    if (typeof frame !== 'object' || frame === null) continue;
+    const { duration, ease, ...values } = frame as Record<string, unknown>;
+    time += typeof duration === 'number' && duration >= 0 ? duration : 0;
+    for (const [path, value] of collectNumericValues(values)) {
+      const points = tracks.get(path) ?? [];
+      points.push({ id: createId(), time, value, ease: typeof ease === 'string' ? ease : DEFAULT_EASE });
+      tracks.set(path, points);
+    }
+  }
+  return [...tracks].map(([path, points]) => ({ path, points }));
+}
+
+/**
+ * 帧中的数值属性，position、scale 这类嵌套对象展开为 'position.x' 这样的路径
+ */
+function collectNumericValues(values: Record<string, unknown>): [string, number][] {
+  return Object.entries(values).flatMap(([key, value]): [string, number][] => {
+    if (typeof value === 'number') return [[key, value]];
+    if (typeof value !== 'object' || value === null) return [];
+    return Object.entries(value)
+      .filter((entry): entry is [string, number] => typeof entry[1] === 'number')
+      .map(([axis, axisValue]) => [`${key}.${axis}`, axisValue]);
+  });
+}
+
+/**
+ * 把轨道合并回关键帧数组：时间与缓动都相同的关键点放进同一帧。
+ * 同一属性在同一时刻的第 n 个关键点（跳变）放进该时刻的第 n 帧，保证跳变前后的先后顺序
+ */
+function tracksToFrames(tracks: ITrack[]): Record<string, unknown>[] {
+  const groups = new Map<string, { time: number; order: number; ease: string; values: Record<string, unknown> }>();
+  for (const track of tracks) {
+    track.points.forEach((point, index) => {
+      const order = track.points.slice(0, index).filter((prev) => prev.time === point.time).length;
+      const key = `${point.time}|${order}|${point.ease}`;
+      const group = groups.get(key) ?? { time: point.time, order, ease: point.ease, values: {} };
+      set(group.values, track.path, point.value);
+      groups.set(key, group);
+    });
+  }
+
+  const sortedGroups = [...groups.values()].sort((a, b) => a.time - b.time || a.order - b.order);
+  let lastTime = 0;
+  return sortedGroups.map(({ time, ease, values }) => {
+    const frame = { duration: time - lastTime, ...values, ...(ease === DEFAULT_EASE ? {} : { ease }) };
+    lastTime = time;
+    return frame;
+  });
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/model/animationSettings.ts b/packages/origine2/src/pages/editor/AnimationEditor/model/animationSettings.ts
new file mode 100644
index 000000000..f8ff4cbb7
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/model/animationSettings.ts
@@ -0,0 +1,77 @@
+/**
+ * @file 动画中与时间轴无关的设置：relative、inherit、relativeCalc。
+ * 缺省值与引擎一致，见 WebGAL 仓库的 dev-docs/Animation v2.md
+ */
+import isEmpty from 'lodash/isEmpty';
+import omit from 'lodash/omit';
+
+export type RelativeCalc = 'add' | 'multiply' | 'multiplyWithZeroFallback' | 'absolute';
+
+export const RELATIVE_CALCS: RelativeCalc[] = ['add', 'multiply', 'multiplyWithZeroFallback', 'absolute'];
+
+/** 未在 relativeCalc 中指定时，各属性的默认计算方式；表中没有的属性为 absolute */
+const DEFAULT_RELATIVE_CALC: Partial<Record<string, RelativeCalc>> = {
+  position: 'add',
+  rotation: 'add',
+  blur: 'add',
+  bevel: 'add',
+  bevelThickness: 'add',
+  bevelRotation: 'add',
+  bevelSoftness: 'add',
+  bloom: 'add',
+  bloomBlur: 'add',
+  scale: 'multiplyWithZeroFallback',
+};
+
+export function isRelative(fields: Record<string, unknown>): boolean {
+  return fields.relative !== false;
+}
+
+export function isInherit(fields: Record<string, unknown>): boolean {
+  return fields.inherit !== false;
+}
+
+/**
+ * relativeCalc 的键名是顶层属性名，position.x 这样的路径按 position 查找，即设置同时作用于两轴
+ */
+export function getCalcKey(path: string): string {
+  return path.split('.')[0];
+}
+
+export function getDefaultRelativeCalc(path: string): RelativeCalc {
+  return DEFAULT_RELATIVE_CALC[getCalcKey(path)] ?? 'absolute';
+}
+
+/**
+ * 文件中为该属性指定的计算方式，未指定或非法时为 undefined
+ */
+export function getRelativeCalcOverride(fields: Record<string, unknown>, path: string): RelativeCalc | undefined {
+  const relativeCalc = fields.relativeCalc as Record<string, unknown> | undefined;
+  const calc = relativeCalc?.[getCalcKey(path)];
+  return RELATIVE_CALCS.includes(calc as RelativeCalc) ? (calc as RelativeCalc) : undefined;
+}
+
+/**
+ * 设置属性的计算方式，calc 为 undefined 时恢复默认。relativeCalc 为空时删去该字段
+ */
+export function setRelativeCalc(
+  fields: Record<string, unknown>,
+  path: string,
+  calc: RelativeCalc | undefined,
+): Record<string, unknown> {
+  const key = getCalcKey(path);
+  const relativeCalc = { ...omit(fields.relativeCalc as object, key), ...(calc ? { [key]: calc } : {}) };
+  return isEmpty(relativeCalc) ? omit(fields, 'relativeCalc') : { ...fields, relativeCalc };
+}
+
+/**
+ * 当前基准状态在帧值中的表示：相加时为 0，相乘时为 1，绝对值时为属性的默认值。
+ * 用于显示第一个关键帧之前以及没有关键帧的属性的值
+ */
+export function getNeutralValue(fields: Record<string, unknown>, path: string, defaultValue: number): number {
+  if (!isRelative(fields)) return defaultValue;
+  const calc = getRelativeCalcOverride(fields, path) ?? getDefaultRelativeCalc(path);
+  if (calc === 'add') return 0;
+  if (calc === 'absolute') return defaultValue;
+  return 1;
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/model/trackOperations.ts b/packages/origine2/src/pages/editor/AnimationEditor/model/trackOperations.ts
new file mode 100644
index 000000000..c063dd5f3
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/model/trackOperations.ts
@@ -0,0 +1,44 @@
+/**
+ * @file 对轨道的编辑操作。都是纯函数，返回新的数组。
+ * 关键点的操作作用于一条轨道的 points，通过 updatePoints 应用到指定轨道
+ */
+import { createId } from '@/utils/createId';
+import { DEFAULT_EASE, IKeyPoint, ITrack } from './animationDocument';
+
+/**
+ * 修改某条轨道的关键点，修改后按时间重新排序（sort 是稳定的，同一时刻的关键点保持原有先后）
+ */
+export function updatePoints(tracks: ITrack[], path: string, update: (points: IKeyPoint[]) => IKeyPoint[]): ITrack[] {
+  return tracks.map((track) =>
+    track.path === path ? { ...track, points: update(track.points).sort((a, b) => a.time - b.time) } : track,
+  );
+}
+
+export function addTrack(tracks: ITrack[], path: string): ITrack[] {
+  return [...tracks, { path, points: [] }];
+}
+
+export function removeTrack(tracks: ITrack[], path: string): ITrack[] {
+  return tracks.filter((track) => track.path !== path);
+}
+
+/**
+ * 在 time 时刻设置属性值：该时刻已有关键点时修改它（跳变时修改靠后的那个），否则插入新的关键点
+ */
+export function setValueAt(points: IKeyPoint[], time: number, value: number): IKeyPoint[] {
+  const existing = findLastPointAt(points, time);
+  if (existing) return updatePoint(points, existing.id, { value });
+  return [...points, { id: createId(), time, value, ease: DEFAULT_EASE }];
+}
+
+export function findLastPointAt(points: IKeyPoint[], time: number): IKeyPoint | undefined {
+  return points.filter((point) => point.time === time).pop();
+}
+
+export function removePoint(points: IKeyPoint[], id: string): IKeyPoint[] {
+  return points.filter((point) => point.id !== id);
+}
+
+export function updatePoint(points: IKeyPoint[], id: string, patch: Partial<IKeyPoint>): IKeyPoint[] {
+  return points.map((point) => (point.id === id ? { ...point, ...patch } : point));
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/model/trackSampling.ts b/packages/origine2/src/pages/editor/AnimationEditor/model/trackSampling.ts
new file mode 100644
index 000000000..ae485aeb4
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/model/trackSampling.ts
@@ -0,0 +1,41 @@
+/**
+ * @file 取轨道在某一时刻的帧值，用于在属性栏显示播放头处的值。
+ *
+ * 这里只在帧值（文件中写的值）上插值，不做相对计算；预览画面的状态由引擎计算（preview.command.seek-animation）。
+ * 插值方式与缓动和引擎的 sampleTrack 保持一致
+ */
+import * as popmotion from 'popmotion';
+import { IKeyPoint } from './animationDocument';
+
+const EASINGS: Record<string, popmotion.Easing> = {
+  linear: popmotion.linear,
+  easeIn: popmotion.easeIn,
+  easeOut: popmotion.easeOut,
+  easeInOut: popmotion.easeInOut,
+  circIn: popmotion.circIn,
+  circOut: popmotion.circOut,
+  circInOut: popmotion.circInOut,
+  backIn: popmotion.backIn,
+  backOut: popmotion.backOut,
+  backInOut: popmotion.backInOut,
+  bounceIn: popmotion.bounceIn,
+  bounceOut: popmotion.bounceOut,
+  bounceInOut: popmotion.bounceInOut,
+  anticipate: popmotion.anticipate,
+};
+
+/**
+ * @param neutralValue 当前基准状态对应的帧值。v2 动画在第一个关键帧之前从基准状态过渡过去
+ */
+export function sampleTrackValue(points: IKeyPoint[], time: number, neutralValue: number): number {
+  const startPoint: IKeyPoint = { id: '', time: 0, value: neutralValue, ease: 'linear' };
+  const allPoints = [startPoint, ...points];
+  // 本区间的插值终点：第一个晚于 time 的关键点；同一时刻的多个关键点中，靠后的是跳变后的状态
+  const nextIndex = allPoints.findIndex((point) => point.time > time);
+  if (nextIndex === -1) return allPoints[allPoints.length - 1].value;
+  const prev = allPoints[nextIndex - 1];
+  const next = allPoints[nextIndex];
+  const progress = (time - prev.time) / (next.time - prev.time);
+  const ease = EASINGS[next.ease] ?? popmotion.easeInOut;
+  return prev.value + (next.value - prev.value) * ease(progress);
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationDocument.ts b/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationDocument.ts
new file mode 100644
index 000000000..cc33a49e8
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationDocument.ts
@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { api } from '@/api';
+import { useJsonFileText } from '@/pages/editor/ResourceDisplay/JsonResourceDisplay/JsonResourceDisplay';
+import { IAnimationDocument, ITrack, parseAnimation, serializeAnimation } from './animationDocument';
+
+const SAVE_DELAY = 300;
+
+/**
+ * 正在编辑的动画。修改后自动保存，并更新代码编辑器共用的文件缓存
+ * @param initialText 打开时的文件内容，之后以编辑器中的状态为准
+ */
+export function useAnimationDocument(url: string, initialText: string) {
+  const [doc, setDoc] = useState(() => parseAnimation(initialText));
+  const { mutate } = useJsonFileText(url);
+  /** 上次保存（或打开时）的文件内容，内容没变就不写文件，例如只是添加了一条空轨道 */
+  const lastTextRef = useRef(serializeAnimation(doc));
+
+  const save = useMemo(
+    () =>
+      debounce(async (text: string) => {
+        await api.manageGameControllerEditTextFile({ textFile: text, path: url });
+        mutate(text, { revalidate: false });
+      }, SAVE_DELAY),
+    [url, mutate],
+  );
+
+  useEffect(() => {
+    const text = serializeAnimation(doc);
+    if (text === lastTextRef.current) return;
+    lastTextRef.current = text;
+    save(text);
+  }, [doc, save]);
+
+  // 离开编辑器时立即写入尚未保存的修改
+  useEffect(
+    () => () => {
+      save.flush();
+    },
+    [save],
+  );
+
+  const updateTracks = useCallback((update: (tracks: ITrack[]) => ITrack[]) => {
+    setDoc((prev) => ({ ...prev, tracks: update(prev.tracks) }));
+  }, []);
+
+  const updateFields = useCallback((update: (fields: IAnimationDocument['fields']) => IAnimationDocument['fields']) => {
+    setDoc((prev) => ({ ...prev, fields: update(prev.fields) }));
+  }, []);
+
+  return { doc, updateTracks, updateFields };
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationProperties.ts b/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationProperties.ts
new file mode 100644
index 000000000..3543579e2
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationProperties.ts
@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import { EffectKey, useEffectEditorConfig } from '@/pages/editor/GraphicalEditor/utils/useEffectEditorConfig';
+
+export interface IAnimationProperty {
+  path: string;
+  /** 时间轴上显示的名称 */
+  label: string;
+  /** 添加属性菜单中显示的名称（菜单已按分组显示，因此不带分组名） */
+  shortLabel: string;
+  /** 属性的默认值，即 baseTransform 中的值 */
+  defaultValue: number;
+  step: number;
+  /** 显示时保留的小数位数 */
+  precision: number;
+}
+
+export interface IPropertyGroup {
+  title: string;
+  properties: IAnimationProperty[];
+}
+
+/** 效果编辑器的分组里没有颜色通道，这里插到对应属性后面 */
+const COLOR_CHANNEL_KEYS: Partial<Record<EffectKey, EffectKey[]>> = {
+  gamma: ['colorRed', 'colorGreen', 'colorBlue'],
+  bevelSoftness: ['bevelRed', 'bevelGreen', 'bevelBlue'],
+};
+
+/** 泛光、倒角的参数名（强度、厚度……）离开分组就看不懂，在时间轴上显示时带上分组名 */
+const GROUP_PREFIXED_KEYS: EffectKey[] = ['bloom', 'bevel'];
+
+/**
+ * 可动画的属性及其显示信息，复用效果编辑器的配置
+ */
+export function useAnimationProperties() {
+  const { effectConfig, fieldGroups } = useEffectEditorConfig();
+
+  return useMemo(() => {
+    const groups: IPropertyGroup[] = fieldGroups.map((group) => {
+      const groupKeys: readonly EffectKey[] = group.keys;
+      const isPrefixed = GROUP_PREFIXED_KEYS.includes(groupKeys[0]);
+      const keys = groupKeys.flatMap((key) => [key, ...(COLOR_CHANNEL_KEYS[key] ?? [])]);
+      return {
+        title: group.title,
+        properties: keys.map((key) => {
+          const config = effectConfig[key];
+          const label = config.label ?? key;
+          const precision = config.slider?.toFixed ?? 0;
+          return {
+            path: config.path,
+            label: isPrefixed ? `${group.title} · ${label}` : label,
+            shortLabel: label,
+            defaultValue: config.slider?.defaultValue ?? 0,
+            step: precision === 0 ? 1 : 0.01,
+            precision,
+          };
+        }),
+      };
+    });
+    const propertyMap = new Map(groups.flatMap((group) => group.properties.map((property) => [property.path, property])));
+
+    /** 文件里可能有这里不认识的属性（如 shockwaveFilter），按路径原样显示 */
+    const getProperty = (path: string): IAnimationProperty =>
+      propertyMap.get(path) ?? { path, label: path, shortLabel: path, defaultValue: 0, step: 0.01, precision: 3 };
+
+    return { groups, getProperty };
+  }, [effectConfig, fieldGroups]);
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/preview/AnimationPreview.tsx b/packages/origine2/src/pages/editor/AnimationEditor/preview/AnimationPreview.tsx
new file mode 100644
index 000000000..9c6a88c05
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/preview/AnimationPreview.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useRef } from 'react';
+import { Spinner } from '@fluentui/react-components';
+import type { JsonValue } from '@webgal/editor-preview-protocol';
+import useEditorStore from '@/store/useEditorStore';
+import { useDedicatedPreview } from './useDedicatedPreview';
+import { buildPreviewScene, getPreviewTarget, IPreviewSettings } from './previewSettings';
+import styles from './animationPreview.module.scss';
+
+interface IAnimationPreviewProps {
+  animation: JsonValue;
+  /** 播放头时刻（毫秒） */
+  time: number;
+  settings: IPreviewSettings;
+}
+
+/**
+ * 一个独立的 WebGAL 实例：按预览设置搭好舞台，再把动画在播放头处的状态写到目标上
+ */
+export function AnimationPreview({ animation, time, settings }: IAnimationPreviewProps) {
+  const gameDir = useEditorStore.use.subPage();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const { isReady, stageRevision, send } = useDedicatedPreview(iframeRef);
+
+  useEffect(() => {
+    if (!isReady) return;
+    send('preview.command.run-scene-content', { sceneContent: buildPreviewScene(settings) });
+    send('preview.command.set-component-visibility', { showTextBox: false, showControls: false });
+  }, [isReady, settings, send]);
+
+  // 播放时每帧都会触发，合并到下一个动画帧再发送；舞台变化（如立绘加载完成）后也要重新写入
+  useEffect(() => {
+    if (!isReady) return;
+    const frameId = requestAnimationFrame(() => {
+      send('preview.command.seek-animation', { target: getPreviewTarget(settings), animation, time });
+    });
+    return () => cancelAnimationFrame(frameId);
+  }, [isReady, stageRevision, animation, time, settings, send]);
+
+  return (
+    <div className={styles.preview}>
+      {/* eslint-disable-next-line react/iframe-missing-sandbox */}
+      <iframe ref={iframeRef} className={styles.frame} src={`/games/${gameDir}`} title="animation-preview" />
+      {!isReady && <Spinner className={styles.loading} size="small" />}
+    </div>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/preview/animationPreview.module.scss b/packages/origine2/src/pages/editor/AnimationEditor/preview/animationPreview.module.scss
new file mode 100644
index 000000000..eb53cf1a4
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/preview/animationPreview.module.scss
@@ -0,0 +1,20 @@
+.preview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--black-5pct);
+}
+
+.frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+  // 只用于预览，避免点击舞台推进场景
+  pointer-events: none;
+}
+
+.loading {
+  position: absolute;
+  inset: 0;
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/preview/previewSettings.ts b/packages/origine2/src/pages/editor/AnimationEditor/preview/previewSettings.ts
new file mode 100644
index 000000000..64d2c937d
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/preview/previewSettings.ts
@@ -0,0 +1,69 @@
+/**
+ * @file 预览设置：用什么背景、立绘来预览动画，动画作用在哪个对象上。
+ * 只用于预览，不写入动画文件，按游戏保存在 localStorage 中
+ */
+import { useCallback, useState } from 'react';
+import useEditorStore from '@/store/useEditorStore';
+
+export type PreviewTarget = 'figure' | 'background';
+export type FigurePosition = 'left' | 'center' | 'right';
+
+export interface IPreviewSettings {
+  target: PreviewTarget;
+  /** 相对于 figure 目录的文件名，空字符串表示不显示 */
+  figure: string;
+  figurePosition: FigurePosition;
+  /** 相对于 background 目录的文件名，空字符串表示不显示 */
+  background: string;
+}
+
+const DEFAULT_SETTINGS: IPreviewSettings = { target: 'figure', figure: '', figurePosition: 'center', background: '' };
+
+/** 预览立绘的 id，也是动画作用在立绘上时的目标 */
+const PREVIEW_FIGURE_ID = 'animation-preview';
+
+export function usePreviewSettings() {
+  const gameDir = useEditorStore.use.subPage();
+  const storageKey = `animation-preview-settings:${gameDir}`;
+  const [settings, setSettings] = useState<IPreviewSettings>(() => ({ ...DEFAULT_SETTINGS, ...readStorage(storageKey) }));
+
+  const updateSettings = useCallback(
+    (patch: Partial<IPreviewSettings>) => {
+      setSettings((prev) => {
+        const next = { ...prev, ...patch };
+        localStorage.setItem(storageKey, JSON.stringify(next));
+        return next;
+      });
+    },
+    [storageKey],
+  );
+
+  return [settings, updateSettings] as const;
+}
+
+/**
+ * 搭建预览舞台的场景：立即显示背景和立绘，不播放入场动画
+ */
+export function buildPreviewScene(settings: IPreviewSettings): string {
+  const lines: string[] = [];
+  if (settings.background) {
+    lines.push(`changeBg:${settings.background} -duration=0 -next;`);
+  }
+  if (settings.figure) {
+    const positionArg = settings.figurePosition === 'center' ? '' : ` -${settings.figurePosition}`;
+    lines.push(`changeFigure:${settings.figure} -id=${PREVIEW_FIGURE_ID}${positionArg} -duration=0 -next;`);
+  }
+  return lines.join('\n');
+}
+
+export function getPreviewTarget(settings: IPreviewSettings): string {
+  return settings.target === 'figure' ? PREVIEW_FIGURE_ID : 'bg-main';
+}
+
+function readStorage(storageKey: string): Partial<IPreviewSettings> {
+  try {
+    return JSON.parse(localStorage.getItem(storageKey) ?? '{}');
+  } catch {
+    return {};
+  }
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/preview/useDedicatedPreview.ts b/packages/origine2/src/pages/editor/AnimationEditor/preview/useDedicatedPreview.ts
new file mode 100644
index 000000000..756aef967
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/preview/useDedicatedPreview.ts
@@ -0,0 +1,59 @@
+import { RefObject, useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  DEDICATED_PREVIEW_LAUNCH_ID_PREFIX,
+  type EventEnvelopeByType,
+  type HostEventType,
+  type PreviewCommandType,
+  type RequestPayloadByType,
+} from '@webgal/editor-preview-protocol';
+import { EditorPreviewClient } from '@/utils/editorPreviewClient';
+import { createPreviewBootstrapProvide, isPreviewBootstrapRequest } from '@/utils/editorPreviewBootstrap';
+import { createId } from '@/utils/createId';
+import { eventBus } from '@/utils/eventBus';
+
+/**
+ * 让 iframe 中的 WebGAL 注册为独占预览，只接收本组件发出的命令，不受主预览的同步影响。
+ *
+ * iframe 加载后会向父窗口请求 embeddedLaunchId，这里回复一个带独占前缀的 id；
+ * 之后它发出的事件会带着这个 id 转发回来，用于判断是否就绪、舞台是否变化
+ */
+export function useDedicatedPreview(iframeRef: RefObject<HTMLIFrameElement>) {
+  const launchId = useMemo(() => DEDICATED_PREVIEW_LAUNCH_ID_PREFIX + createId(), []);
+  const [isReady, setIsReady] = useState(false);
+  /** 每当预览的舞台状态变化时加一，用于在立绘等加载完成后重新写入动画状态 */
+  const [stageRevision, setStageRevision] = useState(0);
+
+  useEffect(() => {
+    EditorPreviewClient.ensureConnected();
+
+    const handleBootstrapRequest = (event: MessageEvent) => {
+      const iframeWindow = iframeRef.current?.contentWindow;
+      if (!iframeWindow || event.source !== iframeWindow || !isPreviewBootstrapRequest(event.data)) return;
+      iframeWindow.postMessage(createPreviewBootstrapProvide(launchId), '*');
+    };
+
+    const handlePreviewEvent = (envelope: EventEnvelopeByType<HostEventType>) => {
+      if (envelope.embeddedLaunchId !== launchId) return;
+      if (envelope.type === 'preview.ready.updated') {
+        setIsReady(envelope.payload.ready);
+      } else if (envelope.type === 'stage.snapshot.updated') {
+        setStageRevision((revision) => revision + 1);
+      }
+    };
+
+    window.addEventListener('message', handleBootstrapRequest);
+    eventBus.on('editor-preview:dedicated-event', handlePreviewEvent);
+    return () => {
+      window.removeEventListener('message', handleBootstrapRequest);
+      eventBus.off('editor-preview:dedicated-event', handlePreviewEvent);
+    };
+  }, [iframeRef, launchId]);
+
+  const send = useCallback(
+    <TType extends PreviewCommandType>(type: TType, payload: RequestPayloadByType[TType]) =>
+      EditorPreviewClient.sendToDedicatedPreview(launchId, type, payload),
+    [launchId],
+  );
+
+  return { isReady, stageRevision, send };
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx b/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx
new file mode 100644
index 000000000..cbf44ea2b
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx
@@ -0,0 +1,110 @@
+import { memo, ReactNode } from 'react';
+import { Dropdown, Option, Switch } from '@fluentui/react-components';
+import { t } from '@lingui/macro';
+import { InfoTip } from '../components/InfoTip';
+import { isInherit, isRelative } from '../model/animationSettings';
+import { FigurePosition, IPreviewSettings, PreviewTarget } from '../preview/previewSettings';
+import { FileSetting } from './FileSetting';
+import styles from './animationSettingsPanel.module.scss';
+
+interface IAnimationSettingsPanelProps {
+  fields: Record<string, unknown>;
+  updateFields: (update: (fields: Record<string, unknown>) => Record<string, unknown>) => void;
+  preview: IPreviewSettings;
+  onPreviewChange: (patch: Partial<IPreviewSettings>) => void;
+}
+
+/**
+ * 与时间轴无关的设置：上半部分写入动画文件，下半部分只用于预览
+ */
+// 播放时每帧都会重新渲染编辑器，这里的内容与播放头无关，用 memo 跳过
+export const AnimationSettingsPanel = memo(SettingsPanel);
+
+function SettingsPanel(props: IAnimationSettingsPanelProps) {
+  const { fields, updateFields, preview, onPreviewChange } = props;
+  const targetLabels: Record<PreviewTarget, string> = { figure: t`立绘`, background: t`背景` };
+  const positionLabels: Record<FigurePosition, string> = { left: t`左`, center: t`中`, right: t`右` };
+
+  return (
+    <div className={styles.panel}>
+      <Section title={t`动画`}>
+        <SettingRow
+          label={t`相对动画`}
+          info={t`开启时，关键帧中的值基于对象当前的状态计算，例如位置、旋转为相加，缩放为相乘；关闭时均为绝对值。可在属性的菜单中修改计算方式。`}
+        >
+          <Switch
+            checked={isRelative(fields)}
+            onChange={(_, data) => updateFields((prev) => ({ ...prev, relative: data.checked }))}
+          />
+        </SettingRow>
+        <SettingRow
+          label={t`帧继承`}
+          info={t`开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。`}
+        >
+          <Switch
+            checked={isInherit(fields)}
+            onChange={(_, data) => updateFields((prev) => ({ ...prev, inherit: data.checked }))}
+          />
+        </SettingRow>
+      </Section>
+      <Section title={t`预览`} info={t`仅用于预览，不会写入动画文件`}>
+        <SettingRow label={t`预览对象`}>
+          <Dropdown
+            className={styles.dropdown}
+            size="small"
+            value={targetLabels[preview.target]}
+            selectedOptions={[preview.target]}
+            onOptionSelect={(_, data) => onPreviewChange({ target: data.optionValue as PreviewTarget })}
+          >
+            {Object.entries(targetLabels).map(([value, label]) => <Option key={value} value={value}>{label}</Option>)}
+          </Dropdown>
+        </SettingRow>
+        <SettingRow label={t`立绘`}>
+          <FileSetting basePath="figure" file={preview.figure} onChange={(figure) => onPreviewChange({ figure })} />
+        </SettingRow>
+        <SettingRow label={t`立绘位置`}>
+          <Dropdown
+            className={styles.dropdown}
+            size="small"
+            value={positionLabels[preview.figurePosition]}
+            selectedOptions={[preview.figurePosition]}
+            onOptionSelect={(_, data) => onPreviewChange({ figurePosition: data.optionValue as FigurePosition })}
+          >
+            {Object.entries(positionLabels).map(([value, label]) => <Option key={value} value={value}>{label}</Option>)}
+          </Dropdown>
+        </SettingRow>
+        <SettingRow label={t`背景`}>
+          <FileSetting
+            basePath="background"
+            file={preview.background}
+            onChange={(background) => onPreviewChange({ background })}
+          />
+        </SettingRow>
+      </Section>
+    </div>
+  );
+}
+
+function Section({ title, info, children }: { title: string; info?: string; children: ReactNode }) {
+  return (
+    <div className={styles.section}>
+      <div className={styles.sectionTitle}>
+        {title}
+        {info && <InfoTip content={info} />}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function SettingRow({ label, info, children }: { label: string; info?: string; children: ReactNode }) {
+  return (
+    <div className={styles.row}>
+      <div className={styles.label}>
+        {label}
+        {info && <InfoTip content={info} />}
+      </div>
+      <div className={styles.control}>{children}</div>
+    </div>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/settings/FileSetting.tsx b/packages/origine2/src/pages/editor/AnimationEditor/settings/FileSetting.tsx
new file mode 100644
index 000000000..9d0d6f9ea
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/settings/FileSetting.tsx
@@ -0,0 +1,40 @@
+import { Button } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+import { t } from '@lingui/macro';
+import ChooseFile from '@/pages/editor/ChooseFile/ChooseFile';
+import { extNameMap } from '@/pages/editor/ChooseFile/chooseFileConfig';
+import { AssetPreview } from '@/pages/editor/GraphicalEditor/components/AssetPreview';
+import styles from './animationSettingsPanel.module.scss';
+
+interface IFileSettingProps {
+  basePath: 'figure' | 'background';
+  /** 相对于 basePath 的文件名，空字符串表示未选择 */
+  file: string;
+  onChange: (file: string) => void;
+}
+
+const EXT_NAMES = {
+  figure: [...(extNameMap.get('image') ?? []), ...(extNameMap.get('json') ?? [])],
+  background: [...(extNameMap.get('image') ?? []), ...(extNameMap.get('video') ?? [])],
+};
+
+/**
+ * 选择预览用的素材文件：缩略图、文件名、选择按钮，选择后可以清除
+ */
+export function FileSetting({ basePath, file, onChange }: IFileSettingProps) {
+  return (
+    <div className={styles.file}>
+      <AssetPreview basePath={basePath} file={file} />
+      <span className={styles.fileName} title={file}>{file || t`无`}</span>
+      {file && (
+        <Button size="small" appearance="subtle" icon={<DismissRegular />} title={t`清除`} onClick={() => onChange('')} />
+      )}
+      <ChooseFile
+        basePath={[basePath]}
+        selectedFilePath={file}
+        extNames={EXT_NAMES[basePath]}
+        onChange={(chosenFile) => onChange(chosenFile?.name ?? '')}
+      />
+    </div>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/settings/animationSettingsPanel.module.scss b/packages/origine2/src/pages/editor/AnimationEditor/settings/animationSettingsPanel.module.scss
new file mode 100644
index 000000000..f2193bfaf
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/settings/animationSettingsPanel.module.scss
@@ -0,0 +1,66 @@
+.panel {
+  height: 100%;
+  overflow: auto;
+  padding: 8px 12px;
+  box-sizing: border-box;
+  background: var(--bg-card);
+}
+
+.section + .section {
+  margin-top: 12px;
+}
+
+.sectionTitle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  color: var(--text-weak);
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+  width: 88px;
+  color: var(--text-sub);
+}
+
+.control {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.dropdown {
+  min-width: 0;
+  width: 120px;
+}
+
+.file {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.fileName {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/AddPropertyMenu.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/AddPropertyMenu.tsx
new file mode 100644
index 000000000..91d90ed28
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/AddPropertyMenu.tsx
@@ -0,0 +1,40 @@
+import { Button, Menu, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components';
+import { AddRegular } from '@fluentui/react-icons';
+import { t } from '@lingui/macro';
+import { useAnimationProperties } from '../model/useAnimationProperties';
+import styles from './timeline.module.scss';
+
+interface IAddPropertyMenuProps {
+  /** 时间轴上已有的属性，不再出现在菜单中 */
+  shownPaths: string[];
+  onAdd: (path: string) => void;
+}
+
+export function AddPropertyMenu({ shownPaths, onAdd }: IAddPropertyMenuProps) {
+  const { groups } = useAnimationProperties();
+  const availableGroups = groups
+    .map((group) => ({ ...group, properties: group.properties.filter((property) => !shownPaths.includes(property.path)) }))
+    .filter((group) => group.properties.length > 0);
+
+  return (
+    <Menu>
+      <MenuTrigger disableButtonEnhancement>
+        <Button size="small" appearance="subtle" icon={<AddRegular />} disabled={availableGroups.length === 0}>
+          {t`添加属性`}
+        </Button>
+      </MenuTrigger>
+      <MenuPopover className={styles.addPropertyPopover}>
+        <MenuList>
+          {availableGroups.map((group) => (
+            <MenuGroup key={group.title}>
+              <MenuGroupHeader>{group.title}</MenuGroupHeader>
+              {group.properties.map((property) => (
+                <MenuItem key={property.path} onClick={() => onAdd(property.path)}>{property.shortLabel}</MenuItem>
+              ))}
+            </MenuGroup>
+          ))}
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/AnimationTimeline.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/AnimationTimeline.tsx
new file mode 100644
index 000000000..38ce59dcf
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/AnimationTimeline.tsx
@@ -0,0 +1,134 @@
+import { KeyboardEvent, useRef, useState } from 'react';
+import { getAnimationDuration, IAnimationDocument, ITrack } from '../model/animationDocument';
+import { addTrack, removePoint, updatePoints } from '../model/trackOperations';
+import { useAnimationProperties } from '../model/useAnimationProperties';
+import { AddPropertyMenu } from './AddPropertyMenu';
+import { buildTrackRow } from './buildTrackRow';
+import { TimelineRuler } from './TimelineRuler';
+import { TimelineToolbar } from './TimelineToolbar';
+import { TrackHeader } from './TrackHeader';
+import { TrackLane } from './TrackLane';
+import { TIMELINE_TAIL, timeToX } from './timelineLayout';
+import { useElementWidth } from './useElementWidth';
+import { usePlayback } from './usePlayback';
+import { useTimelineZoom } from './useTimelineZoom';
+import styles from './timeline.module.scss';
+
+type Updater<T> = (update: (value: T) => T) => void;
+
+interface IAnimationTimelineProps {
+  doc: IAnimationDocument;
+  updateTracks: Updater<ITrack[]>;
+  updateFields: Updater<Record<string, unknown>>;
+  /** 播放头时刻（毫秒） */
+  time: number;
+  /** 必须是稳定的函数（如 useState 的 setter） */
+  onTimeChange: (time: number) => void;
+}
+
+/**
+ * 类似 AE 的时间轴：每行一个属性，横向为时间，可缩放、拖动播放头和关键帧。
+ * 空格播放 / 暂停，Delete 删除选中的关键帧。
+ *
+ * 只有右下的轨道区域会滚动，刻度尺随它横向滚动，左侧属性栏随它纵向滚动
+ */
+export function AnimationTimeline({ doc, updateTracks, updateFields, time, onTimeChange }: IAnimationTimelineProps) {
+  const { getProperty } = useAnimationProperties();
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const lanesRef = useRef<HTMLDivElement>(null);
+  const rulerRef = useRef<HTMLDivElement>(null);
+  const headersRef = useRef<HTMLDivElement>(null);
+  const lanesViewportWidth = useElementWidth(lanesRef);
+  const { pxPerMs, setPxPerMs } = useTimelineZoom(bodyRef, lanesRef);
+  const duration = getAnimationDuration(doc.tracks);
+  const playback = usePlayback(duration, time, onTimeChange);
+  const [selected, setSelected] = useState<{ path: string; id: string } | null>(null);
+  // 轨道至少铺满可视区域，并在动画结尾后留出一段，便于把关键帧往后拖
+  const laneWidth = Math.max(timeToX(duration + TIMELINE_TAIL, pxPerMs), lanesViewportWidth);
+
+  const scrub = (newTime: number) => {
+    playback.pause();
+    onTimeChange(newTime);
+  };
+
+  const rows = doc.tracks.map((track) => ({
+    path: track.path,
+    ...buildTrackRow(track, {
+      fields: doc.fields,
+      time,
+      pxPerMs,
+      laneWidth,
+      selected,
+      getProperty,
+      updateTracks,
+      updateFields,
+      onSelectPoint: (path, point) => {
+        setSelected(point && { path, id: point.id });
+        if (point) scrub(point.time);
+      },
+      onScrub: scrub,
+    }),
+  }));
+
+  const syncScroll = () => {
+    const lanes = lanesRef.current;
+    if (!lanes) return;
+    if (rulerRef.current) rulerRef.current.scrollLeft = lanes.scrollLeft;
+    if (headersRef.current) headersRef.current.scrollTop = lanes.scrollTop;
+  };
+
+  // 只在时间轴本身获得焦点时响应，避免与输入框、按钮、菜单的按键冲突
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.target !== event.currentTarget) return;
+    if (event.key === ' ') {
+      event.preventDefault();
+      playback.togglePlay();
+    } else if ((event.key === 'Delete' || event.key === 'Backspace') && selected) {
+      updateTracks((tracks) => updatePoints(tracks, selected.path, (points) => removePoint(points, selected.id)));
+      setSelected(null);
+    }
+  };
+
+  return (
+    <div className={styles.timeline} tabIndex={0} onKeyDown={handleKeyDown}>
+      <TimelineToolbar
+        time={time}
+        duration={duration}
+        playback={playback}
+        onRewind={() => scrub(0)}
+        pxPerMs={pxPerMs}
+        onZoomChange={setPxPerMs}
+      />
+      <div ref={bodyRef} className={styles.body}>
+        <div className={styles.corner} />
+        <div ref={rulerRef} className={styles.rulerViewport}>
+          <TimelineRuler width={laneWidth} pxPerMs={pxPerMs} time={time} onScrub={scrub} />
+        </div>
+        {/* 属性栏本身不滚动，在这里滚动滚轮时转给轨道区域 */}
+        <div
+          ref={headersRef}
+          className={styles.headers}
+          onWheel={(event) => {
+            if (!event.ctrlKey && lanesRef.current) lanesRef.current.scrollTop += event.deltaY;
+          }}
+        >
+          {rows.map(({ path, header }) => <TrackHeader key={path} {...header} />)}
+          <div className={styles.header}>
+            <AddPropertyMenu
+              shownPaths={doc.tracks.map((track) => track.path)}
+              onAdd={(path) => updateTracks((tracks) => addTrack(tracks, path))}
+            />
+          </div>
+        </div>
+        <div ref={lanesRef} className={styles.lanes} onScroll={syncScroll}>
+          <div className={styles.lanesContent} style={{ width: laneWidth }}>
+            {rows.map(({ path, lane }) => <TrackLane key={path} {...lane} />)}
+            {/* 对应属性栏中“添加属性”那一行，保持两边等高 */}
+            <div className={styles.laneSpacer} />
+            <div className={styles.playhead} style={{ left: timeToX(time, pxPerMs) }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/TimelineRuler.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TimelineRuler.tsx
new file mode 100644
index 000000000..7d23e858d
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TimelineRuler.tsx
@@ -0,0 +1,46 @@
+import { PointerEvent } from 'react';
+import { snapTime, timeToX, xToTime } from './timelineLayout';
+import styles from './timeline.module.scss';
+
+interface ITimelineRulerProps {
+  width: number;
+  pxPerMs: number;
+  time: number;
+  onScrub: (time: number) => void;
+}
+
+/** 刻度间隔的候选值（毫秒），按缩放选择使刻度不至于太密的最小一个 */
+const TICK_STEPS = [10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 30000, 60000];
+const MIN_TICK_SPACING = 64;
+
+/**
+ * 时间刻度尺，按住拖动即可移动播放头
+ */
+export function TimelineRuler({ width, pxPerMs, time, onScrub }: ITimelineRulerProps) {
+  const step = TICK_STEPS.find((candidate) => candidate * pxPerMs >= MIN_TICK_SPACING) ?? TICK_STEPS[TICK_STEPS.length - 1];
+  const ticks = Array.from({ length: Math.floor(xToTime(width, pxPerMs) / step) + 1 }, (_, index) => index * step);
+
+  const scrubTo = (event: PointerEvent<HTMLDivElement>) => {
+    const x = event.clientX - event.currentTarget.getBoundingClientRect().left;
+    onScrub(snapTime(xToTime(x, pxPerMs)));
+  };
+
+  return (
+    <div
+      className={styles.ruler}
+      style={{ width }}
+      onPointerDown={(event) => {
+        event.currentTarget.setPointerCapture(event.pointerId);
+        scrubTo(event);
+      }}
+      onPointerMove={(event) => event.currentTarget.hasPointerCapture(event.pointerId) && scrubTo(event)}
+    >
+      {ticks.map((tick) => (
+        <div key={tick} className={styles.tick} style={{ left: timeToX(tick, pxPerMs) }}>
+          <span className={styles.tickLabel}>{tick}</span>
+        </div>
+      ))}
+      <div className={styles.playheadHandle} style={{ left: timeToX(time, pxPerMs) }} />
+    </div>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/TimelineToolbar.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TimelineToolbar.tsx
new file mode 100644
index 000000000..f1e4fda20
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TimelineToolbar.tsx
@@ -0,0 +1,56 @@
+import { Button, Slider, ToggleButton } from '@fluentui/react-components';
+import { ArrowRepeatAllRegular, PauseRegular, PlayRegular, PreviousRegular, ZoomInRegular } from '@fluentui/react-icons';
+import { t } from '@lingui/macro';
+import { usePlayback } from './usePlayback';
+import { MAX_PX_PER_MS, MIN_PX_PER_MS } from './timelineLayout';
+import styles from './timeline.module.scss';
+
+interface ITimelineToolbarProps {
+  time: number;
+  duration: number;
+  playback: ReturnType<typeof usePlayback>;
+  onRewind: () => void;
+  pxPerMs: number;
+  onZoomChange: (pxPerMs: number) => void;
+}
+
+/**
+ * 播放控制与缩放。缩放滑块按对数刻度，拖动时每一段的变化感受一致
+ */
+export function TimelineToolbar({ time, duration, playback, onRewind, pxPerMs, onZoomChange }: ITimelineToolbarProps) {
+  return (
+    <div className={styles.toolbar}>
+      <Button size="small" appearance="subtle" icon={<PreviousRegular />} title={t`回到开头`} onClick={onRewind} />
+      <Button
+        size="small"
+        appearance="subtle"
+        icon={playback.isPlaying ? <PauseRegular /> : <PlayRegular />}
+        title={playback.isPlaying ? t`暂停` : t`播放`}
+        disabled={duration <= 0}
+        onClick={playback.togglePlay}
+      />
+      <ToggleButton
+        size="small"
+        appearance="subtle"
+        icon={<ArrowRepeatAllRegular />}
+        title={t`循环播放`}
+        checked={playback.isLoop}
+        onClick={() => playback.setIsLoop(!playback.isLoop)}
+      />
+      <span className={styles.time}>
+        {Math.round(time)} / {duration} ms
+      </span>
+      <div className={styles.zoom} title={t`缩放（Ctrl + 滚轮）`}>
+        <ZoomInRegular />
+        <Slider
+          size="small"
+          min={Math.log2(MIN_PX_PER_MS)}
+          max={Math.log2(MAX_PX_PER_MS)}
+          step={0.01}
+          value={Math.log2(pxPerMs)}
+          onChange={(_, data) => onZoomChange(2 ** data.value)}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackHeader.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackHeader.tsx
new file mode 100644
index 000000000..a44050cbf
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackHeader.tsx
@@ -0,0 +1,109 @@
+import {
+  Button,
+  Menu,
+  MenuGroup,
+  MenuDivider,
+  MenuGroupHeader,
+  MenuItem,
+  MenuItemRadio,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+  SpinButton,
+} from '@fluentui/react-components';
+import { DeleteRegular, DiamondFilled, DiamondRegular, MoreHorizontalRegular } from '@fluentui/react-icons';
+import { t } from '@lingui/macro';
+import { IAnimationProperty } from '../model/useAnimationProperties';
+import { RELATIVE_CALCS, RelativeCalc } from '../model/animationSettings';
+import { formatValue } from './timelineLayout';
+import styles from './timeline.module.scss';
+
+export interface ITrackHeaderProps {
+  property: IAnimationProperty;
+  /** 播放头处的值 */
+  value: number;
+  /** 播放头处是否有关键帧 */
+  hasKeyframe: boolean;
+  onValueChange: (value: number) => void;
+  onToggleKeyframe: () => void;
+  /** 相对动画的计算方式；非相对动画时为 null，不显示该设置 */
+  relativeCalc: { override?: RelativeCalc; default: RelativeCalc } | null;
+  onRelativeCalcChange: (calc: RelativeCalc | undefined) => void;
+  onRemove: () => void;
+}
+
+/** 计算方式菜单中表示“使用默认”的值 */
+const DEFAULT_CALC = 'default';
+
+/**
+ * 时间轴左侧的属性栏：名称、播放头处的值（修改即在此处设置关键帧）、关键帧开关、更多操作
+ */
+export function TrackHeader(props: ITrackHeaderProps) {
+  const { property, value, hasKeyframe, relativeCalc } = props;
+  const calcLabels: Record<RelativeCalc, string> = {
+    add: t`相加`,
+    multiply: t`相乘`,
+    multiplyWithZeroFallback: t`相乘（基准为 0 时视为 1）`,
+    absolute: t`绝对值`,
+  };
+
+  return (
+    <div className={styles.header}>
+      <span className={styles.trackLabel} title={property.path}>{property.label}</span>
+      <SpinButton
+        className={styles.valueInput}
+        size="small"
+        appearance="filled-darker"
+        value={value}
+        displayValue={formatValue(value, property.precision)}
+        step={property.step}
+        onChange={(_, data) => {
+          const next = data.value ?? parseFloat(data.displayValue ?? '');
+          if (Number.isFinite(next)) props.onValueChange(next);
+        }}
+      />
+      <Button
+        className={hasKeyframe ? styles.keyframeOn : undefined}
+        size="small"
+        appearance="transparent"
+        icon={hasKeyframe ? <DiamondFilled /> : <DiamondRegular />}
+        title={hasKeyframe ? t`删除此处的关键帧` : t`在此处添加关键帧`}
+        onClick={props.onToggleKeyframe}
+      />
+      <Menu>
+        <MenuTrigger disableButtonEnhancement>
+          <Button
+            className={styles.moreButton}
+            size="small"
+            appearance="transparent"
+            icon={<MoreHorizontalRegular />}
+            title={t`更多`}
+          />
+        </MenuTrigger>
+        <MenuPopover>
+          <MenuList
+            checkedValues={{ calc: [relativeCalc?.override ?? DEFAULT_CALC] }}
+            onCheckedValueChange={(_, data) => {
+              const calc = data.checkedItems[0];
+              props.onRelativeCalcChange(calc === DEFAULT_CALC ? undefined : (calc as RelativeCalc));
+            }}
+          >
+            {relativeCalc && (
+              <MenuGroup>
+                <MenuGroupHeader>{t`计算方式`}</MenuGroupHeader>
+                <MenuItemRadio name="calc" value={DEFAULT_CALC}>
+                  {t`默认（${calcLabels[relativeCalc.default]}）`}
+                </MenuItemRadio>
+                {RELATIVE_CALCS.map((calc) => (
+                  <MenuItemRadio key={calc} name="calc" value={calc}>{calcLabels[calc]}</MenuItemRadio>
+                ))}
+              </MenuGroup>
+            )}
+            {relativeCalc && <MenuDivider />}
+            <MenuItem icon={<DeleteRegular />} onClick={props.onRemove}>{t`移除属性`}</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </div>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackLane.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackLane.tsx
new file mode 100644
index 000000000..f17505bb2
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackLane.tsx
@@ -0,0 +1,118 @@
+import { PointerEvent, useRef } from 'react';
+import {
+  Menu,
+  MenuGroup,
+  MenuGroupHeader,
+  MenuItem,
+  MenuItemRadio,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+} from '@fluentui/react-components';
+import { DeleteRegular } from '@fluentui/react-icons';
+import { t } from '@lingui/macro';
+import { useEaseTypeOptions } from '@/hooks/useEaseTypeOptions';
+import { IKeyPoint } from '../model/animationDocument';
+import { snapTime, timeToX, xToTime } from './timelineLayout';
+import styles from './timeline.module.scss';
+
+export interface ITrackLaneProps {
+  points: IKeyPoint[];
+  pxPerMs: number;
+  width: number;
+  selectedId: string | undefined;
+  /** 选中关键帧，点击空白处时为 null */
+  onSelectPoint: (point: IKeyPoint | null) => void;
+  onPointChange: (id: string, patch: Partial<IKeyPoint>) => void;
+  onDeletePoint: (id: string) => void;
+  /** 点击轨道空白处、拖动关键帧时移动播放头 */
+  onScrub: (time: number) => void;
+}
+
+/**
+ * 一个属性的关键帧轨道：拖动关键帧调整时间，右键设置缓动或删除
+ */
+export function TrackLane(props: ITrackLaneProps) {
+  const { points, pxPerMs, width, selectedId } = props;
+  // useEaseTypeOptions 中的空值表示“默认”，v2 中缺省即为 easeInOut，这里直接显示实际的缓动
+  const easeLabels = new Map([...useEaseTypeOptions()].filter(([value]) => value !== ''));
+  const dragRef = useRef<{ id: string; startX: number; startTime: number } | null>(null);
+  const first = points[0];
+  const last = points[points.length - 1];
+
+  const handleKeyframePointerDown = (event: PointerEvent<HTMLDivElement>, point: IKeyPoint) => {
+    if (event.button !== 0) return;
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragRef.current = { id: point.id, startX: event.clientX, startTime: point.time };
+    props.onSelectPoint(point);
+  };
+
+  const handleKeyframePointerMove = (event: PointerEvent<HTMLDivElement>, point: IKeyPoint) => {
+    const drag = dragRef.current;
+    if (!drag || drag.id !== point.id) return;
+    const time = snapTime(drag.startTime + (event.clientX - drag.startX) / pxPerMs);
+    if (time !== point.time) {
+      props.onPointChange(point.id, { time });
+      props.onScrub(time);
+    }
+  };
+
+  return (
+    <div
+      className={styles.lane}
+      style={{ width }}
+      onPointerDown={(event) => {
+        if (event.button !== 0) return;
+        props.onSelectPoint(null);
+        props.onScrub(snapTime(xToTime(event.clientX - event.currentTarget.getBoundingClientRect().left, pxPerMs)));
+      }}
+    >
+      {points.length > 1 && (
+        <div
+          className={styles.span}
+          style={{ left: timeToX(first.time, pxPerMs), width: (last.time - first.time) * pxPerMs }}
+        />
+      )}
+      {points.map((point) => (
+        <Menu key={point.id} openOnContext>
+          <MenuTrigger disableButtonEnhancement>
+            <div
+              className={`${styles.keyframe} ${point.id === selectedId ? styles.selected : ''}`}
+              style={{ left: timeToX(point.time, pxPerMs) }}
+              title={`${point.time} ms`}
+              onPointerDown={(event) => handleKeyframePointerDown(event, point)}
+              onPointerMove={(event) => handleKeyframePointerMove(event, point)}
+              onPointerUp={() => {
+                dragRef.current = null;
+              }}
+            />
+          </MenuTrigger>
+          <MenuPopover>
+            <MenuList>
+              <Menu>
+                <MenuTrigger disableButtonEnhancement>
+                  <MenuItem secondaryContent={easeLabels.get(point.ease) ?? point.ease}>{t`缓动`}</MenuItem>
+                </MenuTrigger>
+                <MenuPopover>
+                  <MenuList
+                    checkedValues={{ ease: [point.ease] }}
+                    onCheckedValueChange={(_, data) => props.onPointChange(point.id, { ease: data.checkedItems[0] })}
+                  >
+                    <MenuGroup>
+                      <MenuGroupHeader>{t`从上一关键帧到此帧`}</MenuGroupHeader>
+                      {[...easeLabels].map(([value, label]) => (
+                        <MenuItemRadio key={value} name="ease" value={value}>{label}</MenuItemRadio>
+                      ))}
+                    </MenuGroup>
+                  </MenuList>
+                </MenuPopover>
+              </Menu>
+              <MenuItem icon={<DeleteRegular />} onClick={() => props.onDeletePoint(point.id)}>{t`删除关键帧`}</MenuItem>
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/buildTrackRow.ts b/packages/origine2/src/pages/editor/AnimationEditor/timeline/buildTrackRow.ts
new file mode 100644
index 000000000..d7876054d
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/buildTrackRow.ts
@@ -0,0 +1,80 @@
+import { IKeyPoint, ITrack } from '../model/animationDocument';
+import {
+  getDefaultRelativeCalc,
+  getNeutralValue,
+  getRelativeCalcOverride,
+  isRelative,
+  setRelativeCalc,
+} from '../model/animationSettings';
+import {
+  findLastPointAt,
+  removePoint,
+  removeTrack,
+  setValueAt,
+  updatePoint,
+  updatePoints,
+} from '../model/trackOperations';
+import { sampleTrackValue } from '../model/trackSampling';
+import { IAnimationProperty } from '../model/useAnimationProperties';
+import { ITrackHeaderProps } from './TrackHeader';
+import { ITrackLaneProps } from './TrackLane';
+
+type Updater<T> = (update: (value: T) => T) => void;
+
+export interface ITrackRowContext {
+  fields: Record<string, unknown>;
+  time: number;
+  pxPerMs: number;
+  laneWidth: number;
+  /** 选中的关键帧 */
+  selected: { path: string; id: string } | null;
+  getProperty: (path: string) => IAnimationProperty;
+  updateTracks: Updater<ITrack[]>;
+  updateFields: Updater<Record<string, unknown>>;
+  onSelectPoint: (path: string, point: IKeyPoint | null) => void;
+  onScrub: (time: number) => void;
+}
+
+/**
+ * 时间轴中一个属性对应的两部分：左侧属性栏与右侧关键帧轨道。
+ * 两者分别位于不同的滚动区域，这里统一生成它们的 props。
+ * 没有码表开关，所有属性都相当于开启了码表：在播放头处修改值就会在此处设置关键帧
+ */
+export function buildTrackRow(track: ITrack, context: ITrackRowContext) {
+  const { fields, time, getProperty } = context;
+  const { path, points } = track;
+  const property = getProperty(path);
+  const value = sampleTrackValue(points, time, getNeutralValue(fields, path, property.defaultValue));
+  // 关键帧放在整毫秒上；暂停、拖动后播放头都已对齐，这里只是兜底
+  const keyTime = Math.round(time);
+  const keyframe = findLastPointAt(points, keyTime);
+  const updateOwnPoints = (update: (points: IKeyPoint[]) => IKeyPoint[]) =>
+    context.updateTracks((tracks) => updatePoints(tracks, path, update));
+
+  const header: ITrackHeaderProps = {
+    property,
+    value,
+    hasKeyframe: keyframe !== undefined,
+    onValueChange: (newValue) => updateOwnPoints((prev) => setValueAt(prev, keyTime, newValue)),
+    onToggleKeyframe: () =>
+      updateOwnPoints((prev) => (keyframe ? removePoint(prev, keyframe.id) : setValueAt(prev, keyTime, value))),
+    relativeCalc: isRelative(fields)
+      ? { override: getRelativeCalcOverride(fields, path), default: getDefaultRelativeCalc(path) }
+      : null,
+    onRelativeCalcChange: (calc) => context.updateFields((prev) => setRelativeCalc(prev, path, calc)),
+    onRemove: () => context.updateTracks((tracks) => removeTrack(tracks, path)),
+  };
+
+  const lane: ITrackLaneProps = {
+    points,
+    pxPerMs: context.pxPerMs,
+    width: context.laneWidth,
+    selectedId: context.selected?.path === path ? context.selected.id : undefined,
+    onSelectPoint: (point) => context.onSelectPoint(path, point),
+    onPointChange: (id, patch) => updateOwnPoints((prev) => updatePoint(prev, id, patch)),
+    onDeletePoint: (id) => updateOwnPoints((prev) => removePoint(prev, id)),
+    onScrub: context.onScrub,
+  };
+
+  return { header, lane };
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/timeline.module.scss b/packages/origine2/src/pages/editor/AnimationEditor/timeline/timeline.module.scss
new file mode 100644
index 000000000..ed0123c7d
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/timeline.module.scss
@@ -0,0 +1,226 @@
+// 左侧属性栏的宽度
+$header-width: 248px;
+$row-height: 28px;
+$ruler-height: 24px;
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--bg-card);
+  outline: none;
+}
+
+.toolbar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 32px;
+  padding: 0 8px;
+  border-bottom: var(--border-sm);
+}
+
+.time {
+  margin-left: 8px;
+  font-size: 12px;
+  color: var(--text-sub);
+  font-variant-numeric: tabular-nums;
+}
+
+.zoom {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  color: var(--text-weak);
+}
+
+// 左上角空白、刻度尺、属性栏、轨道区域四块。只有轨道区域滚动，其余随它同步
+.body {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: $header-width minmax(0, 1fr);
+  grid-template-rows: $ruler-height minmax(0, 1fr);
+}
+
+.corner {
+  border-right: var(--border-sm);
+  border-bottom: var(--border-sm);
+}
+
+// 与轨道区域保留同样宽的滚动条槽，两边横向滚动到底时才能对齐
+.rulerViewport,
+.lanes {
+  scrollbar-gutter: stable;
+}
+
+.rulerViewport {
+  overflow: hidden;
+  border-bottom: var(--border-sm);
+}
+
+.headers {
+  overflow: hidden;
+  border-right: var(--border-sm);
+
+  // 轨道区域底部有横向滚动条，属性栏多留一段，纵向滚动到底时才能对齐
+  &::after {
+    content: '';
+    display: block;
+    height: 20px;
+  }
+}
+
+.lanes {
+  overflow: auto;
+}
+
+.lanesContent {
+  position: relative;
+  min-height: 100%;
+}
+
+.ruler {
+  position: relative;
+  height: 100%;
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+}
+
+// 刻度是立在刻度尺底边上的短线，数字在它正上方
+.tick {
+  position: absolute;
+  bottom: 0;
+  height: 5px;
+  border-left: 1px solid var(--black-35pct);
+}
+
+.tickLabel {
+  position: absolute;
+  bottom: 5px;
+  left: 0;
+  transform: translateX(-50%);
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--text-weak);
+  white-space: nowrap;
+}
+
+// 播放头的头部尖端落在刻度尺底边上，与轨道区域中的播放头竖线相接
+.playheadHandle {
+  position: absolute;
+  bottom: 0;
+  width: 11px;
+  height: 12px;
+  margin-left: -5px;
+  background: var(--primary);
+  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
+  pointer-events: none;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: $row-height;
+  padding: 0 4px 0 12px;
+}
+
+.header:hover,
+.lane:hover {
+  background: var(--black-5pct);
+}
+
+.trackLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: var(--text);
+}
+
+.valueInput {
+  flex: none;
+  width: 80px;
+  min-width: 0;
+}
+
+.keyframeOn {
+  color: var(--primary);
+}
+
+// 不常用的操作，悬停在这一行时才显示
+.moreButton {
+  opacity: 0;
+
+  .header:hover &,
+  &:focus-visible,
+  &[aria-expanded='true'] {
+    opacity: 1;
+  }
+}
+
+.lane {
+  position: relative;
+  height: $row-height;
+}
+
+.laneSpacer {
+  height: $row-height;
+}
+
+// 第一个到最后一个关键帧之间的连线，表示这个属性在变化
+.span {
+  position: absolute;
+  top: 50%;
+  height: 2px;
+  margin-top: -1px;
+  border-radius: 1px;
+  background: var(--black-10pct);
+}
+
+.keyframe {
+  position: absolute;
+  top: 50%;
+  width: 9px;
+  height: 9px;
+  margin: -4.5px 0 0 -4.5px;
+  border-radius: 1px;
+  transform: rotate(45deg);
+  background: var(--text-sub);
+  cursor: ew-resize;
+
+  // 扩大点击范围
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -4px;
+  }
+
+  &:hover {
+    background: var(--text);
+  }
+
+  &.selected {
+    background: var(--primary);
+  }
+}
+
+.playhead {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 1px;
+  background: var(--primary);
+  pointer-events: none;
+}
+
+.addPropertyPopover {
+  max-height: 360px;
+  overflow-y: auto;
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/timelineLayout.ts b/packages/origine2/src/pages/editor/AnimationEditor/timeline/timelineLayout.ts
new file mode 100644
index 000000000..9fffa1696
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/timelineLayout.ts
@@ -0,0 +1,37 @@
+/** 0 时刻距轨道左端的距离，留出位置让 0 时刻的播放头、关键帧完整显示 */
+const TIME_ORIGIN = 12;
+
+/** 拖动播放头、关键帧时吸附的时间间隔（毫秒） */
+const TIME_SNAP = 10;
+
+/** 动画结束后，时间轴再多显示的时长（毫秒），便于把关键帧往后拖 */
+export const TIMELINE_TAIL = 1000;
+
+export const MIN_PX_PER_MS = 0.05;
+export const MAX_PX_PER_MS = 4;
+export const DEFAULT_PX_PER_MS = 0.4;
+
+/** 时刻在轨道中的横坐标 */
+export function timeToX(time: number, pxPerMs: number): number {
+  return TIME_ORIGIN + time * pxPerMs;
+}
+
+/** 轨道中的横坐标对应的时刻 */
+export function xToTime(x: number, pxPerMs: number): number {
+  return (x - TIME_ORIGIN) / pxPerMs;
+}
+
+export function snapTime(time: number): number {
+  return Math.max(0, Math.round(time / TIME_SNAP) * TIME_SNAP);
+}
+
+export function clampZoom(pxPerMs: number): number {
+  return Math.min(MAX_PX_PER_MS, Math.max(MIN_PX_PER_MS, pxPerMs));
+}
+
+/**
+ * 按精度显示数值，并去掉末尾多余的 0
+ */
+export function formatValue(value: number, precision: number): string {
+  return Number(value.toFixed(precision)).toString();
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/useElementWidth.ts b/packages/origine2/src/pages/editor/AnimationEditor/timeline/useElementWidth.ts
new file mode 100644
index 000000000..c333c63fe
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/useElementWidth.ts
@@ -0,0 +1,15 @@
+import { RefObject, useEffect, useState } from 'react';
+
+export function useElementWidth(ref: RefObject<HTMLElement>) {
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref]);
+
+  return width;
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/usePlayback.ts b/packages/origine2/src/pages/editor/AnimationEditor/timeline/usePlayback.ts
new file mode 100644
index 000000000..99f3f9df4
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/usePlayback.ts
@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * 播放控制：从播放头处开始播放，播放到结尾时停止或从头循环
+ * @param setTime 必须是稳定的函数（如 useState 的 setter）
+ */
+export function usePlayback(duration: number, time: number, setTime: (time: number) => void) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isLoop, setIsLoop] = useState(false);
+  const timeRef = useRef(time);
+  timeRef.current = time;
+
+  useEffect(() => {
+    if (!isPlaying) return;
+    // 播放中删光了关键帧
+    if (duration <= 0) {
+      setIsPlaying(false);
+      return;
+    }
+    // 播放头在结尾时从头播放
+    const startTime = timeRef.current >= duration ? 0 : timeRef.current;
+    const startedAt = performance.now();
+    let frameId = 0;
+    const tick = (now: number) => {
+      // rAF 给出的是本帧开始的时间，可能早于上面取的 startedAt，不能让时间变成负数
+      const elapsed = startTime + Math.max(0, now - startedAt);
+      if (elapsed >= duration && !isLoop) {
+        setTime(duration);
+        setIsPlaying(false);
+        return;
+      }
+      setTime(elapsed % duration);
+      frameId = requestAnimationFrame(tick);
+    };
+    frameId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frameId);
+  }, [isPlaying, isLoop, duration, setTime]);
+
+  /** 暂停时把播放头对齐到整毫秒，方便在此处添加关键帧 */
+  const pause = useCallback(() => {
+    setIsPlaying(false);
+    setTime(Math.round(timeRef.current));
+  }, [setTime]);
+
+  const togglePlay = useCallback(() => {
+    if (isPlaying) pause();
+    else if (duration > 0) setIsPlaying(true);
+  }, [isPlaying, duration, pause]);
+
+  return { isPlaying, isLoop, setIsLoop, pause, togglePlay };
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/useTimelineZoom.ts b/packages/origine2/src/pages/editor/AnimationEditor/timeline/useTimelineZoom.ts
new file mode 100644
index 000000000..4fc4dab03
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/useTimelineZoom.ts
@@ -0,0 +1,44 @@
+import { RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { clampZoom, DEFAULT_PX_PER_MS, timeToX, xToTime } from './timelineLayout';
+
+const WHEEL_ZOOM_FACTOR = 1.15;
+
+/**
+ * 时间轴缩放（每毫秒多少像素）。Ctrl + 滚轮缩放时保持鼠标所指的时刻不动
+ * @param containerRef 在此区域内响应 Ctrl + 滚轮
+ * @param scrollerRef 横向滚动的轨道区域
+ */
+export function useTimelineZoom(containerRef: RefObject<HTMLElement>, scrollerRef: RefObject<HTMLElement>) {
+  const [pxPerMs, setPxPerMs] = useState(DEFAULT_PX_PER_MS);
+  const pxPerMsRef = useRef(pxPerMs);
+  pxPerMsRef.current = pxPerMs;
+  /** 缩放前鼠标所指的时刻及其在可视区域中的横坐标，缩放后据此调整滚动位置 */
+  const anchorRef = useRef<{ time: number; offsetX: number } | null>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const scroller = scrollerRef.current;
+    if (!container || !scroller) return;
+    const handleWheel = (event: WheelEvent) => {
+      if (!event.ctrlKey) return;
+      event.preventDefault();
+      const offsetX = Math.max(0, event.clientX - scroller.getBoundingClientRect().left);
+      anchorRef.current = { time: xToTime(scroller.scrollLeft + offsetX, pxPerMsRef.current), offsetX };
+      const factor = event.deltaY < 0 ? WHEEL_ZOOM_FACTOR : 1 / WHEEL_ZOOM_FACTOR;
+      setPxPerMs(clampZoom(pxPerMsRef.current * factor));
+    };
+    // 需要 preventDefault 阻止浏览器缩放页面，因此不能用 passive 监听
+    container.addEventListener('wheel', handleWheel, { passive: false });
+    return () => container.removeEventListener('wheel', handleWheel);
+  }, [containerRef, scrollerRef]);
+
+  useLayoutEffect(() => {
+    const anchor = anchorRef.current;
+    const scroller = scrollerRef.current;
+    if (!anchor || !scroller) return;
+    scroller.scrollLeft = timeToX(anchor.time, pxPerMs) - anchor.offsetX;
+    anchorRef.current = null;
+  }, [pxPerMs, scrollerRef]);
+
+  return { pxPerMs, setPxPerMs: (value: number) => setPxPerMs(clampZoom(value)) };
+}
diff --git a/packages/origine2/src/pages/editor/MainArea/EditorToolbar.tsx b/packages/origine2/src/pages/editor/MainArea/EditorToolbar.tsx
index dd67ecd44..7c89835d6 100644
--- a/packages/origine2/src/pages/editor/MainArea/EditorToolbar.tsx
+++ b/packages/origine2/src/pages/editor/MainArea/EditorToolbar.tsx
@@ -5,7 +5,10 @@ import {eventBus} from "@/utils/eventBus";
 import {useGameEditorContext} from '@/store/useGameEditorStore';
 import { t } from '@lingui/macro';
 
-export default function EditorToolbar() {
+/**
+ * @param showSceneInfo 是否显示调试器与字数统计，编辑场景以外的文件时不需要
+ */
+export default function EditorToolbar({ showSceneInfo = true }: { showSceneInfo?: boolean }) {
   const isCodeMode = useGameEditorContext((state) => state.isCodeMode);
   const isShowDebugger = useGameEditorContext((state)=> state.isShowDebugger);
   const updateIsCodeMode = useGameEditorContext((state)=> state.updateIsCodeMode);
@@ -44,14 +47,16 @@ export default function EditorToolbar() {
   };
 
   return <div className={s.toolbar}>
-    <div className={s.toolbar_button+ ' ' + (isShowDebugger  ? s.toolbar_button_active : '')} onClick={()=>switchDebugger()}>
-      <Terminal theme="outline" size="20" fill={isShowDebugger ? 'var(--primary)' : "var(--text)"} strokeWidth={3}/>
-      DEBUGGER
-    </div>
-    <div className={s.toolbar_button}>
-      <DataSheet theme="outline" size="20" fill="var(--text)" strokeWidth={3}/>
-      {lineNumString} {t`行脚本`}, {textNumString} {t`个字`}
-    </div>
+    {showSceneInfo && <>
+      <div className={s.toolbar_button+ ' ' + (isShowDebugger  ? s.toolbar_button_active : '')} onClick={()=>switchDebugger()}>
+        <Terminal theme="outline" size="20" fill={isShowDebugger ? 'var(--primary)' : "var(--text)"} strokeWidth={3}/>
+        DEBUGGER
+      </div>
+      <div className={s.toolbar_button}>
+        <DataSheet theme="outline" size="20" fill="var(--text)" strokeWidth={3}/>
+        {lineNumString} {t`行脚本`}, {textNumString} {t`个字`}
+      </div>
+    </>}
     <div onClick={handleSetCodeMode} className={s.toolbar_button + ' ' + (isCodeMode ? s.toolbar_button_active : '')}
       style={{marginLeft: 'auto'}}>
       <FileCodeOne theme="outline" size="20" fill={isCodeMode ? 'var(--primary)' : "var(--text)"} strokeWidth={3}/>
diff --git a/packages/origine2/src/pages/editor/ResourceDisplay/JsonResourceDisplay/JsonResourceDisplay.tsx b/packages/origine2/src/pages/editor/ResourceDisplay/JsonResourceDisplay/JsonResourceDisplay.tsx
index 556578e9c..dc5f22eea 100644
--- a/packages/origine2/src/pages/editor/ResourceDisplay/JsonResourceDisplay/JsonResourceDisplay.tsx
+++ b/packages/origine2/src/pages/editor/ResourceDisplay/JsonResourceDisplay/JsonResourceDisplay.tsx
@@ -4,12 +4,19 @@ import axios from 'axios';
 import { api } from '@/api';
 import useEditorStore from '@/store/useEditorStore';
 
-export function JsonResourceDisplay(props: { url: string }) {
-  const { url } = props;
-  const fileResp = useSWR(`json-${url}`, async () => {
+/**
+ * 以文本形式读取 JSON 文件，代码编辑器与动画编辑器共用同一份缓存
+ */
+export function useJsonFileText(url: string) {
+  return useSWR(`json-${url}`, async () => {
     const resp = await axios.get(url, { responseType: 'text', transformResponse: [(data) => data] });
     return resp.data as string;
   });
+}
+
+export function JsonResourceDisplay(props: { url: string }) {
+  const { url } = props;
+  const fileResp = useJsonFileText(url);
 
   const isDarkMode = useEditorStore.use.isDarkMode();
 
diff --git a/packages/origine2/src/pages/editor/ResourceDisplay/ResourceDisplay.tsx b/packages/origine2/src/pages/editor/ResourceDisplay/ResourceDisplay.tsx
index 8dc7af923..57b2e0765 100644
--- a/packages/origine2/src/pages/editor/ResourceDisplay/ResourceDisplay.tsx
+++ b/packages/origine2/src/pages/editor/ResourceDisplay/ResourceDisplay.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styles from "./resourceDisplay.module.scss";
-import {JsonResourceDisplay} from "@/pages/editor/ResourceDisplay/JsonResourceDisplay/JsonResourceDisplay";
+import {AnimationFileEditor} from "@/pages/editor/AnimationEditor/AnimationFileEditor";
 
 export enum ResourceType {
   Image = "image",
@@ -36,7 +36,7 @@ function getComponent(resourceType: ResourceType, resourceUrl: string) {
       </audio>
     );
   case ResourceType.Animation:
-    return () => <JsonResourceDisplay url={url} />;
+    return () => <AnimationFileEditor url={url} />;
   default:
     return () => <div>Invalid resource type</div>;
   }
diff --git a/packages/origine2/src/utils/editorPreviewClient.ts b/packages/origine2/src/utils/editorPreviewClient.ts
index 32a0082bd..17fd9a44a 100644
--- a/packages/origine2/src/utils/editorPreviewClient.ts
+++ b/packages/origine2/src/utils/editorPreviewClient.ts
@@ -138,9 +138,17 @@ function handleIncomingMessage(rawData: unknown) {
     return;
   }
 
-  if (isHostEventEnvelope(envelope)) {
-    consumeHostEvent(envelope);
+  if (!isHostEventEnvelope(envelope)) {
+    return;
+  }
+
+  // 独占预览的事件只交给持有它的编辑器组件，不影响主预览的状态
+  if (envelope.embeddedLaunchId) {
+    eventBus.emit('editor-preview:dedicated-event', envelope);
+    return;
   }
+
+  consumeHostEvent(envelope);
 }
 
 function bindLifecycleEvents() {
@@ -259,9 +267,13 @@ function ensureEditorPreviewClientStarted() {
   editorPreviewTransport.connect();
 }
 
+/**
+ * @param embeddedLaunchId 指定时只发给这个独占预览，见 DEDICATED_PREVIEW_LAUNCH_ID_PREFIX
+ */
 function sendPreviewCommand<TType extends PreviewCommandType>(
   type: TType,
   payload: RequestPayloadByType[TType],
+  embeddedLaunchId?: string,
 ): boolean {
   ensureEditorPreviewClientStarted();
   editorPreviewTransport?.ensureConnected();
@@ -269,7 +281,7 @@ function sendPreviewCommand<TType extends PreviewCommandType>(
     return false;
   }
 
-  return editorPreviewTransport.send(createRequestEnvelope(type, createId(), payload));
+  return editorPreviewTransport.send({ ...createRequestEnvelope(type, createId(), payload), embeddedLaunchId });
 }
 
 export class EditorPreviewClient {
@@ -356,6 +368,14 @@ export class EditorPreviewClient {
     return sendPreviewCommand('preview.command.set-component-visibility', payload);
   }
 
+  public static sendToDedicatedPreview<TType extends PreviewCommandType>(
+    embeddedLaunchId: string,
+    type: TType,
+    payload: RequestPayloadByType[TType],
+  ) {
+    return sendPreviewCommand(type, payload, embeddedLaunchId);
+  }
+
   public static getPreviewQueryCapabilityState() {
     return queryCapabilityState;
   }
diff --git a/packages/origine2/src/utils/eventBus.ts b/packages/origine2/src/utils/eventBus.ts
index 46aba66a7..ecdfd4e5b 100644
--- a/packages/origine2/src/utils/eventBus.ts
+++ b/packages/origine2/src/utils/eventBus.ts
@@ -1,7 +1,9 @@
 import mitt from 'mitt';
 import type { ReactNode } from 'react';
 import type {
+  EventEnvelopeByType,
   FastPreviewTimeoutPayload,
+  HostEventType,
   PreviewReadyUpdatedPayload,
   StageSnapshotUpdatedPayload,
 } from '@webgal/editor-preview-protocol';
@@ -70,6 +72,8 @@ interface EditorPreviewEvents {
   'editor-preview:ready': PreviewReadyUpdatedPayload;
   'editor-preview:stage-snapshot': { snapshot: StageSnapshotUpdatedPayload };
   'editor-preview:fast-preview-timeout': { payload: FastPreviewTimeoutPayload };
+  /** 独占预览发出的事件，embeddedLaunchId 标明来源 */
+  'editor-preview:dedicated-event': EventEnvelopeByType<HostEventType>;
 }
 
 type Events = Record<PropertyKey, unknown> & IframeEvents & EditorEvents & EditorPreviewEvents;
diff --git a/packages/terre2/src/Modules/websocket/editorPreviewHost.spec.ts b/packages/terre2/src/Modules/websocket/editorPreviewHost.spec.ts
index cf3ad620f..239e87138 100644
--- a/packages/terre2/src/Modules/websocket/editorPreviewHost.spec.ts
+++ b/packages/terre2/src/Modules/websocket/editorPreviewHost.spec.ts
@@ -170,6 +170,89 @@ describe('EditorPreviewHost', () => {
     ]);
   });
 
+  it('keeps dedicated previews out of broadcasts and routes targeted commands and events by launch id', () => {
+    const forwardedPreviewCommands: unknown[] = [];
+    const host = new EditorPreviewHost({
+      forwardPreviewCommandToLegacy: (envelope) => {
+        forwardedPreviewCommands.push(envelope);
+      },
+    });
+    const editorSocket = new MockSocket(EDITOR_PREVIEW_PROTOCOL_V1_SUBPROTOCOL);
+    const embeddedPreviewSocket = new MockSocket(
+      EDITOR_PREVIEW_PROTOCOL_V1_SUBPROTOCOL,
+    );
+    const dedicatedPreviewSocket = new MockSocket(
+      EDITOR_PREVIEW_PROTOCOL_V1_SUBPROTOCOL,
+    );
+    const dedicatedLaunchId = 'dedicated:animation-1';
+
+    connectV1Client(host, editorSocket);
+    connectV1Client(host, embeddedPreviewSocket);
+    connectV1Client(host, dedicatedPreviewSocket);
+    registerPreview(host, embeddedPreviewSocket, {
+      gameId: 'game-key-1',
+      embeddedLaunchId: 'embedded-launch-1',
+    });
+    registerPreview(host, dedicatedPreviewSocket, {
+      gameId: 'game-key-1',
+      embeddedLaunchId: dedicatedLaunchId,
+    });
+    clearSentMessages(
+      editorSocket,
+      embeddedPreviewSocket,
+      dedicatedPreviewSocket,
+    );
+
+    const broadcastRequest = createRequestEnvelope(
+      'preview.command.run-snippet',
+      'req-broadcast',
+      { snippet: 'wait:1;' },
+    );
+    host.handleMessage(editorSocket as never, JSON.stringify(broadcastRequest));
+    expect(embeddedPreviewSocket.sentMessages).toEqual([
+      JSON.stringify(broadcastRequest),
+    ]);
+    expect(dedicatedPreviewSocket.sentMessages).toHaveLength(0);
+
+    clearSentMessages(editorSocket, embeddedPreviewSocket);
+    forwardedPreviewCommands.length = 0;
+    const targetedRequest = {
+      ...createRequestEnvelope('preview.command.seek-animation', 'req-seek', {
+        target: 'fig-center',
+        animation: [],
+        time: 0,
+      }),
+      embeddedLaunchId: dedicatedLaunchId,
+    };
+    host.handleMessage(editorSocket as never, JSON.stringify(targetedRequest));
+    expect(dedicatedPreviewSocket.sentMessages).toEqual([
+      JSON.stringify(targetedRequest),
+    ]);
+    expect(embeddedPreviewSocket.sentMessages).toHaveLength(0);
+    expect(forwardedPreviewCommands).toHaveLength(0);
+    expect(editorSocket.sentMessages).toEqual([
+      JSON.stringify(
+        createResponseEnvelope(
+          'preview.command.seek-animation',
+          'req-seek',
+          {},
+        ),
+      ),
+    ]);
+
+    clearSentMessages(editorSocket);
+    const readyEvent = createEventEnvelope('preview.ready.updated', {
+      ready: true,
+    });
+    host.handleMessage(
+      dedicatedPreviewSocket as never,
+      JSON.stringify(readyEvent),
+    );
+    expect(editorSocket.sentMessages).toEqual([
+      JSON.stringify({ ...readyEvent, embeddedLaunchId: dedicatedLaunchId }),
+    ]);
+  });
+
   it('routes preview queries only to the active embedded preview and returns its response to the editor', () => {
     const forwardedPreviewCommands: unknown[] = [];
     const host = new EditorPreviewHost({
diff --git a/packages/terre2/src/Modules/websocket/editorPreviewHost.ts b/packages/terre2/src/Modules/websocket/editorPreviewHost.ts
index 54c3999e3..f815577f7 100644
--- a/packages/terre2/src/Modules/websocket/editorPreviewHost.ts
+++ b/packages/terre2/src/Modules/websocket/editorPreviewHost.ts
@@ -5,6 +5,7 @@ import {
   createResponseEnvelope,
   EDITOR_PREVIEW_PROTOCOL_V1_SUBPROTOCOL,
   SESSION_REGISTER_PREVIEW_TYPE,
+  isDedicatedPreviewLaunchId,
   isPreviewCommandRequestEnvelope,
   isKnownPreviewRequestErrorEnvelope,
   isKnownProtocolEnvelope,
@@ -260,9 +261,12 @@ function getLegacySyncMessage(payload: SyncScenePayload): string {
   );
 }
 
+/**
+ * 把命令翻译为旧版调试消息；旧版没有对应命令时返回 null
+ */
 function translatePreviewCommandToLegacyEnvelope(
   envelope: PreviewCommandRequestEnvelope,
-): LegacyDebugEnvelope {
+): LegacyDebugEnvelope | null {
   switch (envelope.type) {
     case 'preview.command.sync-scene':
       return createLegacyDebugEnvelope(LEGACY_DEBUG_COMMAND.JUMP, {
@@ -318,6 +322,8 @@ function translatePreviewCommandToLegacyEnvelope(
       return createLegacyDebugEnvelope(LEGACY_DEBUG_COMMAND.SET_EFFECT, {
         message: JSON.stringify(envelope.payload),
       });
+    case 'preview.command.seek-animation':
+      return null;
   }
 }
 
@@ -333,6 +339,9 @@ export class EditorPreviewHost {
 
   private activeEmbeddedPreview: WebSocket | null = null;
 
+  /** 独占预览，键为 embeddedLaunchId */
+  private readonly dedicatedPreviews = new Map<string, WebSocket>();
+
   private activeGameId: string | undefined;
 
   public acceptConnection(
@@ -361,6 +370,12 @@ export class EditorPreviewHost {
 
     this.v1Connections.delete(client);
     this.rejectPendingQueriesForDisconnectedSocket(client);
+    if (
+      removedState.embeddedLaunchId &&
+      this.dedicatedPreviews.get(removedState.embeddedLaunchId) === client
+    ) {
+      this.dedicatedPreviews.delete(removedState.embeddedLaunchId);
+    }
     if (this.activeEmbeddedPreview === client) {
       this.activeEmbeddedPreview = null;
       this.activeGameId = undefined;
@@ -435,7 +450,9 @@ export class EditorPreviewHost {
     connectionState.gameId = payload.gameId;
     connectionState.embeddedLaunchId = payload.embeddedLaunchId;
 
-    if (payload.embeddedLaunchId) {
+    if (isDedicatedPreviewLaunchId(payload.embeddedLaunchId)) {
+      this.dedicatedPreviews.set(payload.embeddedLaunchId, client);
+    } else if (payload.embeddedLaunchId) {
       this.activeEmbeddedPreview = client;
       this.activeGameId = payload.gameId;
     }
@@ -457,6 +474,21 @@ export class EditorPreviewHost {
   ) {
     connectionState.role = 'editor';
 
+    // 指定了独占预览的命令只发给它
+    if (envelope.embeddedLaunchId) {
+      const dedicatedPreview = this.dedicatedPreviews.get(
+        envelope.embeddedLaunchId,
+      );
+      if (dedicatedPreview) {
+        sendEnvelope(dedicatedPreview, envelope);
+      }
+      sendEnvelope(
+        client,
+        createResponseEnvelope(envelope.type, envelope.requestId, {}),
+      );
+      return;
+    }
+
     for (const [previewSocket, previewState] of this.v1Connections) {
       if (!this.isActivePreview(previewSocket, previewState)) {
         continue;
@@ -581,6 +613,14 @@ export class EditorPreviewHost {
     connectionState: V1ConnectionState,
     envelope: ForwardedHostEventEnvelope,
   ) {
+    if (isDedicatedPreviewLaunchId(connectionState.embeddedLaunchId)) {
+      this.forwardHostEventToEditors({
+        ...envelope,
+        embeddedLaunchId: connectionState.embeddedLaunchId,
+      });
+      return;
+    }
+
     if (!this.isActivePreview(client, connectionState)) {
       return;
     }
@@ -596,6 +636,11 @@ export class EditorPreviewHost {
       return false;
     }
 
+    // 独占预览不接收广播
+    if (isDedicatedPreviewLaunchId(connectionState.embeddedLaunchId)) {
+      return false;
+    }
+
     if (this.activeEmbeddedPreview === client) {
       return true;
     }
@@ -628,6 +673,9 @@ export class LegacyEditorPreviewAdapter {
 
   public forwardPreviewCommand(envelope: PreviewCommandRequestEnvelope) {
     const legacyEnvelope = translatePreviewCommandToLegacyEnvelope(envelope);
+    if (!legacyEnvelope) {
+      return;
+    }
     const serializedMessage = JSON.stringify(legacyEnvelope);
     for (const socket of this.connections) {
       socket.send(serializedMessage);

From 55103f477994d1532fd958abc134072e86aa07b6 Mon Sep 17 00:00:00 2001
From: Mahiru <Mahiru_@outlook.com>
Date: Sun, 4 Oct 2026 15:24:00 +0800
Subject: [PATCH 05/12] =?UTF-8?q?=E8=BF=81=E7=A7=BB=20v2=20=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=EF=BC=8C=E8=B0=83=E6=95=B4=E5=8A=A8=E7=94=BB=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E6=A0=B7=E5=BC=8F=EF=BC=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../origine2/src/components/Assets/Assets.tsx |   2 +-
 .../src/hooks/useHiddenAnimationFiles.ts      |  38 ++++++
 .../preview/previewSettings.ts                |  26 +++-
 .../settings/AnimationSettingsPanel.tsx       |  29 ++++-
 .../settings/InitialStateDrawer.tsx           |  42 +++++++
 .../animationSettingsPanel.module.scss        |  12 +-
 .../timeline/AddPropertyMenu.tsx              |  26 +++-
 .../timeline/AnimationTimeline.tsx            |  10 +-
 .../timeline/KeyframeMarker.tsx               | 119 ++++++++++++++++++
 .../timeline/TimelineToolbar.tsx              |  32 ++++-
 .../AnimationEditor/timeline/TrackHeader.tsx  |  26 ++--
 .../AnimationEditor/timeline/TrackLane.tsx    |  66 +++-------
 .../timeline/timeline.module.scss             |  38 +++++-
 .../SentenceEditor/SetAnimation.tsx           |   4 +-
 .../SentenceEditor/SetTransition.tsx          |   6 +-
 .../components/EffectEditor.tsx               |  26 ++--
 .../GraphicalEditor/components/TerrePanel.tsx |   4 +-
 .../game/animation/animationTable.json        |  19 ++-
 .../game/animation/blur-v2.json               |   9 ++
 .../game/animation/dotFilm-v2.json            |   9 ++
 .../game/animation/enter-from-bottom-v2.json  |  24 ++++
 .../game/animation/enter-from-left-v2.json    |  24 ++++
 .../game/animation/enter-from-right-v2.json   |  24 ++++
 .../game/animation/enter-v2.json              |  16 +++
 .../game/animation/exit-v2.json               |   9 ++
 .../game/animation/glitchFilm-v2.json         |   9 ++
 .../game/animation/godrayFilm-v2.json         |   9 ++
 .../animation/move-front-and-back-v2.json     |  19 +++
 .../game/animation/oldFilm-v2.json            |   9 ++
 .../game/animation/reflectionFilm-v2.json     |   9 ++
 .../game/animation/removeFilm-v2.json         |  14 +++
 .../game/animation/rgbFilm-v2.json            |   9 ++
 .../game/animation/shake-v2.json              |  26 ++++
 .../game/animation/shockwaveIn-v2.json        |  15 +++
 .../game/animation/shockwaveOut-v2.json       |  13 ++
 .../Modules/lsp/completion/fileSuggestion.ts  |  19 ++-
 36 files changed, 691 insertions(+), 100 deletions(-)
 create mode 100644 packages/origine2/src/hooks/useHiddenAnimationFiles.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/settings/InitialStateDrawer.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/KeyframeMarker.tsx
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/blur-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/dotFilm-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-bottom-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-left-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-right-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/exit-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/glitchFilm-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/godrayFilm-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/move-front-and-back-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/oldFilm-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/reflectionFilm-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/removeFilm-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/rgbFilm-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/shake-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveIn-v2.json
 create mode 100644 packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveOut-v2.json

diff --git a/packages/origine2/src/components/Assets/Assets.tsx b/packages/origine2/src/components/Assets/Assets.tsx
index f14b6b5d3..0d87a988c 100644
--- a/packages/origine2/src/components/Assets/Assets.tsx
+++ b/packages/origine2/src/components/Assets/Assets.tsx
@@ -68,7 +68,7 @@ export interface IFile {
   lastModified?: number;
 }
 
-interface IAssetsReadResponse {
+export interface IAssetsReadResponse {
   dirInfo?: IFile[];
 }
 
diff --git a/packages/origine2/src/hooks/useHiddenAnimationFiles.ts b/packages/origine2/src/hooks/useHiddenAnimationFiles.ts
new file mode 100644
index 000000000..09cc0ec0a
--- /dev/null
+++ b/packages/origine2/src/hooks/useHiddenAnimationFiles.ts
@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import axios from 'axios';
+import { api } from '@/api';
+import useEditorStore from '@/store/useEditorStore';
+import type { IAssetsReadResponse } from '@/components/Assets/Assets';
+
+/**
+ * 选择动画时需要隐藏的文件（相对于 animation 目录）：动画表，以及 v1 动画。
+ *
+ * v1 动画（顶层为关键帧数组）只为兼容旧脚本保留，不再推荐使用：资源管理器中照常显示，
+ * 但在明确选择动画的地方隐藏。只检查 animation 目录的第一层
+ */
+export function useHiddenAnimationFiles(): string[] {
+  const gameDir = useEditorStore.use.subPage();
+  const { data: v1Animations } = useSWR(`v1-animation-files-${gameDir}`, () => fetchV1AnimationFiles(gameDir));
+  return useMemo(() => ['animationTable.json', ...(v1Animations ?? [])], [v1Animations]);
+}
+
+async function fetchV1AnimationFiles(gameDir: string): Promise<string[]> {
+  const animationDir = `games/${gameDir}/game/animation`;
+  const res = await api.assetsControllerReadAssets(animationDir);
+  const { dirInfo = [] } = res.data as unknown as IAssetsReadResponse;
+  const animationFiles = dirInfo.filter(
+    (file) => !file.isDir && file.name.toLowerCase().endsWith('.json') && file.name !== 'animationTable.json',
+  );
+  const isV1List = await Promise.all(animationFiles.map((file) => isV1Animation(`/${animationDir}/${file.name}`)));
+  return animationFiles.filter((_, index) => isV1List[index]).map((file) => file.name);
+}
+
+async function isV1Animation(url: string): Promise<boolean> {
+  try {
+    const res = await axios.get(url);
+    return Array.isArray(res.data);
+  } catch {
+    return false;
+  }
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/preview/previewSettings.ts b/packages/origine2/src/pages/editor/AnimationEditor/preview/previewSettings.ts
index 64d2c937d..107b0d4b2 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/preview/previewSettings.ts
+++ b/packages/origine2/src/pages/editor/AnimationEditor/preview/previewSettings.ts
@@ -15,9 +15,20 @@ export interface IPreviewSettings {
   figurePosition: FigurePosition;
   /** 相对于 background 目录的文件名，空字符串表示不显示 */
   background: string;
+  /** 是否设置预览对象在动画开始前的状态 */
+  isInitialStateEnabled: boolean;
+  /** 预览对象在动画开始前的变换，格式同 -transform 参数的 JSON，空字符串表示默认状态 */
+  initialTransform: string;
 }
 
-const DEFAULT_SETTINGS: IPreviewSettings = { target: 'figure', figure: '', figurePosition: 'center', background: '' };
+const DEFAULT_SETTINGS: IPreviewSettings = {
+  target: 'figure',
+  figure: '',
+  figurePosition: 'center',
+  background: '',
+  isInitialStateEnabled: false,
+  initialTransform: '',
+};
 
 /** 预览立绘的 id，也是动画作用在立绘上时的目标 */
 const PREVIEW_FIGURE_ID = 'animation-preview';
@@ -42,16 +53,23 @@ export function usePreviewSettings() {
 }
 
 /**
- * 搭建预览舞台的场景：立即显示背景和立绘，不播放入场动画
+ * 搭建预览舞台的场景：立即显示背景和立绘，不播放入场动画。
+ * 设置了初始状态时写到预览对象上，相对动画以它为基准
  */
 export function buildPreviewScene(settings: IPreviewSettings): string {
+  const transformArg =
+    settings.isInitialStateEnabled && settings.initialTransform ? ` -transform=${settings.initialTransform}` : '';
   const lines: string[] = [];
   if (settings.background) {
-    lines.push(`changeBg:${settings.background} -duration=0 -next;`);
+    const bgTransformArg = settings.target === 'background' ? transformArg : '';
+    lines.push(`changeBg:${settings.background}${bgTransformArg} -duration=0 -next;`);
   }
   if (settings.figure) {
     const positionArg = settings.figurePosition === 'center' ? '' : ` -${settings.figurePosition}`;
-    lines.push(`changeFigure:${settings.figure} -id=${PREVIEW_FIGURE_ID}${positionArg} -duration=0 -next;`);
+    const figureTransformArg = settings.target === 'figure' ? transformArg : '';
+    lines.push(
+      `changeFigure:${settings.figure} -id=${PREVIEW_FIGURE_ID}${positionArg}${figureTransformArg} -duration=0 -next;`,
+    );
   }
   return lines.join('\n');
 }
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx b/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx
index cbf44ea2b..8bfa48108 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx
+++ b/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx
@@ -1,10 +1,11 @@
-import { memo, ReactNode } from 'react';
-import { Dropdown, Option, Switch } from '@fluentui/react-components';
+import { memo, ReactNode, useState } from 'react';
+import { Button, Dropdown, Option, Switch } from '@fluentui/react-components';
 import { t } from '@lingui/macro';
 import { InfoTip } from '../components/InfoTip';
 import { isInherit, isRelative } from '../model/animationSettings';
 import { FigurePosition, IPreviewSettings, PreviewTarget } from '../preview/previewSettings';
 import { FileSetting } from './FileSetting';
+import { InitialStateDrawer } from './InitialStateDrawer';
 import styles from './animationSettingsPanel.module.scss';
 
 interface IAnimationSettingsPanelProps {
@@ -15,7 +16,8 @@ interface IAnimationSettingsPanelProps {
 }
 
 /**
- * 与时间轴无关的设置：上半部分写入动画文件，下半部分只用于预览
+ * 与时间轴无关的设置：上半部分写入动画文件，下半部分只用于预览。
+ * 预览初始状态在抽屉中编辑，开启时自动打开
  */
 // 播放时每帧都会重新渲染编辑器，这里的内容与播放头无关，用 memo 跳过
 export const AnimationSettingsPanel = memo(SettingsPanel);
@@ -24,6 +26,7 @@ function SettingsPanel(props: IAnimationSettingsPanelProps) {
   const { fields, updateFields, preview, onPreviewChange } = props;
   const targetLabels: Record<PreviewTarget, string> = { figure: t`立绘`, background: t`背景` };
   const positionLabels: Record<FigurePosition, string> = { left: t`左`, center: t`中`, right: t`右` };
+  const [isInitialStateDrawerOpen, setIsInitialStateDrawerOpen] = useState(false);
 
   return (
     <div className={styles.panel}>
@@ -80,7 +83,27 @@ function SettingsPanel(props: IAnimationSettingsPanelProps) {
             onChange={(background) => onPreviewChange({ background })}
           />
         </SettingRow>
+        <SettingRow label={t`设置预览初始状态`} info={t`设置预览对象在动画开始前的状态，相对动画以此为基准`}>
+          <Switch
+            checked={preview.isInitialStateEnabled}
+            onChange={(_, data) => {
+              onPreviewChange({ isInitialStateEnabled: data.checked });
+              setIsInitialStateDrawerOpen(data.checked);
+            }}
+          />
+          {preview.isInitialStateEnabled && (
+            <Button size="small" onClick={() => setIsInitialStateDrawerOpen(true)}>
+              {t`编辑`}
+            </Button>
+          )}
+        </SettingRow>
       </Section>
+      <InitialStateDrawer
+        open={isInitialStateDrawerOpen}
+        onOpenChange={setIsInitialStateDrawerOpen}
+        json={preview.initialTransform}
+        onChange={(initialTransform) => onPreviewChange({ initialTransform })}
+      />
     </div>
   );
 }
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/settings/InitialStateDrawer.tsx b/packages/origine2/src/pages/editor/AnimationEditor/settings/InitialStateDrawer.tsx
new file mode 100644
index 000000000..d5c0c666e
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/settings/InitialStateDrawer.tsx
@@ -0,0 +1,42 @@
+import { Button, DrawerBody, DrawerHeader, DrawerHeaderTitle, OverlayDrawer } from '@fluentui/react-components';
+import { bundleIcon, Dismiss24Filled, Dismiss24Regular } from '@fluentui/react-icons';
+import { t } from '@lingui/macro';
+import { EffectEditor } from '@/pages/editor/GraphicalEditor/components/EffectEditor';
+
+const DismissIcon = bundleIcon(Dismiss24Filled, Dismiss24Regular);
+
+interface IInitialStateDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** 预览对象的初始变换，格式同 -transform 参数的 JSON */
+  json: string;
+  onChange: (json: string) => void;
+}
+
+/**
+ * 编辑预览对象在动画开始前的状态。样式与图形编辑器的 TerrePanel 一致：右侧抽屉，不遮挡预览
+ */
+export function InitialStateDrawer({ open, onOpenChange, json, onChange }: IInitialStateDrawerProps) {
+  return (
+    <OverlayDrawer
+      open={open}
+      onOpenChange={(_, data) => onOpenChange(data.open)}
+      position="end"
+      style={{ width: '750px' }}
+      backdrop={null}
+    >
+      <DrawerHeader>
+        <DrawerHeaderTitle
+          action={
+            <Button appearance="subtle" aria-label={t`关闭`} icon={<DismissIcon />} onClick={() => onOpenChange(false)} />
+          }
+        >
+          {t`预览初始状态`}
+        </DrawerHeaderTitle>
+      </DrawerHeader>
+      <DrawerBody>
+        <EffectEditor json={json} onChange={onChange} />
+      </DrawerBody>
+    </OverlayDrawer>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/settings/animationSettingsPanel.module.scss b/packages/origine2/src/pages/editor/AnimationEditor/settings/animationSettingsPanel.module.scss
index f2193bfaf..ded4b69c0 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/settings/animationSettingsPanel.module.scss
+++ b/packages/origine2/src/pages/editor/AnimationEditor/settings/animationSettingsPanel.module.scss
@@ -1,13 +1,13 @@
 .panel {
   height: 100%;
   overflow: auto;
-  padding: 8px 12px;
+  padding: 8px 16px;
   box-sizing: border-box;
   background: var(--bg-card);
 }
 
 .section + .section {
-  margin-top: 12px;
+  margin-top: 16px;
 }
 
 .sectionTitle {
@@ -24,7 +24,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  min-height: 32px;
+  min-height: 40px;
 }
 
 .label {
@@ -32,7 +32,9 @@
   align-items: center;
   gap: 4px;
   flex: none;
-  width: 88px;
+  // 较长的名称（如“设置预览初始状态”）不换行，向右撑开
+  min-width: 88px;
+  white-space: nowrap;
   color: var(--text-sub);
 }
 
@@ -56,8 +58,8 @@
   gap: 6px;
 }
 
+// 文件名只占自身宽度，清除、选择按钮紧跟在后面
 .fileName {
-  flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/AddPropertyMenu.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/AddPropertyMenu.tsx
index 91d90ed28..027f491fd 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/timeline/AddPropertyMenu.tsx
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/AddPropertyMenu.tsx
@@ -1,4 +1,4 @@
-import { Button, Menu, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components';
+import { Menu, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components';
 import { AddRegular } from '@fluentui/react-icons';
 import { t } from '@lingui/macro';
 import { useAnimationProperties } from '../model/useAnimationProperties';
@@ -10,19 +10,33 @@ interface IAddPropertyMenuProps {
   onAdd: (path: string) => void;
 }
 
+/**
+ * 属性栏最后一行，整行就是按钮，点击后选择要添加的属性
+ */
 export function AddPropertyMenu({ shownPaths, onAdd }: IAddPropertyMenuProps) {
   const { groups } = useAnimationProperties();
   const availableGroups = groups
     .map((group) => ({ ...group, properties: group.properties.filter((property) => !shownPaths.includes(property.path)) }))
     .filter((group) => group.properties.length > 0);
 
+  const row = (
+    <div
+      className={`${styles.header} ${styles.addPropertyRow}`}
+      role="button"
+      tabIndex={0}
+      aria-disabled={availableGroups.length === 0}
+    >
+      <AddRegular className={styles.addPropertyIcon} />
+      {t`添加属性`}
+    </div>
+  );
+
+  // 所有属性都已添加时仍保留这一行，使属性栏与轨道区域等高
+  if (availableGroups.length === 0) return row;
+
   return (
     <Menu>
-      <MenuTrigger disableButtonEnhancement>
-        <Button size="small" appearance="subtle" icon={<AddRegular />} disabled={availableGroups.length === 0}>
-          {t`添加属性`}
-        </Button>
-      </MenuTrigger>
+      <MenuTrigger>{row}</MenuTrigger>
       <MenuPopover className={styles.addPropertyPopover}>
         <MenuList>
           {availableGroups.map((group) => (
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/AnimationTimeline.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/AnimationTimeline.tsx
index 38ce59dcf..262a876a7 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/timeline/AnimationTimeline.tsx
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/AnimationTimeline.tsx
@@ -113,12 +113,10 @@ export function AnimationTimeline({ doc, updateTracks, updateFields, time, onTim
           }}
         >
           {rows.map(({ path, header }) => <TrackHeader key={path} {...header} />)}
-          <div className={styles.header}>
-            <AddPropertyMenu
-              shownPaths={doc.tracks.map((track) => track.path)}
-              onAdd={(path) => updateTracks((tracks) => addTrack(tracks, path))}
-            />
-          </div>
+          <AddPropertyMenu
+            shownPaths={doc.tracks.map((track) => track.path)}
+            onAdd={(path) => updateTracks((tracks) => addTrack(tracks, path))}
+          />
         </div>
         <div ref={lanesRef} className={styles.lanes} onScroll={syncScroll}>
           <div className={styles.lanesContent} style={{ width: laneWidth }}>
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/KeyframeMarker.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/KeyframeMarker.tsx
new file mode 100644
index 000000000..8210641b4
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/KeyframeMarker.tsx
@@ -0,0 +1,119 @@
+import { HTMLAttributes, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Menu,
+  MenuGroup,
+  MenuGroupHeader,
+  MenuItem,
+  MenuItemRadio,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+  Tooltip,
+} from '@fluentui/react-components';
+import { DeleteRegular } from '@fluentui/react-icons';
+import { t } from '@lingui/macro';
+import { IKeyPoint } from '../model/animationDocument';
+import styles from './timeline.module.scss';
+
+interface IKeyframeMarkerProps {
+  point: IKeyPoint;
+  left: number;
+  isSelected: boolean;
+  /** 缓动的值与显示名称 */
+  easeLabels: Map<string, string>;
+  /** 拖动关键帧的指针事件，由轨道统一处理 */
+  dragHandlers: Pick<HTMLAttributes<HTMLDivElement>, 'onPointerDown' | 'onPointerMove' | 'onPointerUp'>;
+  onChange: (patch: Partial<IKeyPoint>) => void;
+  onDelete: () => void;
+}
+
+/** 悬停多久后显示操作提示（毫秒），避免划过时频繁弹出 */
+const TIP_DELAY = 500;
+
+/**
+ * 悬停一段时间后才显示的提示。
+ * 不用 Tooltip 自带的 showDelay：已有提示显示时，Fluent 会让下一个提示立即出现，
+ * 快速划过多个关键帧时提示会一直跟着走，因此由这里自己计时，每个关键帧都重新等待
+ */
+function useHoverTip() {
+  const [isVisible, setIsVisible] = useState(false);
+  const timerRef = useRef<number>();
+
+  const hide = useCallback(() => {
+    window.clearTimeout(timerRef.current);
+    setIsVisible(false);
+  }, []);
+
+  const showLater = useCallback(() => {
+    window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => setIsVisible(true), TIP_DELAY);
+  }, []);
+
+  useEffect(() => () => window.clearTimeout(timerRef.current), []);
+
+  return { isVisible, showLater, hide };
+}
+
+/**
+ * 轨道上的一个关键帧。悬停一会儿后提示可以拖动和右键，右键菜单中设置缓动或删除
+ */
+export function KeyframeMarker({ point, left, isSelected, easeLabels, dragHandlers, onChange, onDelete }: IKeyframeMarkerProps) {
+  const tip = useHoverTip();
+
+  return (
+    <Menu openOnContext>
+      <MenuTrigger disableButtonEnhancement>
+        <Tooltip
+          content={
+            <>
+              {point.time} ms
+              <br />
+              {t`拖动调整时间，右键设置缓动或删除`}
+            </>
+          }
+          relationship="description"
+          positioning="above"
+          visible={tip.isVisible}
+          // 只接受 Tooltip 的隐藏请求（如按 Esc），显示时机由 useHoverTip 决定
+          onVisibleChange={(_, data) => !data.visible && tip.hide()}
+        >
+          <div
+            className={`${styles.keyframe} ${isSelected ? styles.selected : ''}`}
+            style={{ left }}
+            {...dragHandlers}
+            onPointerEnter={tip.showLater}
+            onPointerLeave={tip.hide}
+            onPointerDown={(event) => {
+              // 开始拖动或右键时收起提示，拖动过程中指针一直在关键帧上，不会再弹出
+              tip.hide();
+              dragHandlers.onPointerDown?.(event);
+            }}
+          />
+        </Tooltip>
+      </MenuTrigger>
+      <MenuPopover>
+        <MenuList>
+          <Menu>
+            <MenuTrigger disableButtonEnhancement>
+              <MenuItem secondaryContent={easeLabels.get(point.ease) ?? point.ease}>{t`缓动`}</MenuItem>
+            </MenuTrigger>
+            <MenuPopover>
+              <MenuList
+                checkedValues={{ ease: [point.ease] }}
+                onCheckedValueChange={(_, data) => onChange({ ease: data.checkedItems[0] })}
+              >
+                <MenuGroup>
+                  <MenuGroupHeader>{t`从上一关键帧到此帧`}</MenuGroupHeader>
+                  {[...easeLabels].map(([value, label]) => (
+                    <MenuItemRadio key={value} name="ease" value={value}>{label}</MenuItemRadio>
+                  ))}
+                </MenuGroup>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+          <MenuItem icon={<DeleteRegular />} onClick={onDelete}>{t`删除关键帧`}</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/TimelineToolbar.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TimelineToolbar.tsx
index f1e4fda20..a6f411e92 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/timeline/TimelineToolbar.tsx
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TimelineToolbar.tsx
@@ -1,5 +1,13 @@
+import { CSSProperties } from 'react';
 import { Button, Slider, ToggleButton } from '@fluentui/react-components';
-import { ArrowRepeatAllRegular, PauseRegular, PlayRegular, PreviousRegular, ZoomInRegular } from '@fluentui/react-icons';
+import {
+  ArrowRepeatAllRegular,
+  PauseRegular,
+  PlayRegular,
+  PreviousRegular,
+  ZoomInRegular,
+  ZoomOutRegular,
+} from '@fluentui/react-icons';
 import { t } from '@lingui/macro';
 import { usePlayback } from './usePlayback';
 import { MAX_PX_PER_MS, MIN_PX_PER_MS } from './timelineLayout';
@@ -14,6 +22,9 @@ interface ITimelineToolbarProps {
   onZoomChange: (pxPerMs: number) => void;
 }
 
+/** 点击缩放按钮时的缩放倍数 */
+const ZOOM_STEP = 1.5;
+
 /**
  * 播放控制与缩放。缩放滑块按对数刻度，拖动时每一段的变化感受一致
  */
@@ -41,8 +52,18 @@ export function TimelineToolbar({ time, duration, playback, onRewind, pxPerMs, o
         {Math.round(time)} / {duration} ms
       </span>
       <div className={styles.zoom} title={t`缩放（Ctrl + 滚轮）`}>
-        <ZoomInRegular />
+        <Button
+          size="small"
+          appearance="subtle"
+          icon={<ZoomOutRegular />}
+          title={t`缩小`}
+          onClick={() => onZoomChange(pxPerMs / ZOOM_STEP)}
+        />
         <Slider
+          className={styles.zoomSlider}
+          // 步长很小时 Fluent 画出的刻度线会密到盖住整条轨道，这里去掉刻度线（与 EffectEditor 相同）
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          style={{ '--fui-Slider--steps-percent': '100%' } as CSSProperties}
           size="small"
           min={Math.log2(MIN_PX_PER_MS)}
           max={Math.log2(MAX_PX_PER_MS)}
@@ -50,6 +71,13 @@ export function TimelineToolbar({ time, duration, playback, onRewind, pxPerMs, o
           value={Math.log2(pxPerMs)}
           onChange={(_, data) => onZoomChange(2 ** data.value)}
         />
+        <Button
+          size="small"
+          appearance="subtle"
+          icon={<ZoomInRegular />}
+          title={t`放大`}
+          onClick={() => onZoomChange(pxPerMs * ZOOM_STEP)}
+        />
       </div>
     </div>
   );
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackHeader.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackHeader.tsx
index a44050cbf..c9ffdb376 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackHeader.tsx
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackHeader.tsx
@@ -10,6 +10,7 @@ import {
   MenuPopover,
   MenuTrigger,
   SpinButton,
+  Tooltip,
 } from '@fluentui/react-components';
 import { DeleteRegular, DiamondFilled, DiamondRegular, MoreHorizontalRegular } from '@fluentui/react-icons';
 import { t } from '@lingui/macro';
@@ -62,14 +63,23 @@ export function TrackHeader(props: ITrackHeaderProps) {
           if (Number.isFinite(next)) props.onValueChange(next);
         }}
       />
-      <Button
-        className={hasKeyframe ? styles.keyframeOn : undefined}
-        size="small"
-        appearance="transparent"
-        icon={hasKeyframe ? <DiamondFilled /> : <DiamondRegular />}
-        title={hasKeyframe ? t`删除此处的关键帧` : t`在此处添加关键帧`}
-        onClick={props.onToggleKeyframe}
-      />
+      <Tooltip
+        content={
+          hasKeyframe
+            ? t`删除播放头处的关键帧`
+            : t`在播放头处添加关键帧，直接修改左侧的数值也会添加。添加后可在轨道上拖动关键帧调整时间，右键设置缓动或删除`
+        }
+        relationship="label"
+        positioning="above"
+      >
+        <Button
+          className={hasKeyframe ? styles.keyframeOn : undefined}
+          size="small"
+          appearance="transparent"
+          icon={hasKeyframe ? <DiamondFilled className={styles.keyframeIcon} /> : <DiamondRegular className={styles.keyframeIcon} />}
+          onClick={props.onToggleKeyframe}
+        />
+      </Tooltip>
       <Menu>
         <MenuTrigger disableButtonEnhancement>
           <Button
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackLane.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackLane.tsx
index f17505bb2..205b9199e 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackLane.tsx
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackLane.tsx
@@ -1,18 +1,7 @@
 import { PointerEvent, useRef } from 'react';
-import {
-  Menu,
-  MenuGroup,
-  MenuGroupHeader,
-  MenuItem,
-  MenuItemRadio,
-  MenuList,
-  MenuPopover,
-  MenuTrigger,
-} from '@fluentui/react-components';
-import { DeleteRegular } from '@fluentui/react-icons';
-import { t } from '@lingui/macro';
 import { useEaseTypeOptions } from '@/hooks/useEaseTypeOptions';
 import { IKeyPoint } from '../model/animationDocument';
+import { KeyframeMarker } from './KeyframeMarker';
 import { snapTime, timeToX, xToTime } from './timelineLayout';
 import styles from './timeline.module.scss';
 
@@ -75,43 +64,22 @@ export function TrackLane(props: ITrackLaneProps) {
         />
       )}
       {points.map((point) => (
-        <Menu key={point.id} openOnContext>
-          <MenuTrigger disableButtonEnhancement>
-            <div
-              className={`${styles.keyframe} ${point.id === selectedId ? styles.selected : ''}`}
-              style={{ left: timeToX(point.time, pxPerMs) }}
-              title={`${point.time} ms`}
-              onPointerDown={(event) => handleKeyframePointerDown(event, point)}
-              onPointerMove={(event) => handleKeyframePointerMove(event, point)}
-              onPointerUp={() => {
-                dragRef.current = null;
-              }}
-            />
-          </MenuTrigger>
-          <MenuPopover>
-            <MenuList>
-              <Menu>
-                <MenuTrigger disableButtonEnhancement>
-                  <MenuItem secondaryContent={easeLabels.get(point.ease) ?? point.ease}>{t`缓动`}</MenuItem>
-                </MenuTrigger>
-                <MenuPopover>
-                  <MenuList
-                    checkedValues={{ ease: [point.ease] }}
-                    onCheckedValueChange={(_, data) => props.onPointChange(point.id, { ease: data.checkedItems[0] })}
-                  >
-                    <MenuGroup>
-                      <MenuGroupHeader>{t`从上一关键帧到此帧`}</MenuGroupHeader>
-                      {[...easeLabels].map(([value, label]) => (
-                        <MenuItemRadio key={value} name="ease" value={value}>{label}</MenuItemRadio>
-                      ))}
-                    </MenuGroup>
-                  </MenuList>
-                </MenuPopover>
-              </Menu>
-              <MenuItem icon={<DeleteRegular />} onClick={() => props.onDeletePoint(point.id)}>{t`删除关键帧`}</MenuItem>
-            </MenuList>
-          </MenuPopover>
-        </Menu>
+        <KeyframeMarker
+          key={point.id}
+          point={point}
+          left={timeToX(point.time, pxPerMs)}
+          isSelected={point.id === selectedId}
+          easeLabels={easeLabels}
+          dragHandlers={{
+            onPointerDown: (event) => handleKeyframePointerDown(event, point),
+            onPointerMove: (event) => handleKeyframePointerMove(event, point),
+            onPointerUp: () => {
+              dragRef.current = null;
+            },
+          }}
+          onChange={(patch) => props.onPointChange(point.id, patch)}
+          onDelete={() => props.onDeletePoint(point.id)}
+        />
       ))}
     </div>
   );
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/timeline.module.scss b/packages/origine2/src/pages/editor/AnimationEditor/timeline/timeline.module.scss
index ed0123c7d..f64a62b11 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/timeline/timeline.module.scss
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/timeline.module.scss
@@ -32,7 +32,11 @@ $ruler-height: 24px;
   margin-left: auto;
   display: flex;
   align-items: center;
-  color: var(--text-weak);
+}
+
+.zoomSlider {
+  width: 120px;
+  min-width: 0;
 }
 
 // 左上角空白、刻度尺、属性栏、轨道区域四块。只有轨道区域滚动，其余随它同步
@@ -153,6 +157,11 @@ $ruler-height: 24px;
   color: var(--primary);
 }
 
+// 与轨道中的关键帧大小相近，不至于比属性名还显眼
+.keyframeIcon {
+  font-size: 12px;
+}
+
 // 不常用的操作，悬停在这一行时才显示
 .moreButton {
   opacity: 0;
@@ -220,6 +229,33 @@ $ruler-height: 24px;
   pointer-events: none;
 }
 
+// 整行作为按钮，底色带一点主题色表示它与属性行不同，文字与图标同属性名；左内边距沿用 .header，图标与属性名对齐
+.addPropertyRow {
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text);
+  background: var(--primary-5pct);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+
+  &:hover,
+  &:focus-visible {
+    background: var(--primary-10pct);
+  }
+
+  &[aria-disabled='true'] {
+    color: var(--text-weak);
+    background: none;
+    cursor: default;
+  }
+}
+
+.addPropertyIcon {
+  flex: none;
+  font-size: 14px;
+}
+
 .addPropertyPopover {
   max-height: 360px;
   overflow-y: auto;
diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetAnimation.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetAnimation.tsx
index c7b52501c..03a858a8e 100644
--- a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetAnimation.tsx
+++ b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetAnimation.tsx
@@ -12,11 +12,13 @@ import { combineSubmitString } from "@/utils/combineSubmitString";
 import { extNameMap } from "../../ChooseFile/chooseFileConfig";
 import { getTransformFromArgs, isTransformFromDefault, TransformFromOption } from "../components/TransformFromOption";
 import { usePresetTargetOptions } from "@/hooks/usePresetTargetOptions";
+import { useHiddenAnimationFiles } from "@/hooks/useHiddenAnimationFiles";
 
 export default function SetAnimation(props: ISentenceEditorProps) {
   const fileName = useValue(props.sentence.content);
   const target = useValue(getArgByKey(props.sentence, "target")?.toString() ?? "");
   const presetTargets = usePresetTargetOptions();
+  const hiddenAnimationFiles = useHiddenAnimationFiles();
   const isPresetTarget = Array.from(presetTargets.keys()).includes(target.value);
   const isUsePreset = useValue(isPresetTarget);
   const isGoNext = useValue(!!getArgByKey(props.sentence, "next"));
@@ -50,7 +52,7 @@ export default function SetAnimation(props: ISentenceEditorProps) {
           <ChooseFile title={t`选择动画文件`} basePath={['animation']} selectedFilePath={`${fileName.value}.json`} onChange={(file) => {
             fileName.set((file?.name ?? "").replaceAll(".json", ""));
             submit();
-          }} extNames={extNameMap.get('json')} hiddenFiles={['animationTable.json']} />
+          }} extNames={extNameMap.get('json')} hiddenFiles={hiddenAnimationFiles} />
         </>
       </CommonOptions>
       <CommonOptions key="2" title={t`使用预设目标`}>
diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTransition.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTransition.tsx
index e47ba59e3..8fd1bd5a3 100644
--- a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTransition.tsx
+++ b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTransition.tsx
@@ -12,8 +12,10 @@ import { combineSubmitString } from "@/utils/combineSubmitString";
 import { extNameMap } from "../../ChooseFile/chooseFileConfig";
 import { IgnoreDefaultOption } from "../components/IgnoreDefaultOption";
 import { usePresetTargetOptions } from "@/hooks/usePresetTargetOptions";
+import { useHiddenAnimationFiles } from "@/hooks/useHiddenAnimationFiles";
 
 export default function SetTransition(props: ISentenceEditorProps) {
+  const hiddenAnimationFiles = useHiddenAnimationFiles();
   const enterFileName = useValue(getArgByKey(props.sentence, 'enter'));
   const exitFileName = useValue(getArgByKey(props.sentence, 'exit'));
   const target = useValue(getArgByKey(props.sentence, "target")?.toString() ?? "");
@@ -44,7 +46,7 @@ export default function SetTransition(props: ISentenceEditorProps) {
           <ChooseFile title={t`选择进入动画文件`} basePath={['animation']} selectedFilePath={`${enterFileName.value}.json`} onChange={(file) => {
             enterFileName.set((file?.name ?? "").replaceAll(".json", ""));
             submit();
-          }} extNames={extNameMap.get('json')} hiddenFiles={['animationTable.json']} />
+          }} extNames={extNameMap.get('json')} hiddenFiles={hiddenAnimationFiles} />
         </>
       </CommonOptions>
       <CommonOptions key="1.1" title={t`选择退出动画`}>
@@ -53,7 +55,7 @@ export default function SetTransition(props: ISentenceEditorProps) {
           <ChooseFile title={t`选择退出动画文件`} basePath={['animation']} selectedFilePath={`${exitFileName.value}.json`} onChange={(file) => {
             exitFileName.set((file?.name ?? "").replaceAll(".json", ""));
             submit();
-          }} extNames={extNameMap.get('json')} hiddenFiles={['animationTable.json']} />
+          }} extNames={extNameMap.get('json')} hiddenFiles={hiddenAnimationFiles} />
         </>
       </CommonOptions>
       <CommonOptions key="2" title={t`使用预设目标`}>
diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/components/EffectEditor.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/components/EffectEditor.tsx
index 5a7b6e656..b6dd58c59 100644
--- a/packages/origine2/src/pages/editor/GraphicalEditor/components/EffectEditor.tsx
+++ b/packages/origine2/src/pages/editor/GraphicalEditor/components/EffectEditor.tsx
@@ -230,14 +230,17 @@ const EffectField = memo(
 
 /**
  * 效果编辑器
+ *
+ * 编辑场景语句时传入 sentence、index、targetPath，会提供拖拽调整变换并与预览同步；
+ * 不传时只编辑效果参数（如动画编辑器中预览对象的初始状态）
  */
 export function EffectEditor(props: {
   json: string;
   onChange: (newJson: string) => void;
   onUpdate?: (transform: any) => void;
-  sentence: ISentence;
-  index: number;
-  targetPath: string;
+  sentence?: ISentence;
+  index?: number;
+  targetPath?: string;
 }) {
   const { effectConfig, fieldGroups } = useEffectEditorConfig();
   /**
@@ -394,11 +397,14 @@ export function EffectEditor(props: {
     }
     return base;
   }, []);
-  const lineContent = useMemo(() => sentenceToRawLine(props.sentence), [props.sentence, sentenceToRawLine]);
+  const lineContent = useMemo(
+    () => (props.sentence ? sentenceToRawLine(props.sentence) : ''),
+    [props.sentence, sentenceToRawLine],
+  );
   // 预览同步用的停止指针：目标语句末行（0-based）+ 1，与 GraphicalEditor 的 submitScene / syncToLineRange 一致。
   // 不能用 props.index：它是图形编辑器里的语句序号，多行语句只占一行，前面有多行语句时会与文件行号错开，
   // 导致拖拽框的基线 sync 停错语句，且与保存时的 sync 指针不同，使预览端的基线被误判失效。
-  const previewLineNumber = props.sentence.endLine + 1;
+  const previewLineNumber = (props.sentence?.endLine ?? 0) + 1;
   const transformableBoxKey = useMemo(
     () => [props.targetPath, props.index, lineContent, props.json].join('\n'),
     [props.targetPath, props.index, lineContent, props.json],
@@ -414,7 +420,8 @@ export function EffectEditor(props: {
 
   // 当 sentence 变化时，同步拖拽框状态
   useEffect(() => {
-    if (lineContent.startsWith('changeFigure') || lineContent.startsWith('setTransform')) {
+    const isTransformCommand = lineContent.startsWith('changeFigure') || lineContent.startsWith('setTransform');
+    if (props.sentence && props.targetPath && isTransformCommand) {
       eventBus.emit('editor:pixi-sync-command', {
         targetPath: props.targetPath,
         lineNumber: previewLineNumber,
@@ -425,6 +432,7 @@ export function EffectEditor(props: {
   }, [lineContent, props.sentence, previewLineNumber, props.targetPath]);
   // // 当立绘变换改变时，同步拖拽框与 input
   useEffect(() => {
+    if (!props.sentence) return;
     eventBus.emit('editor:sync-dragger', {
       x: explicitEffectFields.value.x,
       y: explicitEffectFields.value.y,
@@ -442,15 +450,15 @@ export function EffectEditor(props: {
   const previewControl = document.getElementById('gamePreviewControl');
   return (
     <>
-      <Switch
+      {props.sentence && <Switch
         checked={isWindowAdjustment}
         disabled={!isDragSupported}
         onChange={(_, checked) => {
           updateIsWindowAdjustment(checked.checked);
         }}
         label={t`拖拽调整变换（建议打开快速预览效果）`}
-      />
-      {previewControl && createPortal(
+      />}
+      {props.sentence && props.targetPath && previewControl && createPortal(
         <TransformableBox
           key={transformableBoxKey}
           parent={previewControl}
diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/components/TerrePanel.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/components/TerrePanel.tsx
index c558975f7..314a23725 100644
--- a/packages/origine2/src/pages/editor/GraphicalEditor/components/TerrePanel.tsx
+++ b/packages/origine2/src/pages/editor/GraphicalEditor/components/TerrePanel.tsx
@@ -11,6 +11,7 @@ import ChooseFile from "../../ChooseFile/ChooseFile";
 import { extNameMap } from "../../ChooseFile/chooseFileConfig";
 import WheelDropdown from "./WheelDropdown";
 import { useEaseTypeOptions } from "@/hooks/useEaseTypeOptions";
+import { useHiddenAnimationFiles } from "@/hooks/useHiddenAnimationFiles";
 import { t } from "@lingui/macro";
 
 export function TerrePanel(props: {
@@ -150,6 +151,7 @@ function EffectEditorOptions({ panel, setPanel }: {
     width?: number;
   } | null>>;
 }) {
+  const hiddenAnimationFiles = useHiddenAnimationFiles();
   const easeOptions = useEaseTypeOptions();
   const blendModeOptions = useMemo(() => new Map([
     ['', t`默认`],
@@ -171,7 +173,7 @@ function EffectEditorOptions({ panel, setPanel }: {
         selectedFilePath={options[key] ? `${String(options[key])}.json` : ''}
         onChange={(file) => update(key, file?.name.replace(/\.json$/i, '') ?? '', true)}
         extNames={extNameMap.get('json')}
-        hiddenFiles={['animationTable.json']}
+        hiddenFiles={hiddenAnimationFiles}
       /></>
     </CommonOptions>
   );
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/animationTable.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/animationTable.json
index f4ed953b6..7f6a78bad 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/animationTable.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/animationTable.json
@@ -15,5 +15,22 @@
   "godrayFilm",
   "removeFilm",
   "shockwaveIn",
-  "shockwaveOut"
+  "shockwaveOut",
+  "enter-from-left-v2",
+  "enter-from-bottom-v2",
+  "enter-from-right-v2",
+  "shake-v2",
+  "move-front-and-back-v2",
+  "enter-v2",
+  "exit-v2",
+  "blur-v2",
+  "oldFilm-v2",
+  "dotFilm-v2",
+  "reflectionFilm-v2",
+  "glitchFilm-v2",
+  "rgbFilm-v2",
+  "godrayFilm-v2",
+  "removeFilm-v2",
+  "shockwaveIn-v2",
+  "shockwaveOut-v2"
 ]
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/blur-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/blur-v2.json
new file mode 100644
index 000000000..55ab5e66a
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/blur-v2.json
@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "keyframes": [
+    {
+      "duration": 300,
+      "blur": 5
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/dotFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/dotFilm-v2.json
new file mode 100644
index 000000000..3c95a58f4
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/dotFilm-v2.json
@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "keyframes": [
+    {
+      "duration": 0,
+      "dotFilm": 1
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-bottom-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-bottom-v2.json
new file mode 100644
index 000000000..944121933
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-bottom-v2.json
@@ -0,0 +1,24 @@
+{
+  "version": 2,
+  "relativeCalc": {
+    "alpha": "multiplyWithZeroFallback"
+  },
+  "keyframes": [
+    {
+      "duration": 0,
+      "alpha": 0,
+      "position": {
+        "y": 50
+      },
+      "blur": 5
+    },
+    {
+      "duration": 500,
+      "alpha": 1,
+      "position": {
+        "y": 0
+      },
+      "blur": 0
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-left-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-left-v2.json
new file mode 100644
index 000000000..6fe6e667c
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-left-v2.json
@@ -0,0 +1,24 @@
+{
+  "version": 2,
+  "relativeCalc": {
+    "alpha": "multiplyWithZeroFallback"
+  },
+  "keyframes": [
+    {
+      "duration": 0,
+      "alpha": 0,
+      "position": {
+        "x": -50
+      },
+      "blur": 5
+    },
+    {
+      "duration": 500,
+      "alpha": 1,
+      "position": {
+        "x": 0
+      },
+      "blur": 0
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-right-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-right-v2.json
new file mode 100644
index 000000000..6820ba6fc
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-right-v2.json
@@ -0,0 +1,24 @@
+{
+  "version": 2,
+  "relativeCalc": {
+    "alpha": "multiplyWithZeroFallback"
+  },
+  "keyframes": [
+    {
+      "duration": 0,
+      "alpha": 0,
+      "position": {
+        "x": 50
+      },
+      "blur": 5
+    },
+    {
+      "duration": 500,
+      "alpha": 1,
+      "position": {
+        "x": 0
+      },
+      "blur": 0
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-v2.json
new file mode 100644
index 000000000..8435e148c
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-v2.json
@@ -0,0 +1,16 @@
+{
+  "version": 2,
+  "relativeCalc": {
+    "alpha": "multiplyWithZeroFallback"
+  },
+  "keyframes": [
+    {
+      "duration": 0,
+      "alpha": 0
+    },
+    {
+      "duration": 300,
+      "alpha": 1
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/exit-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/exit-v2.json
new file mode 100644
index 000000000..b7f19c7f0
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/exit-v2.json
@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "keyframes": [
+    {
+      "duration": 300,
+      "alpha": 0
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/glitchFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/glitchFilm-v2.json
new file mode 100644
index 000000000..1fa22d23f
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/glitchFilm-v2.json
@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "keyframes": [
+    {
+      "duration": 0,
+      "glitchFilm": 1
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/godrayFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/godrayFilm-v2.json
new file mode 100644
index 000000000..5e4770a5a
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/godrayFilm-v2.json
@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "keyframes": [
+    {
+      "duration": 0,
+      "godrayFilm": 1
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/move-front-and-back-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/move-front-and-back-v2.json
new file mode 100644
index 000000000..e12c7a88e
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/move-front-and-back-v2.json
@@ -0,0 +1,19 @@
+{
+  "version": 2,
+  "keyframes": [
+    {
+      "duration": 500,
+      "scale": {
+        "x": 1.15,
+        "y": 1.15
+      }
+    },
+    {
+      "duration": 500,
+      "scale": {
+        "x": 1,
+        "y": 1
+      }
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/oldFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/oldFilm-v2.json
new file mode 100644
index 000000000..75fb2cbd9
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/oldFilm-v2.json
@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "keyframes": [
+    {
+      "duration": 0,
+      "oldFilm": 1
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/reflectionFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/reflectionFilm-v2.json
new file mode 100644
index 000000000..ad1307fb4
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/reflectionFilm-v2.json
@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "keyframes": [
+    {
+      "duration": 0,
+      "reflectionFilm": 1
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/removeFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/removeFilm-v2.json
new file mode 100644
index 000000000..00e609bbc
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/removeFilm-v2.json
@@ -0,0 +1,14 @@
+{
+  "version": 2,
+  "keyframes": [
+    {
+      "duration": 0,
+      "oldFilm": 0,
+      "dotFilm": 0,
+      "reflectionFilm": 0,
+      "glitchFilm": 0,
+      "rgbFilm": 0,
+      "godrayFilm": 0
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/rgbFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/rgbFilm-v2.json
new file mode 100644
index 000000000..70ffb9ba8
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/rgbFilm-v2.json
@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "keyframes": [
+    {
+      "duration": 0,
+      "rgbFilm": 1
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/shake-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/shake-v2.json
new file mode 100644
index 000000000..4cd3eedf5
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/shake-v2.json
@@ -0,0 +1,26 @@
+{
+  "version": 2,
+  "keyframes": [
+    {
+      "duration": 250,
+      "position": {
+        "x": -100
+      },
+      "ease": "easeOut"
+    },
+    {
+      "duration": 500,
+      "position": {
+        "x": 100
+      },
+      "ease": "easeInOut"
+    },
+    {
+      "duration": 250,
+      "position": {
+        "x": 0
+      },
+      "ease": "easeIn"
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveIn-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveIn-v2.json
new file mode 100644
index 000000000..99ab7e023
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveIn-v2.json
@@ -0,0 +1,15 @@
+{
+  "version": 2,
+  "keyframes": [
+    {
+      "duration": 0,
+      "shockwaveFilter": 0,
+      "radiusAlphaFilter": 0
+    },
+    {
+      "duration": 2000,
+      "shockwaveFilter": 3.05,
+      "radiusAlphaFilter": 1.05
+    }
+  ]
+}
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveOut-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveOut-v2.json
new file mode 100644
index 000000000..fa129ca6b
--- /dev/null
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveOut-v2.json
@@ -0,0 +1,13 @@
+{
+  "version": 2,
+  "keyframes": [
+    {
+      "duration": 0,
+      "shockwaveFilter": 0
+    },
+    {
+      "duration": 2000,
+      "shockwaveFilter": 3
+    }
+  ]
+}
diff --git a/packages/terre2/src/Modules/lsp/completion/fileSuggestion.ts b/packages/terre2/src/Modules/lsp/completion/fileSuggestion.ts
index 1967a95ee..b2c4bd4f2 100644
--- a/packages/terre2/src/Modules/lsp/completion/fileSuggestion.ts
+++ b/packages/terre2/src/Modules/lsp/completion/fileSuggestion.ts
@@ -47,6 +47,21 @@ function getAnimationArgInput(line: string): string | null {
   return result ? result[1] : null;
 }
 
+/**
+ * v1 动画（顶层为关键帧数组）只为兼容旧脚本保留，补全时不再推荐
+ */
+async function isV1Animation(file: IFileInfo): Promise<boolean> {
+  if (file.isDir || !file.name.endsWith('.json')) {
+    return false;
+  }
+  try {
+    const content = await fsService.readTextFile(file.path);
+    return Array.isArray(JSON.parse(String(content)));
+  } catch {
+    return false;
+  }
+}
+
 export async function handleAnimationFileSuggestions(
   basePath: string,
   line: string,
@@ -64,9 +79,11 @@ export async function handleAnimationFileSuggestions(
   const dirPath = getPathFromSubdir(basePath, 'animation', subDir);
   const dirInfo = await fsService.getDirInfo(dirPath);
 
-  const visibleFiles = filterFiles(dirInfo).filter(
+  const candidateFiles = filterFiles(dirInfo).filter(
     (file) => file.name !== 'animationTable.json',
   );
+  const isV1List = await Promise.all(candidateFiles.map(isV1Animation));
+  const visibleFiles = candidateFiles.filter((_, index) => !isV1List[index]);
 
   return visibleFiles
     .filter((file) => file.name.startsWith(keyword))

From f031f0e5138dfeb64fddd8af6f1f7777b7e68412 Mon Sep 17 00:00:00 2001
From: Mahiru <Mahiru_@outlook.com>
Date: Sun, 4 Oct 2026 15:36:43 +0800
Subject: [PATCH 06/12] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20animation=20preview?=
 =?UTF-8?q?=20=E5=B9=B6=E8=A1=A5=E5=85=85=E5=BF=85=E8=A6=81=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-preview-protocol/src/index.ts |  4 ++-
 .../preview/AnimationPreview.tsx              | 16 ++++++-----
 .../preview/previewSettings.ts                | 27 ++++++++++++-------
 .../settings/AnimationSettingsPanel.tsx       |  2 +-
 4 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/packages/editor-preview-protocol/src/index.ts b/packages/editor-preview-protocol/src/index.ts
index ced4f888e..803cfedd9 100644
--- a/packages/editor-preview-protocol/src/index.ts
+++ b/packages/editor-preview-protocol/src/index.ts
@@ -128,12 +128,14 @@ export interface SetEffectPayload {
 
 /**
  * 把动画在 time 时刻的状态写入目标，仅用于预览，不写入舞台状态。
- * animation 为动画 JSON（v1 关键帧数组或 v2 对象），以目标的当前变换为基准状态
+ * animation 为动画 JSON（v1 关键帧数组或 v2 对象）
  */
 export interface SeekAnimationPayload {
   target: string;
   animation: JsonValue;
   time: number;
+  /** 动画开始前目标的状态，与默认变换合并后作为当前基准状态；缺省时取目标在演算状态中的变换 */
+  baseTransform?: Transform;
 }
 
 export interface SetFontOptimizationPayload {
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/preview/AnimationPreview.tsx b/packages/origine2/src/pages/editor/AnimationEditor/preview/AnimationPreview.tsx
index 9c6a88c05..c758fc2d6 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/preview/AnimationPreview.tsx
+++ b/packages/origine2/src/pages/editor/AnimationEditor/preview/AnimationPreview.tsx
@@ -1,9 +1,9 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { Spinner } from '@fluentui/react-components';
 import type { JsonValue } from '@webgal/editor-preview-protocol';
 import useEditorStore from '@/store/useEditorStore';
 import { useDedicatedPreview } from './useDedicatedPreview';
-import { buildPreviewScene, getPreviewTarget, IPreviewSettings } from './previewSettings';
+import { buildPreviewScene, getInitialTransform, getPreviewTarget, IPreviewSettings } from './previewSettings';
 import styles from './animationPreview.module.scss';
 
 interface IAnimationPreviewProps {
@@ -20,21 +20,25 @@ export function AnimationPreview({ animation, time, settings }: IAnimationPrevie
   const gameDir = useEditorStore.use.subPage();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const { isReady, stageRevision, send } = useDedicatedPreview(iframeRef);
+  const sceneContent = buildPreviewScene(settings);
+  const target = getPreviewTarget(settings);
+  const baseTransform = useMemo(() => getInitialTransform(settings), [settings]);
 
+  // 只在舞台内容变化时重建；修改初始状态等不影响舞台的设置时不重建
   useEffect(() => {
     if (!isReady) return;
-    send('preview.command.run-scene-content', { sceneContent: buildPreviewScene(settings) });
+    send('preview.command.run-scene-content', { sceneContent });
     send('preview.command.set-component-visibility', { showTextBox: false, showControls: false });
-  }, [isReady, settings, send]);
+  }, [isReady, sceneContent, send]);
 
   // 播放时每帧都会触发，合并到下一个动画帧再发送；舞台变化（如立绘加载完成）后也要重新写入
   useEffect(() => {
     if (!isReady) return;
     const frameId = requestAnimationFrame(() => {
-      send('preview.command.seek-animation', { target: getPreviewTarget(settings), animation, time });
+      send('preview.command.seek-animation', { target, animation, time, baseTransform });
     });
     return () => cancelAnimationFrame(frameId);
-  }, [isReady, stageRevision, animation, time, settings, send]);
+  }, [isReady, stageRevision, animation, time, target, baseTransform, send]);
 
   return (
     <div className={styles.preview}>
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/preview/previewSettings.ts b/packages/origine2/src/pages/editor/AnimationEditor/preview/previewSettings.ts
index 107b0d4b2..c5ed01241 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/preview/previewSettings.ts
+++ b/packages/origine2/src/pages/editor/AnimationEditor/preview/previewSettings.ts
@@ -3,6 +3,7 @@
  * 只用于预览，不写入动画文件，按游戏保存在 localStorage 中
  */
 import { useCallback, useState } from 'react';
+import type { Transform } from '@webgal/editor-preview-protocol';
 import useEditorStore from '@/store/useEditorStore';
 
 export type PreviewTarget = 'figure' | 'background';
@@ -53,27 +54,33 @@ export function usePreviewSettings() {
 }
 
 /**
- * 搭建预览舞台的场景：立即显示背景和立绘，不播放入场动画。
- * 设置了初始状态时写到预览对象上，相对动画以它为基准
+ * 搭建预览舞台的场景：立即显示背景和立绘，不播放入场动画
  */
 export function buildPreviewScene(settings: IPreviewSettings): string {
-  const transformArg =
-    settings.isInitialStateEnabled && settings.initialTransform ? ` -transform=${settings.initialTransform}` : '';
   const lines: string[] = [];
   if (settings.background) {
-    const bgTransformArg = settings.target === 'background' ? transformArg : '';
-    lines.push(`changeBg:${settings.background}${bgTransformArg} -duration=0 -next;`);
+    lines.push(`changeBg:${settings.background} -duration=0 -next;`);
   }
   if (settings.figure) {
     const positionArg = settings.figurePosition === 'center' ? '' : ` -${settings.figurePosition}`;
-    const figureTransformArg = settings.target === 'figure' ? transformArg : '';
-    lines.push(
-      `changeFigure:${settings.figure} -id=${PREVIEW_FIGURE_ID}${positionArg}${figureTransformArg} -duration=0 -next;`,
-    );
+    lines.push(`changeFigure:${settings.figure} -id=${PREVIEW_FIGURE_ID}${positionArg} -duration=0 -next;`);
   }
   return lines.join('\n');
 }
 
+/**
+ * 预览对象在动画开始前的状态，作为相对动画的基准；未开启或未设置时为 undefined，由预览取对象当前的变换。
+ * 不写进搭建舞台的场景，而是随每次 seek 发给预览：修改时不必重建舞台，也不依赖入场动画何时结算
+ */
+export function getInitialTransform(settings: IPreviewSettings): Transform | undefined {
+  if (!settings.isInitialStateEnabled || !settings.initialTransform) return undefined;
+  try {
+    return JSON.parse(settings.initialTransform);
+  } catch {
+    return undefined;
+  }
+}
+
 export function getPreviewTarget(settings: IPreviewSettings): string {
   return settings.target === 'figure' ? PREVIEW_FIGURE_ID : 'bg-main';
 }
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx b/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx
index 8bfa48108..e05e22e43 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx
+++ b/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx
@@ -42,7 +42,7 @@ function SettingsPanel(props: IAnimationSettingsPanelProps) {
         </SettingRow>
         <SettingRow
           label={t`帧继承`}
-          info={t`开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。`}
+          info={t`开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。关闭时时间轴左侧显示的数值仍按开启时计算，可能与预览不一致，请以预览为准。`}
         >
           <Switch
             checked={isInherit(fields)}

From 1c3ac0cee14a920f1221409b181c470767c96549 Mon Sep 17 00:00:00 2001
From: Mahiru <Mahiru_@outlook.com>
Date: Sun, 4 Oct 2026 15:48:58 +0800
Subject: [PATCH 07/12] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E7=9B=B8=E5=85=B3=E6=96=87=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/origine2/src/locales/en.po   | 87 +++++++++++++++++----------
 packages/origine2/src/locales/ja.po   | 87 +++++++++++++++++----------
 packages/origine2/src/locales/ko.po   | 87 +++++++++++++++++----------
 packages/origine2/src/locales/zhCn.po | 37 +++++++++---
 4 files changed, 191 insertions(+), 107 deletions(-)

diff --git a/packages/origine2/src/locales/en.po b/packages/origine2/src/locales/en.po
index 5ef445259..6c66396aa 100644
--- a/packages/origine2/src/locales/en.po
+++ b/packages/origine2/src/locales/en.po
@@ -291,10 +291,10 @@ msgid "亮度"
 msgstr "Brightness"
 
 msgid "仅用于预览，不会写入动画文件"
-msgstr ""
+msgstr "Only used for preview, not saved to the animation file"
 
 msgid "从上一关键帧到此帧"
-msgstr ""
+msgstr "From the previous keyframe to this one"
 
 msgid "从当前状态开始"
 msgstr "Start from current state"
@@ -552,7 +552,7 @@ msgid "删除"
 msgstr "Delete"
 
 msgid "删除关键帧"
-msgstr ""
+msgstr "Delete keyframe"
 
 msgid "删除参数"
 msgstr "Delete argument"
@@ -560,15 +560,15 @@ msgstr "Delete argument"
 msgid "删除属性"
 msgstr "Delete Property"
 
+msgid "删除播放头处的关键帧"
+msgstr "Delete the keyframe at the playhead"
+
 msgid "删除本句"
 msgstr "Delete this sentence"
 
 msgid "删除模板"
 msgstr "Delete template"
 
-msgid "删除此处的关键帧"
-msgstr ""
-
 msgid "删除游戏"
 msgstr "Delete game"
 
@@ -672,7 +672,7 @@ msgid "可选项"
 msgstr "Selectable options"
 
 msgid "右"
-msgstr ""
+msgstr "Right"
 
 msgid "右侧"
 msgstr "Right"
@@ -717,7 +717,7 @@ msgid "唇形同步与眨眼"
 msgstr "Lip sync and blinking"
 
 msgid "回到开头"
-msgstr ""
+msgstr "Go to start"
 
 msgid "回收站"
 msgstr "Trash"
@@ -761,15 +761,15 @@ msgstr "Display a small avatar in the lower left corner of the dialog box"
 msgid "在当前场景内创建跳转标签"
 msgstr "Create a jump label in the current scene"
 
+msgid "在播放头处添加关键帧，直接修改左侧的数值也会添加。添加后可在轨道上拖动关键帧调整时间，右键设置缓动或删除"
+msgstr "Add a keyframe at the playhead. Editing the value on the left also adds one. Drag a keyframe on the track to change its time, or right-click it to set easing or delete it"
+
 msgid "在文件管理器中打开"
 msgstr "Open in File Explorer"
 
 msgid "在新标签页中预览"
 msgstr "Preview in new tab"
 
-msgid "在此处添加关键帧"
-msgstr ""
-
 msgid "在游戏中显示当前变量"
 msgstr "Display current variables in game"
 
@@ -975,7 +975,7 @@ msgid "属性"
 msgstr "Property"
 
 msgid "左"
-msgstr ""
+msgstr "Left"
 
 msgid "左侧"
 msgstr "Left"
@@ -1023,7 +1023,7 @@ msgid "已读文本外层"
 msgstr "Read text outer layer"
 
 msgid "帧继承"
-msgstr ""
+msgstr "Keyframe inheritance"
 
 msgid "帮助"
 msgstr "Help"
@@ -1065,10 +1065,10 @@ msgid "开启"
 msgstr "On"
 
 msgid "开启时，关键帧中的值基于对象当前的状态计算，例如位置、旋转为相加，缩放为相乘；关闭时均为绝对值。可在属性的菜单中修改计算方式。"
-msgstr ""
+msgstr "When on, keyframe values are calculated from the object's current state, e.g. position and rotation are added and scale is multiplied. When off, all values are absolute. The calculation can be changed in each property's menu."
 
-msgid "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。"
-msgstr ""
+msgid "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。关闭时时间轴左侧显示的数值仍按开启时计算，可能与预览不一致，请以预览为准。"
+msgstr "When on, each property only transitions between its own keyframes. When off, properties not set in a keyframe return to the object's current state. When off, the values shown on the left of the timeline are still calculated as if it were on and may differ from the preview; the preview is accurate."
 
 msgid "开始"
 msgstr "Start"
@@ -1107,7 +1107,7 @@ msgid "当前预览变量"
 msgstr "Current preview variables"
 
 msgid "循环播放"
-msgstr ""
+msgstr "Loop"
 
 msgid "德语"
 msgstr "German"
@@ -1178,6 +1178,9 @@ msgstr "Clear role name after execution"
 msgid "扩展名"
 msgstr "Extension name"
 
+msgid "拖动调整时间，右键设置缓动或删除"
+msgstr "Drag to change the time, right-click to set easing or delete"
+
 msgid "拖拽调整变换（建议打开快速预览效果）"
 msgstr "Drag and resize to adjust the transformation (It is recommended to turn on \"Fast preview effects\")"
 
@@ -1239,7 +1242,7 @@ msgid "搜索选项"
 msgstr "Search options"
 
 msgid "播放"
-msgstr ""
+msgstr "Play"
 
 msgid "播放一小段视频"
 msgstr "Play a short video"
@@ -1259,6 +1262,9 @@ msgstr "Operation"
 msgid "操作失败"
 msgstr "Operation failed"
 
+msgid "放大"
+msgstr "Zoom in"
+
 msgid "故障电影滤镜"
 msgstr "Glitch film filter"
 
@@ -1293,7 +1299,7 @@ msgid "效果音文件"
 msgstr "Sound effect file"
 
 msgid "文件内容不是有效的 v2 动画，请在脚本编辑器中修改"
-msgstr ""
+msgstr "The file is not a valid v2 animation. Please edit it in the script editor"
 
 msgid "文件名"
 msgstr "File name"
@@ -1464,7 +1470,7 @@ msgid "普通对话，显示角色名"
 msgstr "Normal dialogue, role name shown"
 
 msgid "暂停"
-msgstr ""
+msgstr "Pause"
 
 msgid "暂无变量快照"
 msgstr "No variable snapshot"
@@ -1473,7 +1479,7 @@ msgid "暂无调试变量，点击“新增变量”创建。"
 msgstr "No debug variables. Click \"Add variable\" to create one."
 
 msgid "更多"
-msgstr ""
+msgstr "More"
 
 msgid "更多设置"
 msgstr "More settings"
@@ -1731,7 +1737,7 @@ msgid "添加语句"
 msgstr "Add statement"
 
 msgid "清除"
-msgstr ""
+msgstr "Clear"
 
 msgid "清除当前舞台的特殊效果"
 msgstr "Clear special effects of current stage"
@@ -1848,19 +1854,19 @@ msgid "目标行"
 msgstr "Target line"
 
 msgid "相乘"
-msgstr ""
+msgstr "Multiply"
 
 msgid "相乘（基准为 0 时视为 1）"
-msgstr ""
+msgstr "Multiply (base of 0 treated as 1)"
 
 msgid "相加"
-msgstr ""
+msgstr "Add"
 
 msgid "相对"
 msgstr "Relative"
 
 msgid "相对动画"
-msgstr ""
+msgstr "Relative animation"
 
 msgid "眨眼"
 msgstr "Blink"
@@ -1914,7 +1920,7 @@ msgid "移动到回收站失败"
 msgstr "Failed to move to Trash"
 
 msgid "移除属性"
-msgstr ""
+msgstr "Remove property"
 
 msgid "立即注视"
 msgstr "Focus instantly"
@@ -1992,7 +1998,7 @@ msgid "绝对"
 msgstr "Absolutely"
 
 msgid "绝对值"
-msgstr ""
+msgstr "Absolute"
 
 msgid "继续游戏按钮"
 msgstr "Continue button"
@@ -2010,11 +2016,14 @@ msgid "缓出"
 msgstr "Ease out"
 
 msgid "缓动"
-msgstr ""
+msgstr "Easing"
 
 msgid "缓动类型"
 msgstr "Ease type"
 
+msgid "编辑"
+msgstr "Edit"
+
 msgid "编辑图标"
 msgstr "Edit icon"
 
@@ -2036,11 +2045,14 @@ msgstr "Edit component"
 msgid "繁体中文"
 msgstr "Traditional Chinese"
 
+msgid "缩小"
+msgstr "Zoom out"
+
 msgid "缩放"
 msgstr "Scale"
 
 msgid "缩放（Ctrl + 滚轮）"
-msgstr ""
+msgstr "Zoom (Ctrl + Scroll)"
 
 msgid "网格视图"
 msgstr "Grid view"
@@ -2199,7 +2211,7 @@ msgid "解锁鉴赏类型"
 msgstr "Unlock appreciation type"
 
 msgid "计算方式"
-msgstr ""
+msgstr "Calculation"
 
 msgid "设置"
 msgstr "Settings"
@@ -2216,6 +2228,12 @@ msgstr "Setting the animation of the figure or background."
 msgid "设置自定义级联选择器分隔符（输入后按回车键确认）"
 msgstr "Set custom cascade selector separator (press Enter to confirm after input)"
 
+msgid "设置预览初始状态"
+msgstr "Set preview initial state"
+
+msgid "设置预览对象在动画开始前的状态，相对动画以此为基准"
+msgstr "Set the state of the preview object before the animation starts; relative animations use it as the base"
+
 msgid "该指令会在文本框显示当前变量。"
 msgstr "This command displays current variables in the textbox."
 
@@ -2582,11 +2600,14 @@ msgstr "Built-in templates are stored in the install directory. Copy one as a cu
 msgid "预览"
 msgstr "Preview"
 
+msgid "预览初始状态"
+msgstr "Preview initial state"
+
 msgid "预览图标"
 msgstr "Preview icon"
 
 msgid "预览对象"
-msgstr ""
+msgstr "Preview target"
 
 msgid "预览窗口"
 msgstr "Preview window"
@@ -2613,7 +2634,7 @@ msgid "默认 default"
 msgstr "Default: default"
 
 msgid "默认（{0}）"
-msgstr ""
+msgstr "Default ({0})"
 
 msgid "默认值"
 msgstr "Default value"
diff --git a/packages/origine2/src/locales/ja.po b/packages/origine2/src/locales/ja.po
index 909f4440c..bb0a5f42e 100644
--- a/packages/origine2/src/locales/ja.po
+++ b/packages/origine2/src/locales/ja.po
@@ -291,10 +291,10 @@ msgid "亮度"
 msgstr "輝度"
 
 msgid "仅用于预览，不会写入动画文件"
-msgstr ""
+msgstr "プレビュー専用で、アニメーションファイルには保存されません"
 
 msgid "从上一关键帧到此帧"
-msgstr ""
+msgstr "前のキーフレームからこのキーフレームまで"
 
 msgid "从当前状态开始"
 msgstr "現在の状態から開始"
@@ -552,7 +552,7 @@ msgid "删除"
 msgstr "削除"
 
 msgid "删除关键帧"
-msgstr ""
+msgstr "キーフレームを削除"
 
 msgid "删除参数"
 msgstr "引数を削除"
@@ -560,15 +560,15 @@ msgstr "引数を削除"
 msgid "删除属性"
 msgstr "属性を削除"
 
+msgid "删除播放头处的关键帧"
+msgstr "再生ヘッド位置のキーフレームを削除"
+
 msgid "删除本句"
 msgstr "この文を削除"
 
 msgid "删除模板"
 msgstr "テンプレートを削除"
 
-msgid "删除此处的关键帧"
-msgstr ""
-
 msgid "删除游戏"
 msgstr "ゲームを削除"
 
@@ -672,7 +672,7 @@ msgid "可选项"
 msgstr "選択可能な選択肢"
 
 msgid "右"
-msgstr ""
+msgstr "右"
 
 msgid "右侧"
 msgstr "右"
@@ -717,7 +717,7 @@ msgid "唇形同步与眨眼"
 msgstr "口パクとまばたき"
 
 msgid "回到开头"
-msgstr ""
+msgstr "先頭に戻る"
 
 msgid "回收站"
 msgstr "ゴミ箱"
@@ -761,15 +761,15 @@ msgstr "ダイアログの左下に小さなアバターを表示します"
 msgid "在当前场景内创建跳转标签"
 msgstr "現在のシーン内にジャンプ用ラベルを作成"
 
+msgid "在播放头处添加关键帧，直接修改左侧的数值也会添加。添加后可在轨道上拖动关键帧调整时间，右键设置缓动或删除"
+msgstr "再生ヘッド位置にキーフレームを追加します。左の値を直接変更しても追加されます。追加後はトラック上でドラッグして時間を調整し、右クリックでイージングの設定や削除ができます"
+
 msgid "在文件管理器中打开"
 msgstr "ファイルエクスプローラーで開く"
 
 msgid "在新标签页中预览"
 msgstr "新しいタブでプレビュー"
 
-msgid "在此处添加关键帧"
-msgstr ""
-
 msgid "在游戏中显示当前变量"
 msgstr "ゲーム内に現在の変数を表示"
 
@@ -975,7 +975,7 @@ msgid "属性"
 msgstr "プロパティ"
 
 msgid "左"
-msgstr ""
+msgstr "左"
 
 msgid "左侧"
 msgstr "左"
@@ -1023,7 +1023,7 @@ msgid "已读文本外层"
 msgstr "既読テキスト外側"
 
 msgid "帧继承"
-msgstr ""
+msgstr "キーフレーム継承"
 
 msgid "帮助"
 msgstr "ヘルプ"
@@ -1065,10 +1065,10 @@ msgid "开启"
 msgstr "有効化"
 
 msgid "开启时，关键帧中的值基于对象当前的状态计算，例如位置、旋转为相加，缩放为相乘；关闭时均为绝对值。可在属性的菜单中修改计算方式。"
-msgstr ""
+msgstr "オンの場合、キーフレームの値はオブジェクトの現在の状態を基準に計算されます（位置・回転は加算、スケールは乗算など）。オフの場合はすべて絶対値になります。計算方法は各プロパティのメニューで変更できます。"
 
-msgid "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。"
-msgstr ""
+msgid "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。关闭时时间轴左侧显示的数值仍按开启时计算，可能与预览不一致，请以预览为准。"
+msgstr "オンの場合、各プロパティは自身のキーフレーム間でのみ補間されます。オフの場合、キーフレームで設定されていないプロパティはオブジェクトの現在の状態に戻ります。オフの場合もタイムライン左側の値はオンとして計算されるため、プレビューと一致しないことがあります。プレビューを正としてください。"
 
 msgid "开始"
 msgstr "開始"
@@ -1107,7 +1107,7 @@ msgid "当前预览变量"
 msgstr "現在のプレビュー変数"
 
 msgid "循环播放"
-msgstr ""
+msgstr "ループ再生"
 
 msgid "德语"
 msgstr "ドイツ語"
@@ -1178,6 +1178,9 @@ msgstr "実行後にキャラクター名を消去"
 msgid "扩展名"
 msgstr "拡張子"
 
+msgid "拖动调整时间，右键设置缓动或删除"
+msgstr "ドラッグで時間を調整、右クリックでイージングの設定や削除"
+
 msgid "拖拽调整变换（建议打开快速预览效果）"
 msgstr "ドラッグ調整変換（「高速プレビューエフェクト」のオンをお勧めします）"
 
@@ -1239,7 +1242,7 @@ msgid "搜索选项"
 msgstr "検索オプション"
 
 msgid "播放"
-msgstr ""
+msgstr "再生"
 
 msgid "播放一小段视频"
 msgstr "動画ファイルを再生する"
@@ -1259,6 +1262,9 @@ msgstr "操作"
 msgid "操作失败"
 msgstr "操作に失敗しました"
 
+msgid "放大"
+msgstr "拡大"
+
 msgid "故障电影滤镜"
 msgstr "グリッチ映画"
 
@@ -1293,7 +1299,7 @@ msgid "效果音文件"
 msgstr "効果音ファイル"
 
 msgid "文件内容不是有效的 v2 动画，请在脚本编辑器中修改"
-msgstr ""
+msgstr "ファイルの内容が有効な v2 アニメーションではありません。スクリプトエディタで修正してください"
 
 msgid "文件名"
 msgstr "ファイル名"
@@ -1464,7 +1470,7 @@ msgid "普通对话，显示角色名"
 msgstr "通常の会話、キャラクター名を表示"
 
 msgid "暂停"
-msgstr ""
+msgstr "一時停止"
 
 msgid "暂无变量快照"
 msgstr "変数スナップショットはありません"
@@ -1473,7 +1479,7 @@ msgid "暂无调试变量，点击“新增变量”创建。"
 msgstr "デバッグ変数はありません。「変数を追加」をクリックして作成してください。"
 
 msgid "更多"
-msgstr ""
+msgstr "その他"
 
 msgid "更多设置"
 msgstr "その他の設定"
@@ -1731,7 +1737,7 @@ msgid "添加语句"
 msgstr "ステートメントを追加"
 
 msgid "清除"
-msgstr ""
+msgstr "クリア"
 
 msgid "清除当前舞台的特殊效果"
 msgstr "現在のステージの特殊効果をクリア"
@@ -1848,19 +1854,19 @@ msgid "目标行"
 msgstr "対象行"
 
 msgid "相乘"
-msgstr ""
+msgstr "乗算"
 
 msgid "相乘（基准为 0 时视为 1）"
-msgstr ""
+msgstr "乗算（基準が 0 のときは 1 とみなす）"
 
 msgid "相加"
-msgstr ""
+msgstr "加算"
 
 msgid "相对"
 msgstr "相対"
 
 msgid "相对动画"
-msgstr ""
+msgstr "相対アニメーション"
 
 msgid "眨眼"
 msgstr "瞬き"
@@ -1914,7 +1920,7 @@ msgid "移动到回收站失败"
 msgstr "ゴミ箱への移動に失敗しました"
 
 msgid "移除属性"
-msgstr ""
+msgstr "プロパティを削除"
 
 msgid "立即注视"
 msgstr "即座に注視"
@@ -1992,7 +1998,7 @@ msgid "绝对"
 msgstr "絶対"
 
 msgid "绝对值"
-msgstr ""
+msgstr "絶対値"
 
 msgid "继续游戏按钮"
 msgstr "「続きから」ボタン"
@@ -2010,11 +2016,14 @@ msgid "缓出"
 msgstr "イーズアウト"
 
 msgid "缓动"
-msgstr ""
+msgstr "イージング"
 
 msgid "缓动类型"
 msgstr "イージングタイプ"
 
+msgid "编辑"
+msgstr "編集"
+
 msgid "编辑图标"
 msgstr "編集アイコン"
 
@@ -2036,11 +2045,14 @@ msgstr "コンポーネントの編集"
 msgid "繁体中文"
 msgstr "繁体字中国語"
 
+msgid "缩小"
+msgstr "縮小"
+
 msgid "缩放"
 msgstr "スケール"
 
 msgid "缩放（Ctrl + 滚轮）"
-msgstr ""
+msgstr "ズーム（Ctrl + ホイール）"
 
 msgid "网格视图"
 msgstr "グリッドビュー"
@@ -2199,7 +2211,7 @@ msgid "解锁鉴赏类型"
 msgstr "タイプ"
 
 msgid "计算方式"
-msgstr ""
+msgstr "計算方法"
 
 msgid "设置"
 msgstr "設定"
@@ -2216,6 +2228,12 @@ msgstr "人物や背景のアニメーションを設定する。"
 msgid "设置自定义级联选择器分隔符（输入后按回车键确认）"
 msgstr "カスタムカスケードセレクター区切り文字を設定（入力後Enterキーで確定）"
 
+msgid "设置预览初始状态"
+msgstr "プレビューの初期状態を設定"
+
+msgid "设置预览对象在动画开始前的状态，相对动画以此为基准"
+msgstr "アニメーション開始前のプレビュー対象の状態を設定します。相対アニメーションはこれを基準にします"
+
 msgid "该指令会在文本框显示当前变量。"
 msgstr "このコマンドは現在の変数をテキストボックスに表示します。"
 
@@ -2582,11 +2600,14 @@ msgstr "組み込みテンプレートはインストールディレクトリに
 msgid "预览"
 msgstr "プレビュー"
 
+msgid "预览初始状态"
+msgstr "プレビューの初期状態"
+
 msgid "预览图标"
 msgstr "プレビューアイコン"
 
 msgid "预览对象"
-msgstr ""
+msgstr "プレビュー対象"
 
 msgid "预览窗口"
 msgstr "プレビューウィンドウ"
@@ -2613,7 +2634,7 @@ msgid "默认 default"
 msgstr "既定値 default"
 
 msgid "默认（{0}）"
-msgstr ""
+msgstr "デフォルト（{0}）"
 
 msgid "默认值"
 msgstr "デフォルト値"
diff --git a/packages/origine2/src/locales/ko.po b/packages/origine2/src/locales/ko.po
index d857d6769..4310db842 100644
--- a/packages/origine2/src/locales/ko.po
+++ b/packages/origine2/src/locales/ko.po
@@ -291,10 +291,10 @@ msgid "亮度"
 msgstr "밝기"
 
 msgid "仅用于预览，不会写入动画文件"
-msgstr ""
+msgstr "미리보기 전용이며 애니메이션 파일에 저장되지 않습니다"
 
 msgid "从上一关键帧到此帧"
-msgstr ""
+msgstr "이전 키프레임에서 이 키프레임까지"
 
 msgid "从当前状态开始"
 msgstr "현재 상태에서 시작"
@@ -552,7 +552,7 @@ msgid "删除"
 msgstr "삭제"
 
 msgid "删除关键帧"
-msgstr ""
+msgstr "키프레임 삭제"
 
 msgid "删除参数"
 msgstr "인자 삭제"
@@ -560,15 +560,15 @@ msgstr "인자 삭제"
 msgid "删除属性"
 msgstr "속성 삭제"
 
+msgid "删除播放头处的关键帧"
+msgstr "재생 헤드 위치의 키프레임 삭제"
+
 msgid "删除本句"
 msgstr "현재 문장 삭제"
 
 msgid "删除模板"
 msgstr "템플릿 삭제"
 
-msgid "删除此处的关键帧"
-msgstr ""
-
 msgid "删除游戏"
 msgstr "게임 삭제"
 
@@ -672,7 +672,7 @@ msgid "可选项"
 msgstr "선택 가능 항목"
 
 msgid "右"
-msgstr ""
+msgstr "오른쪽"
 
 msgid "右侧"
 msgstr "우측"
@@ -717,7 +717,7 @@ msgid "唇形同步与眨眼"
 msgstr "립싱크 및 눈 깜박임"
 
 msgid "回到开头"
-msgstr ""
+msgstr "처음으로"
 
 msgid "回收站"
 msgstr "휴지통"
@@ -761,15 +761,15 @@ msgstr "대화창 좌측 하단에 미니 프로필 표시"
 msgid "在当前场景内创建跳转标签"
 msgstr "현재 장면 내에 이동 태그 생성"
 
+msgid "在播放头处添加关键帧，直接修改左侧的数值也会添加。添加后可在轨道上拖动关键帧调整时间，右键设置缓动或删除"
+msgstr "재생 헤드 위치에 키프레임을 추가합니다. 왼쪽 값을 직접 수정해도 추가됩니다. 추가한 뒤 트랙에서 드래그해 시간을 조정하고, 우클릭으로 이징을 설정하거나 삭제할 수 있습니다"
+
 msgid "在文件管理器中打开"
 msgstr "파일 탐색기에서 열기"
 
 msgid "在新标签页中预览"
 msgstr "새 탭에서 미리보기"
 
-msgid "在此处添加关键帧"
-msgstr ""
-
 msgid "在游戏中显示当前变量"
 msgstr "게임 내에서 현재 변수 표시"
 
@@ -975,7 +975,7 @@ msgid "属性"
 msgstr "속성"
 
 msgid "左"
-msgstr ""
+msgstr "왼쪽"
 
 msgid "左侧"
 msgstr "왼쪽"
@@ -1023,7 +1023,7 @@ msgid "已读文本外层"
 msgstr "읽은 텍스트 외부"
 
 msgid "帧继承"
-msgstr ""
+msgstr "키프레임 상속"
 
 msgid "帮助"
 msgstr "도움말"
@@ -1065,10 +1065,10 @@ msgid "开启"
 msgstr "켜기"
 
 msgid "开启时，关键帧中的值基于对象当前的状态计算，例如位置、旋转为相加，缩放为相乘；关闭时均为绝对值。可在属性的菜单中修改计算方式。"
-msgstr ""
+msgstr "켜면 키프레임 값이 오브젝트의 현재 상태를 기준으로 계산됩니다(위치·회전은 더하기, 스케일은 곱하기 등). 끄면 모두 절대값입니다. 계산 방식은 각 속성의 메뉴에서 바꿀 수 있습니다."
 
-msgid "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。"
-msgstr ""
+msgid "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。关闭时时间轴左侧显示的数值仍按开启时计算，可能与预览不一致，请以预览为准。"
+msgstr "켜면 각 속성은 자신의 키프레임 사이에서만 보간됩니다. 끄면 키프레임에 설정되지 않은 속성은 오브젝트의 현재 상태로 돌아갑니다. 끈 상태에서도 타임라인 왼쪽에 표시되는 값은 켠 상태로 계산되므로 미리보기와 다를 수 있습니다. 미리보기를 기준으로 확인하세요."
 
 msgid "开始"
 msgstr "시작"
@@ -1107,7 +1107,7 @@ msgid "当前预览变量"
 msgstr "현재 미리보기 변수"
 
 msgid "循环播放"
-msgstr ""
+msgstr "반복 재생"
 
 msgid "德语"
 msgstr "독일어"
@@ -1178,6 +1178,9 @@ msgstr "실행 후 캐릭터 이름 초기화"
 msgid "扩展名"
 msgstr "확장명"
 
+msgid "拖动调整时间，右键设置缓动或删除"
+msgstr "드래그해 시간 조정, 우클릭으로 이징 설정 또는 삭제"
+
 msgid "拖拽调整变换（建议打开快速预览效果）"
 msgstr "드래그하여 변형 조정(빠른 미리보기 효과를 켜는 것을 권장합니다)"
 
@@ -1239,7 +1242,7 @@ msgid "搜索选项"
 msgstr "옵션 검색"
 
 msgid "播放"
-msgstr ""
+msgstr "재생"
 
 msgid "播放一小段视频"
 msgstr "비디오 클립 재생"
@@ -1259,6 +1262,9 @@ msgstr "조작"
 msgid "操作失败"
 msgstr "조작 실패"
 
+msgid "放大"
+msgstr "확대"
+
 msgid "故障电影滤镜"
 msgstr "글리치 영화 필터"
 
@@ -1293,7 +1299,7 @@ msgid "效果音文件"
 msgstr "효과음 파일"
 
 msgid "文件内容不是有效的 v2 动画，请在脚本编辑器中修改"
-msgstr ""
+msgstr "파일 내용이 올바른 v2 애니메이션이 아닙니다. 스크립트 편집기에서 수정하세요"
 
 msgid "文件名"
 msgstr "파일 이름"
@@ -1464,7 +1470,7 @@ msgid "普通对话，显示角色名"
 msgstr "일반 대화, 캐릭터 이름 표시"
 
 msgid "暂停"
-msgstr ""
+msgstr "일시정지"
 
 msgid "暂无变量快照"
 msgstr "변수 스냅샷 없음"
@@ -1473,7 +1479,7 @@ msgid "暂无调试变量，点击“新增变量”创建。"
 msgstr "디버그 변수가 없습니다. “변수 추가”를 클릭하여 생성하세요."
 
 msgid "更多"
-msgstr ""
+msgstr "더 보기"
 
 msgid "更多设置"
 msgstr "추가 설정"
@@ -1731,7 +1737,7 @@ msgid "添加语句"
 msgstr "문장 추가"
 
 msgid "清除"
-msgstr ""
+msgstr "지우기"
 
 msgid "清除当前舞台的特殊效果"
 msgstr "현재 스테이지의 이펙트 초기화"
@@ -1848,19 +1854,19 @@ msgid "目标行"
 msgstr "대상 줄"
 
 msgid "相乘"
-msgstr ""
+msgstr "곱하기"
 
 msgid "相乘（基准为 0 时视为 1）"
-msgstr ""
+msgstr "곱하기 (기준이 0이면 1로 간주)"
 
 msgid "相加"
-msgstr ""
+msgstr "더하기"
 
 msgid "相对"
 msgstr "상대적"
 
 msgid "相对动画"
-msgstr ""
+msgstr "상대 애니메이션"
 
 msgid "眨眼"
 msgstr "눈 깜박임"
@@ -1914,7 +1920,7 @@ msgid "移动到回收站失败"
 msgstr "휴지통으로 이동하지 못했습니다"
 
 msgid "移除属性"
-msgstr ""
+msgstr "속성 제거"
 
 msgid "立即注视"
 msgstr "즉시 주시"
@@ -1992,7 +1998,7 @@ msgid "绝对"
 msgstr "절대적"
 
 msgid "绝对值"
-msgstr ""
+msgstr "절대값"
 
 msgid "继续游戏按钮"
 msgstr "이어하기 버튼"
@@ -2010,11 +2016,14 @@ msgid "缓出"
 msgstr "이즈 아웃"
 
 msgid "缓动"
-msgstr ""
+msgstr "이징"
 
 msgid "缓动类型"
 msgstr "이징 유형"
 
+msgid "编辑"
+msgstr "편집"
+
 msgid "编辑图标"
 msgstr "아이콘 편집"
 
@@ -2036,11 +2045,14 @@ msgstr "편집 위젯"
 msgid "繁体中文"
 msgstr "중국어 번체"
 
+msgid "缩小"
+msgstr "축소"
+
 msgid "缩放"
 msgstr "축소/확대"
 
 msgid "缩放（Ctrl + 滚轮）"
-msgstr ""
+msgstr "확대/축소 (Ctrl + 휠)"
 
 msgid "网格视图"
 msgstr "그리드 보기"
@@ -2199,7 +2211,7 @@ msgid "解锁鉴赏类型"
 msgstr "해금 갤러리 유형"
 
 msgid "计算方式"
-msgstr ""
+msgstr "계산 방식"
 
 msgid "设置"
 msgstr "설정"
@@ -2216,6 +2228,12 @@ msgstr "스탠딩 또는 배경의 입/퇴장 애니메이션 설정"
 msgid "设置自定义级联选择器分隔符（输入后按回车键确认）"
 msgstr "커스텀 캐스케이드 선택기 구분 기호 설정 (입력 후 Enter 키를 눌러 확인)"
 
+msgid "设置预览初始状态"
+msgstr "미리보기 초기 상태 설정"
+
+msgid "设置预览对象在动画开始前的状态，相对动画以此为基准"
+msgstr "애니메이션 시작 전 미리보기 대상의 상태를 설정합니다. 상대 애니메이션은 이를 기준으로 합니다"
+
 msgid "该指令会在文本框显示当前变量。"
 msgstr "이 명령어는 텍스트 창에 현재 변수를 표시합니다."
 
@@ -2582,11 +2600,14 @@ msgstr "사전 설정 템플릿은 설치 디렉터리에 저장됩니다. 편
 msgid "预览"
 msgstr "미리보기"
 
+msgid "预览初始状态"
+msgstr "미리보기 초기 상태"
+
 msgid "预览图标"
 msgstr "미리보기 아이콘"
 
 msgid "预览对象"
-msgstr ""
+msgstr "미리보기 대상"
 
 msgid "预览窗口"
 msgstr "미리보기 창"
@@ -2613,7 +2634,7 @@ msgid "默认 default"
 msgstr "기본값 default"
 
 msgid "默认（{0}）"
-msgstr ""
+msgstr "기본값 ({0})"
 
 msgid "默认值"
 msgstr "기본값"
diff --git a/packages/origine2/src/locales/zhCn.po b/packages/origine2/src/locales/zhCn.po
index a45b72982..05091b70e 100644
--- a/packages/origine2/src/locales/zhCn.po
+++ b/packages/origine2/src/locales/zhCn.po
@@ -560,15 +560,15 @@ msgstr "删除参数"
 msgid "删除属性"
 msgstr "删除属性"
 
+msgid "删除播放头处的关键帧"
+msgstr "删除播放头处的关键帧"
+
 msgid "删除本句"
 msgstr "删除本句"
 
 msgid "删除模板"
 msgstr "删除模板"
 
-msgid "删除此处的关键帧"
-msgstr "删除此处的关键帧"
-
 msgid "删除游戏"
 msgstr "删除游戏"
 
@@ -761,15 +761,15 @@ msgstr "在对话框的左下角显示一个小头像"
 msgid "在当前场景内创建跳转标签"
 msgstr "在当前场景内创建跳转标签"
 
+msgid "在播放头处添加关键帧，直接修改左侧的数值也会添加。添加后可在轨道上拖动关键帧调整时间，右键设置缓动或删除"
+msgstr "在播放头处添加关键帧，直接修改左侧的数值也会添加。添加后可在轨道上拖动关键帧调整时间，右键设置缓动或删除"
+
 msgid "在文件管理器中打开"
 msgstr "在文件管理器中打开"
 
 msgid "在新标签页中预览"
 msgstr "在新标签页中预览"
 
-msgid "在此处添加关键帧"
-msgstr "在此处添加关键帧"
-
 msgid "在游戏中显示当前变量"
 msgstr "在游戏中显示当前变量"
 
@@ -1067,8 +1067,8 @@ msgstr "开启"
 msgid "开启时，关键帧中的值基于对象当前的状态计算，例如位置、旋转为相加，缩放为相乘；关闭时均为绝对值。可在属性的菜单中修改计算方式。"
 msgstr "开启时，关键帧中的值基于对象当前的状态计算，例如位置、旋转为相加，缩放为相乘；关闭时均为绝对值。可在属性的菜单中修改计算方式。"
 
-msgid "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。"
-msgstr "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。"
+msgid "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。关闭时时间轴左侧显示的数值仍按开启时计算，可能与预览不一致，请以预览为准。"
+msgstr "开启时，每个属性只在自己的关键帧之间过渡；关闭时，关键帧中没有设置的属性会回到对象当前的状态。关闭时时间轴左侧显示的数值仍按开启时计算，可能与预览不一致，请以预览为准。"
 
 msgid "开始"
 msgstr "开始"
@@ -1178,6 +1178,9 @@ msgstr "执行后清除角色名"
 msgid "扩展名"
 msgstr "扩展名"
 
+msgid "拖动调整时间，右键设置缓动或删除"
+msgstr "拖动调整时间，右键设置缓动或删除"
+
 msgid "拖拽调整变换（建议打开快速预览效果）"
 msgstr "拖拽调整变换（建议打开快速预览效果）"
 
@@ -1259,6 +1262,9 @@ msgstr "操作"
 msgid "操作失败"
 msgstr "操作失败"
 
+msgid "放大"
+msgstr "放大"
+
 msgid "故障电影滤镜"
 msgstr "故障电影滤镜"
 
@@ -2015,6 +2021,9 @@ msgstr "缓动"
 msgid "缓动类型"
 msgstr "缓动类型"
 
+msgid "编辑"
+msgstr "编辑"
+
 msgid "编辑图标"
 msgstr "编辑图标"
 
@@ -2036,6 +2045,9 @@ msgstr "编辑组件"
 msgid "繁体中文"
 msgstr "繁体中文"
 
+msgid "缩小"
+msgstr "缩小"
+
 msgid "缩放"
 msgstr "缩放"
 
@@ -2216,6 +2228,12 @@ msgstr "设置立绘或背景的进出场动画"
 msgid "设置自定义级联选择器分隔符（输入后按回车键确认）"
 msgstr "设置自定义级联选择器分隔符（输入后按回车键确认）"
 
+msgid "设置预览初始状态"
+msgstr "设置预览初始状态"
+
+msgid "设置预览对象在动画开始前的状态，相对动画以此为基准"
+msgstr "设置预览对象在动画开始前的状态，相对动画以此为基准"
+
 msgid "该指令会在文本框显示当前变量。"
 msgstr "该指令会在文本框显示当前变量。"
 
@@ -2582,6 +2600,9 @@ msgstr "预置模板保存在安装目录，请先复制为自定义模板再编
 msgid "预览"
 msgstr "预览"
 
+msgid "预览初始状态"
+msgstr "预览初始状态"
+
 msgid "预览图标"
 msgstr "预览图标"
 

From 669556783e6a8164bf5e2181126a4f5dd64ffc00 Mon Sep 17 00:00:00 2001
From: Mahiru <Mahiru_@outlook.com>
Date: Sun, 4 Oct 2026 18:44:36 +0800
Subject: [PATCH 08/12] =?UTF-8?q?feat:=20=E5=A4=9A=E6=AE=B5=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=94=AF=E6=8C=81=20animation=20v2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor-preview-protocol/src/index.ts |   5 +-
 packages/origine2/src/locales/en.po           |   9 +-
 packages/origine2/src/locales/ja.po           |   9 +-
 packages/origine2/src/locales/ko.po           |   9 +-
 packages/origine2/src/locales/zhCn.po         |   9 +-
 .../AnimationEditor/AnimationEditor.tsx       |   4 +-
 .../AnimationEditor/SceneAnimationEditor.tsx  |  50 ++++
 .../model/useAnimationDocument.ts             |  41 +--
 .../preview/useScenePreviewAnimation.ts       |  67 +++++
 .../sceneAnimationEditor.module.scss          |  14 +
 .../settings/AnimationSettingsPanel.tsx       |  33 ++-
 .../SentenceEditor/SetTempAnimation.tsx       | 278 ++++--------------
 .../GraphicalEditor/SentenceEditor/index.tsx  |   3 +-
 .../components/LegacyTempAnimationFrames.tsx  | 240 +++++++++++++++
 .../origine2/src/utils/editorPreviewClient.ts |   5 +
 15 files changed, 504 insertions(+), 272 deletions(-)
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/SceneAnimationEditor.tsx
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/preview/useScenePreviewAnimation.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/sceneAnimationEditor.module.scss
 create mode 100644 packages/origine2/src/pages/editor/GraphicalEditor/components/LegacyTempAnimationFrames.tsx

diff --git a/packages/editor-preview-protocol/src/index.ts b/packages/editor-preview-protocol/src/index.ts
index 803cfedd9..2183951eb 100644
--- a/packages/editor-preview-protocol/src/index.ts
+++ b/packages/editor-preview-protocol/src/index.ts
@@ -134,7 +134,10 @@ export interface SeekAnimationPayload {
   target: string;
   animation: JsonValue;
   time: number;
-  /** 动画开始前目标的状态，与默认变换合并后作为当前基准状态；缺省时取目标在演算状态中的变换 */
+  /**
+   * 动画开始前目标的状态，与默认变换合并后作为当前基准状态。
+   * 缺省时取带 transformBaselineRevision 的 sync-scene 记录的目标语句执行前的变换，再缺省时取演算状态中的变换
+   */
   baseTransform?: Transform;
 }
 
diff --git a/packages/origine2/src/locales/en.po b/packages/origine2/src/locales/en.po
index 6c66396aa..01f70c639 100644
--- a/packages/origine2/src/locales/en.po
+++ b/packages/origine2/src/locales/en.po
@@ -143,9 +143,6 @@ msgstr "setAnimation: Choose a file of animation;"
 msgid "setComplexAnimation:universalSoftIn -target=fig-center;"
 msgstr "setComplexAnimation:universalSoftIn -target=fig-center;"
 
-msgid "setTempAnimation:[{\"duration\":0},{\"duration\":500}];"
-msgstr "setTempAnimation:[{\"duration\":0},{\"duration\":500}];"
-
 msgid "setTextbox:hide;"
 msgstr "setTextbox:hide;"
 
@@ -596,6 +593,9 @@ msgstr "Animation name"
 msgid "动画帧控制"
 msgstr "Frame control"
 
+msgid "动画编辑器"
+msgstr "Animation editor"
+
 msgid "半张嘴"
 msgstr "Half open mouth"
 
@@ -1148,6 +1148,9 @@ msgstr "Manually trigger next intro sentence"
 msgid "手动输入 ID"
 msgstr "Manually enter ID"
 
+msgid "打开动画编辑器"
+msgstr "Open animation editor"
+
 msgid "打开安装目录"
 msgstr "Open install directory"
 
diff --git a/packages/origine2/src/locales/ja.po b/packages/origine2/src/locales/ja.po
index bb0a5f42e..34e2db144 100644
--- a/packages/origine2/src/locales/ja.po
+++ b/packages/origine2/src/locales/ja.po
@@ -143,9 +143,6 @@ msgstr "setAnimation: アニメーションを選択;"
 msgid "setComplexAnimation:universalSoftIn -target=fig-center;"
 msgstr "setComplexAnimation:universalSoftIn -target=fig-center;"
 
-msgid "setTempAnimation:[{\"duration\":0},{\"duration\":500}];"
-msgstr "setTempAnimation:[{\"duration\":0},{\"duration\":500}];"
-
 msgid "setTextbox:hide;"
 msgstr "setTextbox:hide;"
 
@@ -596,6 +593,9 @@ msgstr "アニメーション名"
 msgid "动画帧控制"
 msgstr "フレームコントロール"
 
+msgid "动画编辑器"
+msgstr "アニメーションエディタ"
+
 msgid "半张嘴"
 msgstr "半分開いた口"
 
@@ -1148,6 +1148,9 @@ msgstr "手動で次の行を表示"
 msgid "手动输入 ID"
 msgstr "IDを手動で設定"
 
+msgid "打开动画编辑器"
+msgstr "アニメーションエディタを開く"
+
 msgid "打开安装目录"
 msgstr "インストールディレクトリを開く"
 
diff --git a/packages/origine2/src/locales/ko.po b/packages/origine2/src/locales/ko.po
index 4310db842..14e4307a2 100644
--- a/packages/origine2/src/locales/ko.po
+++ b/packages/origine2/src/locales/ko.po
@@ -143,9 +143,6 @@ msgstr "setAnimation:애니메이션 파일 선택;"
 msgid "setComplexAnimation:universalSoftIn -target=fig-center;"
 msgstr "setComplexAnimation:universalSoftIn -target=fig-center;"
 
-msgid "setTempAnimation:[{\"duration\":0},{\"duration\":500}];"
-msgstr "setTempAnimation:[{\"duration\":0},{\"duration\":500}];"
-
 msgid "setTextbox:hide;"
 msgstr "setTextbox:hide;"
 
@@ -596,6 +593,9 @@ msgstr "애니메이션 이름"
 msgid "动画帧控制"
 msgstr "애니메이션 프레임 제어"
 
+msgid "动画编辑器"
+msgstr "애니메이션 에디터"
+
 msgid "半张嘴"
 msgstr "반쯤 벌린 입"
 
@@ -1148,6 +1148,9 @@ msgstr "수동으로 다음 문장을 표시"
 msgid "手动输入 ID"
 msgstr "ID 수동 입력"
 
+msgid "打开动画编辑器"
+msgstr "애니메이션 에디터 열기"
+
 msgid "打开安装目录"
 msgstr "다운로드 목록을 열기"
 
diff --git a/packages/origine2/src/locales/zhCn.po b/packages/origine2/src/locales/zhCn.po
index 05091b70e..082b5487e 100644
--- a/packages/origine2/src/locales/zhCn.po
+++ b/packages/origine2/src/locales/zhCn.po
@@ -143,9 +143,6 @@ msgstr "setAnimation:选择动画文件;"
 msgid "setComplexAnimation:universalSoftIn -target=fig-center;"
 msgstr "setComplexAnimation:universalSoftIn -target=fig-center;"
 
-msgid "setTempAnimation:[{\"duration\":0},{\"duration\":500}];"
-msgstr "setTempAnimation:[{\"duration\":0},{\"duration\":500}];"
-
 msgid "setTextbox:hide;"
 msgstr "setTextbox:hide;"
 
@@ -596,6 +593,9 @@ msgstr "动画名"
 msgid "动画帧控制"
 msgstr "动画帧控制"
 
+msgid "动画编辑器"
+msgstr "动画编辑器"
+
 msgid "半张嘴"
 msgstr "半张嘴"
 
@@ -1148,6 +1148,9 @@ msgstr "手动触发下一句"
 msgid "手动输入 ID"
 msgstr "手动输入 ID"
 
+msgid "打开动画编辑器"
+msgstr "打开动画编辑器"
+
 msgid "打开安装目录"
 msgstr "打开安装目录"
 
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/AnimationEditor.tsx b/packages/origine2/src/pages/editor/AnimationEditor/AnimationEditor.tsx
index ea0b8b73c..957020c67 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/AnimationEditor.tsx
+++ b/packages/origine2/src/pages/editor/AnimationEditor/AnimationEditor.tsx
@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 import type { JsonValue } from '@webgal/editor-preview-protocol';
 import { ResizableSplit } from './components/ResizableSplit';
 import { toAnimationObject } from './model/animationDocument';
-import { useAnimationDocument } from './model/useAnimationDocument';
+import { useAnimationFileDocument } from './model/useAnimationDocument';
 import { AnimationPreview } from './preview/AnimationPreview';
 import { usePreviewSettings } from './preview/previewSettings';
 import { AnimationSettingsPanel } from './settings/AnimationSettingsPanel';
@@ -18,7 +18,7 @@ interface IAnimationEditorProps {
  * 上半部分左为预览、右为与时间轴无关的设置，下半部分为时间轴，区域之间的分割线可拖动
  */
 export function AnimationEditor({ url, initialText }: IAnimationEditorProps) {
-  const { doc, updateTracks, updateFields } = useAnimationDocument(url, initialText);
+  const { doc, updateTracks, updateFields } = useAnimationFileDocument(url, initialText);
   const [previewSettings, updatePreviewSettings] = usePreviewSettings();
   /** 播放头时刻（毫秒） */
   const [time, setTime] = useState(0);
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/SceneAnimationEditor.tsx b/packages/origine2/src/pages/editor/AnimationEditor/SceneAnimationEditor.tsx
new file mode 100644
index 000000000..2d8080b03
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/SceneAnimationEditor.tsx
@@ -0,0 +1,50 @@
+import { useMemo, useState } from 'react';
+import type { JsonValue } from '@webgal/editor-preview-protocol';
+import { toAnimationObject } from './model/animationDocument';
+import { useAnimationDocument } from './model/useAnimationDocument';
+import { IScenePreviewSentence, useScenePreviewAnimation } from './preview/useScenePreviewAnimation';
+import { AnimationSettingsPanel } from './settings/AnimationSettingsPanel';
+import { AnimationTimeline } from './timeline/AnimationTimeline';
+import styles from './sceneAnimationEditor.module.scss';
+
+interface ISceneAnimationEditorProps {
+  /** 打开时的动画 JSON（v2），之后以编辑器中的状态为准 */
+  initialText: string;
+  /** 动画修改后调用，参数为单行的动画 JSON，可直接写入语句 */
+  onChange: (text: string) => void;
+  /** 动画所在的语句，用于在游戏预览中预览 */
+  sentence: IScenePreviewSentence;
+}
+
+/**
+ * 编辑场景语句中的动画（多段动画）。与动画文件的编辑器基本一致，
+ * 但不自带预览：动画运行在真实的场景中，直接在游戏预览里从语句执行前的状态开始预览
+ */
+export function SceneAnimationEditor({ initialText, onChange, sentence }: ISceneAnimationEditorProps) {
+  // 语句只能写在一行里，因此不缩进
+  const { doc, updateTracks, updateFields } = useAnimationDocument(initialText, (next) =>
+    onChange(JSON.stringify(toAnimationObject(next))),
+  );
+  /** 播放头时刻（毫秒） */
+  const [time, setTime] = useState(0);
+  // 动画对象由 JSON 解析而来，必定可以序列化
+  const animation = useMemo(() => toAnimationObject(doc) as JsonValue, [doc]);
+  useScenePreviewAnimation(sentence, animation, time);
+
+  return (
+    <div className={styles.editor}>
+      <div className={styles.settings}>
+        <AnimationSettingsPanel fields={doc.fields} updateFields={updateFields} />
+      </div>
+      <div className={styles.timeline}>
+        <AnimationTimeline
+          doc={doc}
+          updateTracks={updateTracks}
+          updateFields={updateFields}
+          time={time}
+          onTimeChange={setTime}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationDocument.ts b/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationDocument.ts
index cc33a49e8..94fa6db05 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationDocument.ts
+++ b/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationDocument.ts
@@ -7,37 +7,32 @@ import { IAnimationDocument, ITrack, parseAnimation, serializeAnimation } from '
 const SAVE_DELAY = 300;
 
 /**
- * 正在编辑的动画。修改后自动保存，并更新代码编辑器共用的文件缓存
- * @param initialText 打开时的文件内容，之后以编辑器中的状态为准
+ * 正在编辑的动画。修改后防抖调用 save 保存
+ * @param initialText 打开时的动画 JSON，之后以编辑器中的状态为准
+ * @param save 保存修改后的动画，不要求是稳定的函数
  */
-export function useAnimationDocument(url: string, initialText: string) {
+export function useAnimationDocument(initialText: string, save: (doc: IAnimationDocument) => void) {
   const [doc, setDoc] = useState(() => parseAnimation(initialText));
-  const { mutate } = useJsonFileText(url);
-  /** 上次保存（或打开时）的文件内容，内容没变就不写文件，例如只是添加了一条空轨道 */
+  const saveRef = useRef(save);
+  saveRef.current = save;
+  /** 上次保存（或打开时）的内容，内容没变就不保存，例如只是添加了一条空轨道 */
   const lastTextRef = useRef(serializeAnimation(doc));
 
-  const save = useMemo(
-    () =>
-      debounce(async (text: string) => {
-        await api.manageGameControllerEditTextFile({ textFile: text, path: url });
-        mutate(text, { revalidate: false });
-      }, SAVE_DELAY),
-    [url, mutate],
-  );
+  const debouncedSave = useMemo(() => debounce((next: IAnimationDocument) => saveRef.current(next), SAVE_DELAY), []);
 
   useEffect(() => {
     const text = serializeAnimation(doc);
     if (text === lastTextRef.current) return;
     lastTextRef.current = text;
-    save(text);
-  }, [doc, save]);
+    debouncedSave(doc);
+  }, [doc, debouncedSave]);
 
   // 离开编辑器时立即写入尚未保存的修改
   useEffect(
     () => () => {
-      save.flush();
+      debouncedSave.flush();
     },
-    [save],
+    [debouncedSave],
   );
 
   const updateTracks = useCallback((update: (tracks: ITrack[]) => ITrack[]) => {
@@ -50,3 +45,15 @@ export function useAnimationDocument(url: string, initialText: string) {
 
   return { doc, updateTracks, updateFields };
 }
+
+/**
+ * 编辑动画文件：保存时写入文件，并更新代码编辑器共用的文件缓存
+ */
+export function useAnimationFileDocument(url: string, initialText: string) {
+  const { mutate } = useJsonFileText(url);
+  return useAnimationDocument(initialText, async (doc) => {
+    const text = serializeAnimation(doc);
+    await api.manageGameControllerEditTextFile({ textFile: text, path: url });
+    mutate(text, { revalidate: false });
+  });
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/preview/useScenePreviewAnimation.ts b/packages/origine2/src/pages/editor/AnimationEditor/preview/useScenePreviewAnimation.ts
new file mode 100644
index 000000000..3fe25e6b0
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/preview/useScenePreviewAnimation.ts
@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from 'react';
+import type { JsonValue } from '@webgal/editor-preview-protocol';
+import { EditorPreviewClient } from '@/utils/editorPreviewClient';
+import { createId } from '@/utils/createId';
+import { eventBus } from '@/utils/eventBus';
+
+/** 场景中的一条动画语句，以及动画作用的对象 */
+export interface IScenePreviewSentence {
+  scenePath: string;
+  /** 执行完这条语句后的停止指针：语句末行（0-based）+ 1，与图形编辑器保存时的同步一致 */
+  lineNumber: number;
+  /** 语句原文 */
+  lineContent: string;
+  target: string;
+  /** 是否从默认状态开始（-transformFrom=default） */
+  isFromDefault: boolean;
+}
+
+/**
+ * 在游戏预览中预览场景里的一条动画语句，把动画在播放头处的状态写到目标上。
+ *
+ * 打开时以及场景保存后（保存会让预览重新执行到这条语句），让预览执行到这条语句，
+ * 并记录语句执行前各对象的状态（transformBaselineRevision），预览以此作为动画的基准状态，
+ * 这样无论预览执行到语句后处于什么状态，动画都从语句执行前开始。关闭时让预览回到语句执行后的真实状态
+ */
+export function useScenePreviewAnimation(sentence: IScenePreviewSentence, animation: JsonValue, time: number) {
+  /** 每当预览的舞台状态变化时加一：同步完成、舞台重新提交后，目标会被写回舞台状态，需要重新写入 */
+  const [stageRevision, setStageRevision] = useState(0);
+  const sentenceRef = useRef(sentence);
+  sentenceRef.current = sentence;
+
+  useEffect(() => {
+    const syncToSentence = (withBaseline: boolean) => {
+      const { scenePath, lineNumber, lineContent } = sentenceRef.current;
+      EditorPreviewClient.sendSyncScene({
+        scenePath,
+        lineNumber,
+        lineCommandString: lineContent,
+        force: true,
+        // 记录基线时立即结算语句中的演出，避免动画语句本身在预览中播放
+        settleMode: withBaseline ? 'immediate' : undefined,
+        transformBaselineRevision: withBaseline ? createId() : undefined,
+      });
+    };
+    const syncWithBaseline = () => syncToSentence(true);
+    const handleStageSnapshot = () => setStageRevision((revision) => revision + 1);
+
+    syncWithBaseline();
+    eventBus.on('editor:update-scene', syncWithBaseline);
+    eventBus.on('editor-preview:stage-snapshot', handleStageSnapshot);
+    return () => {
+      eventBus.off('editor:update-scene', syncWithBaseline);
+      eventBus.off('editor-preview:stage-snapshot', handleStageSnapshot);
+      syncToSentence(false);
+    };
+  }, []);
+
+  const { target, isFromDefault } = sentence;
+  // 播放时每帧都会触发，合并到下一个动画帧再发送
+  useEffect(() => {
+    const frameId = requestAnimationFrame(() => {
+      // 从默认状态开始时，以默认变换为基准；否则由预览取语句执行前的状态
+      EditorPreviewClient.seekAnimation({ target, animation, time, baseTransform: isFromDefault ? {} : undefined });
+    });
+    return () => cancelAnimationFrame(frameId);
+  }, [stageRevision, target, animation, time, isFromDefault]);
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/sceneAnimationEditor.module.scss b/packages/origine2/src/pages/editor/AnimationEditor/sceneAnimationEditor.module.scss
new file mode 100644
index 000000000..861c70af3
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/sceneAnimationEditor.module.scss
@@ -0,0 +1,14 @@
+.editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.settings {
+  flex: none;
+}
+
+.timeline {
+  flex: 1;
+  min-height: 240px;
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx b/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx
index e05e22e43..1d6de2d85 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx
+++ b/packages/origine2/src/pages/editor/AnimationEditor/settings/AnimationSettingsPanel.tsx
@@ -11,23 +11,18 @@ import styles from './animationSettingsPanel.module.scss';
 interface IAnimationSettingsPanelProps {
   fields: Record<string, unknown>;
   updateFields: (update: (fields: Record<string, unknown>) => Record<string, unknown>) => void;
-  preview: IPreviewSettings;
-  onPreviewChange: (patch: Partial<IPreviewSettings>) => void;
+  /** 不传时不显示预览设置，例如在场景中编辑多段动画时，直接用游戏预览 */
+  preview?: IPreviewSettings;
+  onPreviewChange?: (patch: Partial<IPreviewSettings>) => void;
 }
 
 /**
- * 与时间轴无关的设置：上半部分写入动画文件，下半部分只用于预览。
- * 预览初始状态在抽屉中编辑，开启时自动打开
+ * 与时间轴无关的设置：上半部分写入动画文件，下半部分只用于预览
  */
 // 播放时每帧都会重新渲染编辑器，这里的内容与播放头无关，用 memo 跳过
 export const AnimationSettingsPanel = memo(SettingsPanel);
 
-function SettingsPanel(props: IAnimationSettingsPanelProps) {
-  const { fields, updateFields, preview, onPreviewChange } = props;
-  const targetLabels: Record<PreviewTarget, string> = { figure: t`立绘`, background: t`背景` };
-  const positionLabels: Record<FigurePosition, string> = { left: t`左`, center: t`中`, right: t`右` };
-  const [isInitialStateDrawerOpen, setIsInitialStateDrawerOpen] = useState(false);
-
+function SettingsPanel({ fields, updateFields, preview, onPreviewChange }: IAnimationSettingsPanelProps) {
   return (
     <div className={styles.panel}>
       <Section title={t`动画`}>
@@ -50,6 +45,22 @@ function SettingsPanel(props: IAnimationSettingsPanelProps) {
           />
         </SettingRow>
       </Section>
+      {preview && onPreviewChange && <PreviewSection preview={preview} onPreviewChange={onPreviewChange} />}
+    </div>
+  );
+}
+
+/**
+ * 预览设置。预览初始状态在抽屉中编辑，开启时自动打开
+ */
+function PreviewSection(props: Required<Pick<IAnimationSettingsPanelProps, 'preview' | 'onPreviewChange'>>) {
+  const { preview, onPreviewChange } = props;
+  const targetLabels: Record<PreviewTarget, string> = { figure: t`立绘`, background: t`背景` };
+  const positionLabels: Record<FigurePosition, string> = { left: t`左`, center: t`中`, right: t`右` };
+  const [isInitialStateDrawerOpen, setIsInitialStateDrawerOpen] = useState(false);
+
+  return (
+    <>
       <Section title={t`预览`} info={t`仅用于预览，不会写入动画文件`}>
         <SettingRow label={t`预览对象`}>
           <Dropdown
@@ -104,7 +115,7 @@ function SettingsPanel(props: IAnimationSettingsPanelProps) {
         json={preview.initialTransform}
         onChange={(initialTransform) => onPreviewChange({ initialTransform })}
       />
-    </div>
+    </>
   );
 }
 
diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTempAnimation.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTempAnimation.tsx
index d953c8991..dfb1b0eeb 100644
--- a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTempAnimation.tsx
+++ b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/SetTempAnimation.tsx
@@ -7,24 +7,17 @@ import TerreToggle from "../../../../components/terreToggle/TerreToggle";
 import { t } from "@lingui/macro";
 import WheelDropdown from "@/pages/editor/GraphicalEditor/components/WheelDropdown";
 import { combineSubmitString } from "@/utils/combineSubmitString";
-import { EditorPreviewClient } from "@/utils/editorPreviewClient";
-import { Button, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger, Text } from "@fluentui/react-components";
-import { useEaseTypeOptions } from "@/hooks/useEaseTypeOptions";
-import { CloseSmall, Down, More, Plus, Up } from "@icon-park/react";
-import { useGlobalEffectEditor } from "@/hooks/useGlobalEffectEditor";
-import { useRef } from "react";
+import { Button } from "@fluentui/react-components";
 import { getTransformFromArgs, isTransformFromDefault, TransformFromOption } from "../components/TransformFromOption";
 import { usePresetTargetOptions } from "@/hooks/usePresetTargetOptions";
-
-interface IAnimationFrame {
-  transform: string;
-  duration: number;
-  ease?: string;
-}
+import useEditorStore from "@/store/useEditorStore";
+import { TerrePanel } from "../components/TerrePanel";
+import { LegacyTempAnimationFrames } from "../components/LegacyTempAnimationFrames";
+import { isEditableAnimation } from "@/pages/editor/AnimationEditor/model/animationDocument";
+import { SceneAnimationEditor } from "@/pages/editor/AnimationEditor/SceneAnimationEditor";
 
 export default function SetTempAnimation(props: ISentenceEditorProps) {
   const content = useValue(props.sentence.content);
-  const animationFrameArray = useValue<IAnimationFrame[]>(initTransformArray(content.value));
   const target = useValue(getArgByKey(props.sentence, "target")?.toString() ?? "");
   const presetTargets = usePresetTargetOptions();
   const isPresetTarget = Array.from(presetTargets.keys()).includes(target.value);
@@ -33,199 +26,40 @@ export default function SetTempAnimation(props: ISentenceEditorProps) {
   const isFromDefault = useValue(isTransformFromDefault(props.sentence));
   const keep = useValue(getArgByKey(props.sentence, 'keep') === true);
   const parallel = useValue(getArgByKey(props.sentence, 'parallel') === true);
-  const easeTypeOptions = useEaseTypeOptions();
-
-  const submit = () => {
-    const submitString = combineSubmitString(
-      props.sentence.commandRaw,
-      content.value,
-      props.sentence.args,
-      [
-        {key: "target", value: target.value},
-        ...getTransformFromArgs(isFromDefault.value),
-        {key: "keep", value: keep.value},
-        {key: "parallel", value: parallel.value},
-        {key: "next", value: isGoNext.value},
-      ],
-      props.sentence.inlineComment,
-    );
-    props.onSubmit(submitString);
-  };
-
-  const joinFrameString = () => {
-    content.set(`[${animationFrameArray.value.map(frame => {
-      try {
-        const transformObj = JSON.parse(frame.transform) as any;
-        const frameObj = { ...transformObj, duration: frame.duration, ease: frame.ease };
-        return JSON.stringify(frameObj);
-      } catch {
-        return `{"duration":0}`;
-      }
-    }).join(",")}]`);
-  };
-
-  const addFrame = (index: number, frame: IAnimationFrame) => {
-    if (index < 0 || index > animationFrameArray.value.length) {
-      return;
-    }
-    const newArray = [...animationFrameArray.value];
-    newArray.splice(index, 0, frame);
-    animationFrameArray.set(newArray);
-    joinFrameString();
-  };
+  const updateExpand = useEditorStore.use.updateExpand();
+  // 新建的多段动画使用 Animation v2；v1 关键帧数组（以及无法解析的内容）只为兼容旧脚本，沿用原来的编辑方式
+  const isLegacy = !isEditableAnimation(content.value, true);
 
-  const deleteFrame = (index: number) => {
-    if (index < 0 || index >= animationFrameArray.value.length) {
-      return;
-    }
-    const newArray = animationFrameArray.value.filter((_, i) => i !== index);
-    animationFrameArray.set(newArray);
-    joinFrameString();
-  };
-
-  const moveFrame = (fromIndex: number, toIndex: number) => {
-    if (toIndex < 0 || toIndex >= animationFrameArray.value.length) {
-      return;
-    }
-    const newArray = [...animationFrameArray.value];
-    const [movedItem] = newArray.splice(fromIndex, 1);
-    newArray.splice(toIndex, 0, movedItem);
-    animationFrameArray.set(newArray);
-    joinFrameString();
-  };
+  const buildSentence = () => combineSubmitString(
+    props.sentence.commandRaw,
+    content.value,
+    props.sentence.args,
+    [
+      {key: "target", value: target.value},
+      ...getTransformFromArgs(isFromDefault.value),
+      {key: "keep", value: keep.value},
+      {key: "parallel", value: parallel.value},
+      {key: "next", value: isGoNext.value},
+    ],
+    props.sentence.inlineComment,
+  );
 
-  const updateFrame = (index: number, newFrame: IAnimationFrame) => {
-    if (index < 0 || index >= animationFrameArray.value.length) {
-      return;
-    }
-    const newArray = [...animationFrameArray.value];
-    newArray[index] = newFrame;
-    animationFrameArray.set(newArray);
-    joinFrameString();
-  };
-  const effectFrameIndex = useRef(-1);
-  const openEffectEditor = useGlobalEffectEditor((event) => {
-    const index = effectFrameIndex.current;
-    if (event.action === 'change' && animationFrameArray.value[index]) {
-      updateFrame(index, { ...animationFrameArray.value[index], transform: event.value || "{}" });
-      submit();
-    } else if (event.action === 'preview') {
-      EditorPreviewClient.setEffect({ target: target.value, transform: event.value, phase: 'preview' });
-    }
-  });
-
-  const animationFrameElement = (index: number) => {
-    if (index < 0 || index >= animationFrameArray.value.length) {
-      return null;
-    }
-    const frame = animationFrameArray.value[index];
-    return <div key={`animation-frame-${index}`}>
-      <Text style={{ color: "var(--text-weak)", wordBreak: "break-word" }}>{`${index} ${frame.transform}`}</Text>
-      <div style={{ display: "flex", flexWrap: "wrap", gap: "4px", width: "100%" }}>
-        <CommonOptions key={`frame-control-${index}`} title={t`动画帧控制`}>
-          <Button
-            icon={<Up />}
-            appearance="subtle"
-            aria-label={t`上移`}
-            title={t`上移`}
-            disabled={index === 0}
-            onClick={() => {
-              moveFrame(index, index - 1);
-              submit();
-            }}
-          />
-          <Button
-            icon={<Down />}
-            appearance="subtle"
-            aria-label={t`下移`}
-            title={t`下移`}
-            disabled={index === animationFrameArray.value.length - 1}
-            onClick={() => {
-              moveFrame(index, index + 1);
-              submit();
-            }}
-          />
-          <Menu>
-            <MenuTrigger>
-              <Button icon={<More/>} appearance="subtle" aria-label={t`操作`} title={t`操作`} />
-            </MenuTrigger>
-            <MenuPopover>
-              <MenuList>
-                <MenuItem icon={<Plus/>} onClick={() => {
-                  addFrame(index, { transform: "{}", duration: 0 });
-                  submit();
-                }}>
-                  {t`向上添加`}
-                </MenuItem>
-                <MenuItem icon={<CloseSmall/>} onClick={() => {
-                  deleteFrame(index);
-                  submit();
-                }}>
-                  {t`删除`}
-                </MenuItem>
-              </MenuList>
-            </MenuPopover>
-          </Menu>
-        </CommonOptions>
-        <CommonOptions key={`effect-button-${index}`} title={t`效果编辑`}>
-          <Button onClick={() => {
-            effectFrameIndex.current = index;
-            openEffectEditor({
-              title: t`效果编辑器`,
-              json: animationFrameArray.value[index]?.transform ?? "{}",
-              sentence: props.sentence,
-              index: props.index,
-              targetPath: props.targetPath,
-            });
-          }}>
-            {t`打开效果编辑器`}
-          </Button>
-        </CommonOptions>
-        <CommonOptions key={`duration-${index}`} title={t`过渡时间（单位为毫秒）`}>
-          <input
-            placeholder={t`过渡时间（单位为毫秒）`}
-            value={frame.duration.toString()}
-            className={styles.sayInput}
-            style={{ width: "100%" }}
-            onChange={(ev) => {
-              let duration = Number(ev.target.value);
-              const newDuration = Number(ev.target.value);
-              if (isNaN(newDuration))
-                duration = 0;
-              else
-                duration = newDuration;
-              updateFrame(index, { ...frame, duration: duration });
-            }}
-            onBlur={submit}
-          />
-        </CommonOptions>
-        <CommonOptions key={`easeType-${index}`} title={t`缓动类型`}>
-          <WheelDropdown
-            options={easeTypeOptions}
-            value={frame.ease ?? ""}
-            onValueChange={(newValue) => {
-              const newEase = newValue?.toString() ?? "";
-              updateFrame(index, { ...frame, ease: newEase === "" ? undefined : newEase });
-              submit();
-            }}
-          />
-        </CommonOptions>
-      </div>
-    </div>;
+  const submit = () => {
+    props.onSubmit(buildSentence());
   };
 
-
   return <div className={styles.sentenceEditorContent}>
     <div className={styles.editItem}>
-      <div style={{ display: "flex", flexDirection: "column", gap: "4px", marginBottom: "4px", width: "100%" }}>
-        {animationFrameArray.value.map((_, index) => animationFrameElement(index))}
-      </div>
-      <Button onClick={() => {
-        addFrame(animationFrameArray.value.length, { transform: "{}", duration: 0 });
-        submit();
-      }}>
-        {t`添加动画帧`}
-      </Button>
+      {isLegacy
+        ? <LegacyTempAnimationFrames
+          content={content}
+          submit={submit}
+          target={target.value}
+          sentence={props.sentence}
+          index={props.index}
+          targetPath={props.targetPath}
+        />
+        : <Button onClick={() => updateExpand(props.index)}>{t`打开动画编辑器`}</Button>}
     </div>
     <div className={styles.editItem}>
       <CommonOptions key="usePresetTarget" title={t`使用预设目标`}>
@@ -280,33 +114,21 @@ export default function SetTempAnimation(props: ISentenceEditorProps) {
       </CommonOptions>
       {props.extraOptions}
     </div>
+    {!isLegacy && <TerrePanel sentenceIndex={props.index} title={t`动画编辑器`}>
+      <SceneAnimationEditor
+        initialText={content.value}
+        onChange={(text) => {
+          content.set(text);
+          submit();
+        }}
+        sentence={{
+          scenePath: props.targetPath,
+          lineNumber: props.sentence.endLine + 1,
+          lineContent: buildSentence(),
+          target: target.value,
+          isFromDefault: isFromDefault.value,
+        }}
+      />
+    </TerrePanel>}
   </div>;
 }
-
-function initTransformArray(transformArrayStr: string): IAnimationFrame[] {
-  const trimStr = transformArrayStr.trim();
-  if (trimStr.length === 0) {
-    return [];
-  }
-
-  try {
-    const frames = JSON.parse(trimStr);
-    if (!Array.isArray(frames)) {
-      return [];
-    }
-
-    return frames.map((obj: any) => {
-      if (typeof obj !== 'object' || obj === null) {
-        return { transform: '{}', duration: 0, ease: undefined };
-      }
-      const { duration, ease, ...transform } = obj;
-      return {
-        transform: JSON.stringify(transform),
-        duration: duration ?? 0,
-        ease: ease,
-      };
-    });
-  } catch (e) {
-    return [];
-  }
-}
diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/index.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/index.tsx
index ab52385ce..a93712acf 100644
--- a/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/index.tsx
+++ b/packages/origine2/src/pages/editor/GraphicalEditor/SentenceEditor/index.tsx
@@ -351,7 +351,8 @@ export const sentenceEditorConfig: ISentenceEditorConfig[] = [
   {
     type: commandType.setTempAnimation,
     title: () => t`多段动画`,
-    initialText: () => t`setTempAnimation:[{"duration":0},{"duration":500}];`,
+    // 新建的多段动画使用 Animation v2。JSON 中的花括号会被当作 ICU 占位符，因此不经过 t
+    initialText: () => 'setTempAnimation:{"version":2,"keyframes":[]};',
     component: SetTempAnimation,
     icon: <TrendingUp theme="multi-color" className={styles.iconSvg} size="24"/>,
     descText: () => t`为立绘或背景图片设置多段动画效果`
diff --git a/packages/origine2/src/pages/editor/GraphicalEditor/components/LegacyTempAnimationFrames.tsx b/packages/origine2/src/pages/editor/GraphicalEditor/components/LegacyTempAnimationFrames.tsx
new file mode 100644
index 000000000..5ceeb4f10
--- /dev/null
+++ b/packages/origine2/src/pages/editor/GraphicalEditor/components/LegacyTempAnimationFrames.tsx
@@ -0,0 +1,240 @@
+import { ISentence } from "webgal-parser/src/interface/sceneInterface";
+import styles from "../SentenceEditor/sentenceEditor.module.scss";
+import { useValue } from "../../../../hooks/useValue";
+import CommonOptions from "./CommonOption";
+import { t } from "@lingui/macro";
+import WheelDropdown from "@/pages/editor/GraphicalEditor/components/WheelDropdown";
+import { EditorPreviewClient } from "@/utils/editorPreviewClient";
+import { Button, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger, Text } from "@fluentui/react-components";
+import { useEaseTypeOptions } from "@/hooks/useEaseTypeOptions";
+import { CloseSmall, Down, More, Plus, Up } from "@icon-park/react";
+import { useGlobalEffectEditor } from "@/hooks/useGlobalEffectEditor";
+import { useRef } from "react";
+
+interface IAnimationFrame {
+  transform: string;
+  duration: number;
+  ease?: string;
+}
+
+interface ILegacyTempAnimationFramesProps {
+  /** 语句内容，即 v1 关键帧数组；修改后立即写入，再由 submit 提交 */
+  content: { value: string; set: (newValue: string) => void };
+  submit: () => void;
+  target: string;
+  sentence: ISentence;
+  index: number;
+  targetPath: string;
+}
+
+/**
+ * 多段动画的 v1 关键帧数组（顶层为数组）的编辑器，只为兼容旧脚本保留。
+ * 新建的多段动画使用 Animation v2，在动画编辑器中编辑
+ */
+export function LegacyTempAnimationFrames(props: ILegacyTempAnimationFramesProps) {
+  const { content, submit } = props;
+  const animationFrameArray = useValue<IAnimationFrame[]>(initTransformArray(content.value));
+  const easeTypeOptions = useEaseTypeOptions();
+
+  const joinFrameString = () => {
+    content.set(`[${animationFrameArray.value.map(frame => {
+      try {
+        const transformObj = JSON.parse(frame.transform) as any;
+        const frameObj = { ...transformObj, duration: frame.duration, ease: frame.ease };
+        return JSON.stringify(frameObj);
+      } catch {
+        return `{"duration":0}`;
+      }
+    }).join(",")}]`);
+  };
+
+  const addFrame = (index: number, frame: IAnimationFrame) => {
+    if (index < 0 || index > animationFrameArray.value.length) {
+      return;
+    }
+    const newArray = [...animationFrameArray.value];
+    newArray.splice(index, 0, frame);
+    animationFrameArray.set(newArray);
+    joinFrameString();
+  };
+
+  const deleteFrame = (index: number) => {
+    if (index < 0 || index >= animationFrameArray.value.length) {
+      return;
+    }
+    const newArray = animationFrameArray.value.filter((_, i) => i !== index);
+    animationFrameArray.set(newArray);
+    joinFrameString();
+  };
+
+  const moveFrame = (fromIndex: number, toIndex: number) => {
+    if (toIndex < 0 || toIndex >= animationFrameArray.value.length) {
+      return;
+    }
+    const newArray = [...animationFrameArray.value];
+    const [movedItem] = newArray.splice(fromIndex, 1);
+    newArray.splice(toIndex, 0, movedItem);
+    animationFrameArray.set(newArray);
+    joinFrameString();
+  };
+
+  const updateFrame = (index: number, newFrame: IAnimationFrame) => {
+    if (index < 0 || index >= animationFrameArray.value.length) {
+      return;
+    }
+    const newArray = [...animationFrameArray.value];
+    newArray[index] = newFrame;
+    animationFrameArray.set(newArray);
+    joinFrameString();
+  };
+  const effectFrameIndex = useRef(-1);
+  const openEffectEditor = useGlobalEffectEditor((event) => {
+    const index = effectFrameIndex.current;
+    if (event.action === 'change' && animationFrameArray.value[index]) {
+      updateFrame(index, { ...animationFrameArray.value[index], transform: event.value || "{}" });
+      submit();
+    } else if (event.action === 'preview') {
+      EditorPreviewClient.setEffect({ target: props.target, transform: event.value, phase: 'preview' });
+    }
+  });
+
+  const animationFrameElement = (index: number) => {
+    if (index < 0 || index >= animationFrameArray.value.length) {
+      return null;
+    }
+    const frame = animationFrameArray.value[index];
+    return <div key={`animation-frame-${index}`}>
+      <Text style={{ color: "var(--text-weak)", wordBreak: "break-word" }}>{`${index} ${frame.transform}`}</Text>
+      <div style={{ display: "flex", flexWrap: "wrap", gap: "4px", width: "100%" }}>
+        <CommonOptions key={`frame-control-${index}`} title={t`动画帧控制`}>
+          <Button
+            icon={<Up />}
+            appearance="subtle"
+            aria-label={t`上移`}
+            title={t`上移`}
+            disabled={index === 0}
+            onClick={() => {
+              moveFrame(index, index - 1);
+              submit();
+            }}
+          />
+          <Button
+            icon={<Down />}
+            appearance="subtle"
+            aria-label={t`下移`}
+            title={t`下移`}
+            disabled={index === animationFrameArray.value.length - 1}
+            onClick={() => {
+              moveFrame(index, index + 1);
+              submit();
+            }}
+          />
+          <Menu>
+            <MenuTrigger>
+              <Button icon={<More/>} appearance="subtle" aria-label={t`操作`} title={t`操作`} />
+            </MenuTrigger>
+            <MenuPopover>
+              <MenuList>
+                <MenuItem icon={<Plus/>} onClick={() => {
+                  addFrame(index, { transform: "{}", duration: 0 });
+                  submit();
+                }}>
+                  {t`向上添加`}
+                </MenuItem>
+                <MenuItem icon={<CloseSmall/>} onClick={() => {
+                  deleteFrame(index);
+                  submit();
+                }}>
+                  {t`删除`}
+                </MenuItem>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+        </CommonOptions>
+        <CommonOptions key={`effect-button-${index}`} title={t`效果编辑`}>
+          <Button onClick={() => {
+            effectFrameIndex.current = index;
+            openEffectEditor({
+              title: t`效果编辑器`,
+              json: animationFrameArray.value[index]?.transform ?? "{}",
+              sentence: props.sentence,
+              index: props.index,
+              targetPath: props.targetPath,
+            });
+          }}>
+            {t`打开效果编辑器`}
+          </Button>
+        </CommonOptions>
+        <CommonOptions key={`duration-${index}`} title={t`过渡时间（单位为毫秒）`}>
+          <input
+            placeholder={t`过渡时间（单位为毫秒）`}
+            value={frame.duration.toString()}
+            className={styles.sayInput}
+            style={{ width: "100%" }}
+            onChange={(ev) => {
+              let duration = Number(ev.target.value);
+              const newDuration = Number(ev.target.value);
+              if (isNaN(newDuration))
+                duration = 0;
+              else
+                duration = newDuration;
+              updateFrame(index, { ...frame, duration: duration });
+            }}
+            onBlur={submit}
+          />
+        </CommonOptions>
+        <CommonOptions key={`easeType-${index}`} title={t`缓动类型`}>
+          <WheelDropdown
+            options={easeTypeOptions}
+            value={frame.ease ?? ""}
+            onValueChange={(newValue) => {
+              const newEase = newValue?.toString() ?? "";
+              updateFrame(index, { ...frame, ease: newEase === "" ? undefined : newEase });
+              submit();
+            }}
+          />
+        </CommonOptions>
+      </div>
+    </div>;
+  };
+
+  return <>
+    <div style={{ display: "flex", flexDirection: "column", gap: "4px", marginBottom: "4px", width: "100%" }}>
+      {animationFrameArray.value.map((_, index) => animationFrameElement(index))}
+    </div>
+    <Button onClick={() => {
+      addFrame(animationFrameArray.value.length, { transform: "{}", duration: 0 });
+      submit();
+    }}>
+      {t`添加动画帧`}
+    </Button>
+  </>;
+}
+
+function initTransformArray(transformArrayStr: string): IAnimationFrame[] {
+  const trimStr = transformArrayStr.trim();
+  if (trimStr.length === 0) {
+    return [];
+  }
+
+  try {
+    const frames = JSON.parse(trimStr);
+    if (!Array.isArray(frames)) {
+      return [];
+    }
+
+    return frames.map((obj: any) => {
+      if (typeof obj !== 'object' || obj === null) {
+        return { transform: '{}', duration: 0, ease: undefined };
+      }
+      const { duration, ease, ...transform } = obj;
+      return {
+        transform: JSON.stringify(transform),
+        duration: duration ?? 0,
+        ease: ease,
+      };
+    });
+  } catch (e) {
+    return [];
+  }
+}
diff --git a/packages/origine2/src/utils/editorPreviewClient.ts b/packages/origine2/src/utils/editorPreviewClient.ts
index 17fd9a44a..0e9973324 100644
--- a/packages/origine2/src/utils/editorPreviewClient.ts
+++ b/packages/origine2/src/utils/editorPreviewClient.ts
@@ -19,6 +19,7 @@ import {
   type ReferenceBoxQueryResultPayload,
   type PreviewReadyUpdatedPayload,
   type RequestPayloadByType,
+  type SeekAnimationPayload,
   type SetComponentVisibilityPayload,
   type SetEffectPayload,
   type SyncSceneSettleMode,
@@ -362,6 +363,10 @@ export class EditorPreviewClient {
     return sendPreviewCommand('preview.command.set-effect', payload);
   }
 
+  public static seekAnimation(payload: SeekAnimationPayload) {
+    return sendPreviewCommand('preview.command.seek-animation', payload);
+  }
+
   public static setComponentVisibility(
     payload: SetComponentVisibilityPayload,
   ) {

From cd4ecfeec50e22d32c240b305eec1b99bfdb584f Mon Sep 17 00:00:00 2001
From: Mahiru <Mahiru_@outlook.com>
Date: Sun, 4 Oct 2026 18:47:18 +0800
Subject: [PATCH 09/12] =?UTF-8?q?=E5=8A=A8=E7=94=BB=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E5=90=AF=E7=94=A8=E6=97=B6=EF=BC=8C=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E6=B8=B8=E6=88=8F=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/origine2/src/locales/en.po             |  3 +++
 packages/origine2/src/locales/ja.po             |  3 +++
 packages/origine2/src/locales/ko.po             |  3 +++
 packages/origine2/src/locales/zhCn.po           |  3 +++
 .../editor/AnimationEditor/AnimationEditor.tsx  | 10 +++++++++-
 .../editor/EditorSidebar/EditorSidebar.tsx      | 17 ++++++++++++-----
 .../EditorSidebar/editorSidebar.module.scss     | 11 +++++++++++
 packages/origine2/src/store/useEditorStore.ts   |  4 +++-
 packages/origine2/src/types/editor.ts           |  2 ++
 9 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/packages/origine2/src/locales/en.po b/packages/origine2/src/locales/en.po
index 01f70c639..94b4352be 100644
--- a/packages/origine2/src/locales/en.po
+++ b/packages/origine2/src/locales/en.po
@@ -1625,6 +1625,9 @@ msgstr "Regex flags"
 msgid "正在上传"
 msgstr "Uploading"
 
+msgid "正在使用动画编辑器，游戏预览暂时隐藏"
+msgstr "The animation editor is in use. Game preview is temporarily hidden"
+
 msgid "正在加载模板配置"
 msgstr "Loading template configuration"
 
diff --git a/packages/origine2/src/locales/ja.po b/packages/origine2/src/locales/ja.po
index 34e2db144..f3f3b06e5 100644
--- a/packages/origine2/src/locales/ja.po
+++ b/packages/origine2/src/locales/ja.po
@@ -1625,6 +1625,9 @@ msgstr "正規表現フラグ"
 msgid "正在上传"
 msgstr "アップロード中"
 
+msgid "正在使用动画编辑器，游戏预览暂时隐藏"
+msgstr "アニメーションエディタを使用中のため、ゲームプレビューを一時的に非表示にしています"
+
 msgid "正在加载模板配置"
 msgstr "テンプレート設定を読み込み中"
 
diff --git a/packages/origine2/src/locales/ko.po b/packages/origine2/src/locales/ko.po
index 14e4307a2..a279381eb 100644
--- a/packages/origine2/src/locales/ko.po
+++ b/packages/origine2/src/locales/ko.po
@@ -1625,6 +1625,9 @@ msgstr "정규식 태그"
 msgid "正在上传"
 msgstr "업로드 중"
 
+msgid "正在使用动画编辑器，游戏预览暂时隐藏"
+msgstr "애니메이션 에디터를 사용 중이므로 게임 미리보기를 잠시 숨겼습니다"
+
 msgid "正在加载模板配置"
 msgstr "템플릿 구성을 불러오는 중"
 
diff --git a/packages/origine2/src/locales/zhCn.po b/packages/origine2/src/locales/zhCn.po
index 082b5487e..3234e3306 100644
--- a/packages/origine2/src/locales/zhCn.po
+++ b/packages/origine2/src/locales/zhCn.po
@@ -1625,6 +1625,9 @@ msgstr "正则标记"
 msgid "正在上传"
 msgstr "正在上传"
 
+msgid "正在使用动画编辑器，游戏预览暂时隐藏"
+msgstr "正在使用动画编辑器，游戏预览暂时隐藏"
+
 msgid "正在加载模板配置"
 msgstr "正在加载模板配置"
 
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/AnimationEditor.tsx b/packages/origine2/src/pages/editor/AnimationEditor/AnimationEditor.tsx
index 957020c67..cddbf34a4 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/AnimationEditor.tsx
+++ b/packages/origine2/src/pages/editor/AnimationEditor/AnimationEditor.tsx
@@ -1,5 +1,6 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { JsonValue } from '@webgal/editor-preview-protocol';
+import useEditorStore from '@/store/useEditorStore';
 import { ResizableSplit } from './components/ResizableSplit';
 import { toAnimationObject } from './model/animationDocument';
 import { useAnimationFileDocument } from './model/useAnimationDocument';
@@ -24,6 +25,13 @@ export function AnimationEditor({ url, initialText }: IAnimationEditorProps) {
   const [time, setTime] = useState(0);
   // 动画对象由 JSON 解析而来，必定可以序列化
   const animation = useMemo(() => toAnimationObject(doc) as JsonValue, [doc]);
+  const updateIsAnimationEditorOpen = useEditorStore.use.updateIsAnimationEditorOpen();
+
+  // 编辑器自带预览，打开期间隐藏左侧的游戏预览，避免把两个预览混淆；只有当前标签页会挂载编辑器
+  useEffect(() => {
+    updateIsAnimationEditorOpen(true);
+    return () => updateIsAnimationEditorOpen(false);
+  }, [updateIsAnimationEditorOpen]);
 
   const preview = <AnimationPreview animation={animation} time={time} settings={previewSettings} />;
   const settings = (
diff --git a/packages/origine2/src/pages/editor/EditorSidebar/EditorSidebar.tsx b/packages/origine2/src/pages/editor/EditorSidebar/EditorSidebar.tsx
index 5abfc80f1..7aa4d5129 100644
--- a/packages/origine2/src/pages/editor/EditorSidebar/EditorSidebar.tsx
+++ b/packages/origine2/src/pages/editor/EditorSidebar/EditorSidebar.tsx
@@ -28,6 +28,9 @@ export default function EditorSideBar() {
   const isUseFontOptimization = useEditorStore.use.isUseFontOptimization();
   const isShowPreview = useEditorStore.use.isShowPreview();
   const updateIsShowPreview = useEditorStore.use.updateIsShowPreview();
+  const isAnimationEditorOpen = useEditorStore.use.isAnimationEditorOpen();
+  // 动画编辑器自带预览，打开期间不显示游戏预览（不改变预览窗口开关），离开后恢复
+  const isPreviewVisible = isShowPreview && !isAnimationEditorOpen;
 
   const isShowSidebar = useGameEditorContext((state) => state.isShowSidebar);
   const currentSidebarTab = useGameEditorContext((state) => state.currentSidebarTab);
@@ -61,10 +64,10 @@ export default function EditorSideBar() {
   }, []);
 
   useEffect(() => {
-    if (isShowPreview) {
+    if (isPreviewVisible) {
       embeddedLaunchIdRef.current = createId();
     }
-  }, [gameDir, isShowPreview]);
+  }, [gameDir, isPreviewVisible]);
 
   useEffect(() => {
     const iframeElement = ifRef.current;
@@ -84,7 +87,7 @@ export default function EditorSideBar() {
     return () => {
       iframeElement.onload = null;
     };
-  }, [gameDir, isShowPreview]);
+  }, [gameDir, isPreviewVisible]);
 
   useEffect(() => {
     const handlePreviewReady = ({ ready }: { ready: boolean }) => {
@@ -270,11 +273,15 @@ export default function EditorSideBar() {
               bottom: 0,
               overflow: 'hidden',
               pointerEvents: 'none',
-              display: isShowPreview ? 'block' : 'none',
+              display: isPreviewVisible ? 'block' : 'none',
             }}
           />
+          {isShowPreview && isAnimationEditorOpen &&
+            <div className={`${styles.previewWindow} ${styles.previewHiddenTip}`}>
+              {t`正在使用动画编辑器，游戏预览暂时隐藏`}
+            </div>}
           {/* eslint-disable-next-line react/iframe-missing-sandbox */}
-          {isShowPreview && <iframe
+          {isPreviewVisible && <iframe
             ref={ifRef}
             id="gamePreviewIframe"
             frameBorder="0"
diff --git a/packages/origine2/src/pages/editor/EditorSidebar/editorSidebar.module.scss b/packages/origine2/src/pages/editor/EditorSidebar/editorSidebar.module.scss
index ca07ba40f..154817682 100644
--- a/packages/origine2/src/pages/editor/EditorSidebar/editorSidebar.module.scss
+++ b/packages/origine2/src/pages/editor/EditorSidebar/editorSidebar.module.scss
@@ -38,6 +38,17 @@
   aspect-ratio: 16 / 9;
 }
 
+.previewHiddenTip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 16px;
+  text-align: center;
+  color: var(--text-weak);
+  background: var(--bg-card);
+}
+
 .preview_container:hover .previewWindow {
   border-radius: var(--radius-md);
   border-top-right-radius: 0;
diff --git a/packages/origine2/src/store/useEditorStore.ts b/packages/origine2/src/store/useEditorStore.ts
index a064e4b8f..ec1b65f56 100644
--- a/packages/origine2/src/store/useEditorStore.ts
+++ b/packages/origine2/src/store/useEditorStore.ts
@@ -38,6 +38,7 @@ const useEditorStoreBase = create<IEditorState & IEditorAction>()(
       isUseRealtimeEffect: true,
       debugVariables: [],
       isTrash: false,
+      isAnimationEditorOpen: false,
       updateIsWindowAdjustment: (isWindowAdjustment) => set({ isWindowAdjustment }),
       updatePage: (page) => set({ page }),
       updateSubPage: (subPage) => {
@@ -69,6 +70,7 @@ const useEditorStoreBase = create<IEditorState & IEditorAction>()(
       updateSortOrder: (sortOrder) => set({ sortOrder }),
       updateIisAutoHideToolbar: (isAutoHideToolbar) => set({ isAutoHideToolbar }),
       updateIsShowPreview: (isShowPreview) => set({ isShowPreview }),
+      updateIsAnimationEditorOpen: (isAnimationEditorOpen) => set({ isAnimationEditorOpen }),
       updateIsEnableLivePreview: (isEnableLivePreview) => set({ isEnableLivePreview }),
       updateIsAutoWarp: (isAutoWarp) => set({ isAutoWarp }),
       updateIsAutoSaveFlowchart: (isAutoSaveFlowchart) => set({ isAutoSaveFlowchart }),
@@ -87,7 +89,7 @@ const useEditorStoreBase = create<IEditorState & IEditorAction>()(
       name: 'editor-storage',
       storage: createJSONStorage(() => localStorage),
       partialize: (state) =>
-        Object.fromEntries(Object.entries(state).filter(([key]) => !['page', 'subPage', 'expand'].includes(key))),
+        Object.fromEntries(Object.entries(state).filter(([key]) => !['page', 'subPage', 'expand', 'isAnimationEditorOpen'].includes(key))),
     },
   ),
 );
diff --git a/packages/origine2/src/types/editor.ts b/packages/origine2/src/types/editor.ts
index 3c26c9890..2982a1c70 100644
--- a/packages/origine2/src/types/editor.ts
+++ b/packages/origine2/src/types/editor.ts
@@ -26,6 +26,7 @@ export interface IEditorState {
   isUseRealtimeEffect: boolean; // 是否使用实时效果
   isWindowAdjustment: boolean; // 预览窗口调整功能是否开启
   isTrash: boolean; // 是否启用回收站功能
+  isAnimationEditorOpen: boolean; // 当前标签页是否为动画编辑器（自带预览，此时隐藏游戏预览），不持久化
   debugVariables: IDebugVariable[];
 }
 
@@ -48,6 +49,7 @@ export interface IEditorAction {
   updateSortOrder: (sortOrder: IEditorState['sortOrder']) => void;
   updateIisAutoHideToolbar: (isAutoHideToolbar: IEditorState['isAutoHideToolbar']) => void;
   updateIsShowPreview: (isShowPreview: IEditorState['isShowPreview']) => void;
+  updateIsAnimationEditorOpen: (isAnimationEditorOpen: IEditorState['isAnimationEditorOpen']) => void;
   updateIsEnableLivePreview: (isEnableLivePreview: IEditorState['isEnableLivePreview']) => void;
   updateIsAutoWarp: (isAutoWarp: IEditorState['isAutoWarp']) => void;
   updateIsAutoSaveFlowchart: (isAutoSaveFlowchart: IEditorState['isAutoSaveFlowchart']) => void;

From a49d0cfd53206e194dcdc3e09c26c4f8029b7c51 Mon Sep 17 00:00:00 2001
From: Mahiru <Mahiru_@outlook.com>
Date: Sun, 4 Oct 2026 20:46:42 +0800
Subject: [PATCH 10/12] =?UTF-8?q?=E4=B8=BA=E5=8A=A8=E7=94=BB=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E9=83=A8=E5=88=86=E5=B1=9E=E6=80=A7=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=8F=AF=E8=A7=86=E5=8C=96=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model/animationSettings.ts                |  7 ++++
 .../AnimationEditor/model/colorChannels.ts    | 30 ++++++++++++++
 .../AnimationEditor/model/trackOperations.ts  |  9 ++++
 .../model/useAnimationProperties.ts           |  6 ++-
 .../timeline/AnimationTimeline.tsx            |  1 +
 .../AnimationEditor/timeline/ColorSwatch.tsx  | 41 +++++++++++++++++++
 .../AnimationEditor/timeline/TrackHeader.tsx  | 41 +++++++++++++------
 .../AnimationEditor/timeline/buildTrackRow.ts | 41 ++++++++++++++++---
 .../timeline/timeline.module.scss             | 21 ++++++++++
 9 files changed, 179 insertions(+), 18 deletions(-)
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/model/colorChannels.ts
 create mode 100644 packages/origine2/src/pages/editor/AnimationEditor/timeline/ColorSwatch.tsx

diff --git a/packages/origine2/src/pages/editor/AnimationEditor/model/animationSettings.ts b/packages/origine2/src/pages/editor/AnimationEditor/model/animationSettings.ts
index f8ff4cbb7..99b56e3f5 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/model/animationSettings.ts
+++ b/packages/origine2/src/pages/editor/AnimationEditor/model/animationSettings.ts
@@ -64,6 +64,13 @@ export function setRelativeCalc(
   return isEmpty(relativeCalc) ? omit(fields, 'relativeCalc') : { ...fields, relativeCalc };
 }
 
+/**
+ * 帧中的值是否为绝对值：非相对动画，或该属性的计算方式为绝对值
+ */
+export function isAbsoluteValue(fields: Record<string, unknown>, path: string): boolean {
+  return !isRelative(fields) || (getRelativeCalcOverride(fields, path) ?? getDefaultRelativeCalc(path)) === 'absolute';
+}
+
 /**
  * 当前基准状态在帧值中的表示：相加时为 0，相乘时为 1，绝对值时为属性的默认值。
  * 用于显示第一个关键帧之前以及没有关键帧的属性的值
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/model/colorChannels.ts b/packages/origine2/src/pages/editor/AnimationEditor/model/colorChannels.ts
new file mode 100644
index 000000000..f0e0f96ec
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/model/colorChannels.ts
@@ -0,0 +1,30 @@
+/**
+ * @file 颜色属性。引擎中颜色按 R、G、B 三个通道分别存储（0-255），时间轴上也是三条轨道；
+ * 为了能用拾色器编辑，把同一颜色的三个通道视为一组
+ */
+import { ITrack } from './animationDocument';
+import { insertTrackAfter, setValueAt, updatePoints } from './trackOperations';
+
+export type Rgb = [number, number, number];
+export type ColorChannels = readonly [string, string, string];
+
+const COLOR_CHANNELS: ColorChannels[] = [
+  ['colorRed', 'colorGreen', 'colorBlue'],
+  ['bevelRed', 'bevelGreen', 'bevelBlue'],
+];
+
+/** 属性所在颜色的三个通道；不是颜色通道时为 undefined */
+export function getColorChannels(path: string): ColorChannels | undefined {
+  return COLOR_CHANNELS.find((channels) => channels.includes(path));
+}
+
+/**
+ * 在 time 时刻把颜色设为 rgb：三个通道各设一个关键帧。缺少的通道轨道插到同组已有轨道之后
+ */
+export function setColorAt(tracks: ITrack[], time: number, { channels, rgb }: { channels: ColorChannels; rgb: Rgb }) {
+  return channels.reduce((next, path, index) => {
+    const lastChannelPath = [...next].reverse().find((track) => channels.includes(track.path))?.path;
+    const withTrack = next.some((track) => track.path === path) ? next : insertTrackAfter(next, path, lastChannelPath);
+    return updatePoints(withTrack, path, (points) => setValueAt(points, time, rgb[index]));
+  }, tracks);
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/model/trackOperations.ts b/packages/origine2/src/pages/editor/AnimationEditor/model/trackOperations.ts
index c063dd5f3..987ede08c 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/model/trackOperations.ts
+++ b/packages/origine2/src/pages/editor/AnimationEditor/model/trackOperations.ts
@@ -18,6 +18,15 @@ export function addTrack(tracks: ITrack[], path: string): ITrack[] {
   return [...tracks, { path, points: [] }];
 }
 
+/**
+ * 在 afterPath 对应的轨道之后插入一条空轨道；afterPath 不存在时加到末尾
+ */
+export function insertTrackAfter(tracks: ITrack[], path: string, afterPath: string | undefined): ITrack[] {
+  const index = tracks.findIndex((track) => track.path === afterPath);
+  if (index < 0) return addTrack(tracks, path);
+  return [...tracks.slice(0, index + 1), { path, points: [] }, ...tracks.slice(index + 1)];
+}
+
 export function removeTrack(tracks: ITrack[], path: string): ITrack[] {
   return tracks.filter((track) => track.path !== path);
 }
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationProperties.ts b/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationProperties.ts
index 3543579e2..34cd30a55 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationProperties.ts
+++ b/packages/origine2/src/pages/editor/AnimationEditor/model/useAnimationProperties.ts
@@ -12,6 +12,8 @@ export interface IAnimationProperty {
   step: number;
   /** 显示时保留的小数位数 */
   precision: number;
+  /** 开关类属性（如各种电影滤镜），0 为关闭，非 0 为开启 */
+  isToggle: boolean;
 }
 
 export interface IPropertyGroup {
@@ -52,6 +54,8 @@ export function useAnimationProperties() {
             defaultValue: config.slider?.defaultValue ?? 0,
             step: precision === 0 ? 1 : 0.01,
             precision,
+            // 效果编辑器中用下拉框、复选框编辑的属性都是开关
+            isToggle: config.type === 'dropdown' || config.type === 'checkbox',
           };
         }),
       };
@@ -60,7 +64,7 @@ export function useAnimationProperties() {
 
     /** 文件里可能有这里不认识的属性（如 shockwaveFilter），按路径原样显示 */
     const getProperty = (path: string): IAnimationProperty =>
-      propertyMap.get(path) ?? { path, label: path, shortLabel: path, defaultValue: 0, step: 0.01, precision: 3 };
+      propertyMap.get(path) ?? { path, label: path, shortLabel: path, defaultValue: 0, step: 0.01, precision: 3, isToggle: false };
 
     return { groups, getProperty };
   }, [effectConfig, fieldGroups]);
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/AnimationTimeline.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/AnimationTimeline.tsx
index 262a876a7..5efec603d 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/timeline/AnimationTimeline.tsx
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/AnimationTimeline.tsx
@@ -55,6 +55,7 @@ export function AnimationTimeline({ doc, updateTracks, updateFields, time, onTim
     path: track.path,
     ...buildTrackRow(track, {
       fields: doc.fields,
+      tracks: doc.tracks,
       time,
       pxPerMs,
       laneWidth,
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/ColorSwatch.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/ColorSwatch.tsx
new file mode 100644
index 000000000..9b9d3afbd
--- /dev/null
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/ColorSwatch.tsx
@@ -0,0 +1,41 @@
+import { Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components';
+import { ColorPicker } from '@fluentui/react';
+import { t } from '@lingui/macro';
+import { rgbToColor } from '@/pages/editor/GraphicalEditor/utils/rgbToColor';
+import { Rgb } from '../model/colorChannels';
+import styles from './timeline.module.scss';
+
+interface IColorSwatchProps {
+  /** 播放头处的颜色，各通道 0-255 */
+  rgb: Rgb;
+  onChange: (rgb: Rgb) => void;
+}
+
+/**
+ * 显示颜色的小色块，点击打开拾色器。拾色器与效果编辑器中的相同
+ */
+export function ColorSwatch({ rgb, onChange }: IColorSwatchProps) {
+  // 关键帧之间的插值可能是小数，拾色器只接受整数
+  const [red, green, blue] = rgb.map((channel) => Math.round(Math.min(255, Math.max(0, channel))));
+
+  return (
+    <Popover positioning="below-start" trapFocus>
+      <PopoverTrigger disableButtonEnhancement>
+        <button
+          type="button"
+          className={styles.colorSwatch}
+          style={{ background: `rgb(${red}, ${green}, ${blue})` }}
+          title={t`选择颜色`}
+          aria-label={t`选择颜色`}
+        />
+      </PopoverTrigger>
+      <PopoverSurface>
+        <ColorPicker
+          color={rgbToColor(red, green, blue)}
+          alphaType="none"
+          onChange={(_, color) => onChange([color.r, color.g, color.b])}
+        />
+      </PopoverSurface>
+    </Popover>
+  );
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackHeader.tsx b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackHeader.tsx
index c9ffdb376..dc55334d5 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackHeader.tsx
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/TrackHeader.tsx
@@ -10,12 +10,15 @@ import {
   MenuPopover,
   MenuTrigger,
   SpinButton,
+  Switch,
   Tooltip,
 } from '@fluentui/react-components';
 import { DeleteRegular, DiamondFilled, DiamondRegular, MoreHorizontalRegular } from '@fluentui/react-icons';
 import { t } from '@lingui/macro';
 import { IAnimationProperty } from '../model/useAnimationProperties';
 import { RELATIVE_CALCS, RelativeCalc } from '../model/animationSettings';
+import { Rgb } from '../model/colorChannels';
+import { ColorSwatch } from './ColorSwatch';
 import { formatValue } from './timelineLayout';
 import styles from './timeline.module.scss';
 
@@ -23,6 +26,8 @@ export interface ITrackHeaderProps {
   property: IAnimationProperty;
   /** 播放头处的值 */
   value: number;
+  /** 颜色通道的拾色器，修改时在播放头处为三个通道设置关键帧；其他属性没有 */
+  color?: { rgb: Rgb; onChange: (rgb: Rgb) => void };
   /** 播放头处是否有关键帧 */
   hasKeyframe: boolean;
   onValueChange: (value: number) => void;
@@ -51,18 +56,30 @@ export function TrackHeader(props: ITrackHeaderProps) {
   return (
     <div className={styles.header}>
       <span className={styles.trackLabel} title={property.path}>{property.label}</span>
-      <SpinButton
-        className={styles.valueInput}
-        size="small"
-        appearance="filled-darker"
-        value={value}
-        displayValue={formatValue(value, property.precision)}
-        step={property.step}
-        onChange={(_, data) => {
-          const next = data.value ?? parseFloat(data.displayValue ?? '');
-          if (Number.isFinite(next)) props.onValueChange(next);
-        }}
-      />
+      {props.color && <ColorSwatch rgb={props.color.rgb} onChange={props.color.onChange} />}
+      {property.isToggle ? (
+        // 与数值框同宽，保持各行的关键帧按钮对齐
+        <div className={`${styles.valueInput} ${styles.toggleInput}`}>
+          <Switch
+            size="small"
+            checked={value !== 0}
+            onChange={(_, data) => props.onValueChange(data.checked ? 1 : 0)}
+          />
+        </div>
+      ) : (
+        <SpinButton
+          className={styles.valueInput}
+          size="small"
+          appearance="filled-darker"
+          value={value}
+          displayValue={formatValue(value, property.precision)}
+          step={property.step}
+          onChange={(_, data) => {
+            const next = data.value ?? parseFloat(data.displayValue ?? '');
+            if (Number.isFinite(next)) props.onValueChange(next);
+          }}
+        />
+      )}
       <Tooltip
         content={
           hasKeyframe
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/buildTrackRow.ts b/packages/origine2/src/pages/editor/AnimationEditor/timeline/buildTrackRow.ts
index d7876054d..a330191c0 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/timeline/buildTrackRow.ts
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/buildTrackRow.ts
@@ -3,9 +3,11 @@ import {
   getDefaultRelativeCalc,
   getNeutralValue,
   getRelativeCalcOverride,
+  isAbsoluteValue,
   isRelative,
   setRelativeCalc,
 } from '../model/animationSettings';
+import { getColorChannels, Rgb, setColorAt } from '../model/colorChannels';
 import {
   findLastPointAt,
   removePoint,
@@ -23,6 +25,8 @@ type Updater<T> = (update: (value: T) => T) => void;
 
 export interface ITrackRowContext {
   fields: Record<string, unknown>;
+  /** 全部轨道，颜色通道需要读取同组其他通道的值 */
+  tracks: ITrack[];
   time: number;
   pxPerMs: number;
   laneWidth: number;
@@ -41,10 +45,10 @@ export interface ITrackRowContext {
  * 没有码表开关，所有属性都相当于开启了码表：在播放头处修改值就会在此处设置关键帧
  */
 export function buildTrackRow(track: ITrack, context: ITrackRowContext) {
-  const { fields, time, getProperty } = context;
+  const { time } = context;
   const { path, points } = track;
-  const property = getProperty(path);
-  const value = sampleTrackValue(points, time, getNeutralValue(fields, path, property.defaultValue));
+  const property = context.getProperty(path);
+  const value = sampleValueAt(path, points, context);
   // 关键帧放在整毫秒上；暂停、拖动后播放头都已对齐，这里只是兜底
   const keyTime = Math.round(time);
   const keyframe = findLastPointAt(points, keyTime);
@@ -54,12 +58,13 @@ export function buildTrackRow(track: ITrack, context: ITrackRowContext) {
   const header: ITrackHeaderProps = {
     property,
     value,
+    color: buildColorProps(path, context, keyTime),
     hasKeyframe: keyframe !== undefined,
     onValueChange: (newValue) => updateOwnPoints((prev) => setValueAt(prev, keyTime, newValue)),
     onToggleKeyframe: () =>
       updateOwnPoints((prev) => (keyframe ? removePoint(prev, keyframe.id) : setValueAt(prev, keyTime, value))),
-    relativeCalc: isRelative(fields)
-      ? { override: getRelativeCalcOverride(fields, path), default: getDefaultRelativeCalc(path) }
+    relativeCalc: isRelative(context.fields)
+      ? { override: getRelativeCalcOverride(context.fields, path), default: getDefaultRelativeCalc(path) }
       : null,
     onRelativeCalcChange: (calc) => context.updateFields((prev) => setRelativeCalc(prev, path, calc)),
     onRemove: () => context.updateTracks((tracks) => removeTrack(tracks, path)),
@@ -78,3 +83,29 @@ export function buildTrackRow(track: ITrack, context: ITrackRowContext) {
 
   return { header, lane };
 }
+
+/** 播放头处的值；第一个关键帧之前以及没有关键帧时为基准状态 */
+function sampleValueAt(path: string, points: IKeyPoint[], context: ITrackRowContext) {
+  const neutral = getNeutralValue(context.fields, path, context.getProperty(path).defaultValue);
+  return sampleTrackValue(points, context.time, neutral);
+}
+
+/**
+ * 颜色通道的拾色器。同一颜色只在第一条显示出来的通道上提供；
+ * 相对动画中通道的值不是绝对值时，拾色器的颜色没有意义，不提供
+ */
+function buildColorProps(path: string, context: ITrackRowContext, keyTime: number): ITrackHeaderProps['color'] {
+  const channels = getColorChannels(path);
+  const firstShownChannel = channels && context.tracks.find((track) => channels.includes(track.path));
+  if (!channels || firstShownChannel?.path !== path) return undefined;
+  if (!channels.every((channel) => isAbsoluteValue(context.fields, channel))) return undefined;
+
+  const rgb = channels.map((channel) => {
+    const points = context.tracks.find((track) => track.path === channel)?.points ?? [];
+    return sampleValueAt(channel, points, context);
+  }) as Rgb;
+  return {
+    rgb,
+    onChange: (newRgb) => context.updateTracks((tracks) => setColorAt(tracks, keyTime, { channels, rgb: newRgb })),
+  };
+}
diff --git a/packages/origine2/src/pages/editor/AnimationEditor/timeline/timeline.module.scss b/packages/origine2/src/pages/editor/AnimationEditor/timeline/timeline.module.scss
index f64a62b11..3dc952e91 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/timeline/timeline.module.scss
+++ b/packages/origine2/src/pages/editor/AnimationEditor/timeline/timeline.module.scss
@@ -153,6 +153,27 @@ $ruler-height: 24px;
   min-width: 0;
 }
 
+.colorSwatch {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-right: 2px;
+  padding: 0;
+  border: 1px solid var(--black-15pct);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.toggleInput {
+  display: flex;
+  align-items: center;
+
+  // 去掉开关自带的外边距：上下的会撑高这一行，左边的会让它与数值框错开
+  :global(.fui-Switch__indicator) {
+    margin: 0;
+  }
+}
+
 .keyframeOn {
   color: var(--primary);
 }

From 9d7337e144b5f62efda95553f54226e49ae36d5e Mon Sep 17 00:00:00 2001
From: Mahiru <Mahiru_@outlook.com>
Date: Sun, 4 Oct 2026 20:57:44 +0800
Subject: [PATCH 11/12] =?UTF-8?q?fix:=20=E4=BD=BF=E7=94=A8=20time=20?=
 =?UTF-8?q?=E8=80=8C=E9=9D=9E=20duration?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model/animationDocument.ts                | 20 ++++++++-----------
 .../game/animation/blur-v2.json               |  2 +-
 .../game/animation/dotFilm-v2.json            |  2 +-
 .../game/animation/enter-from-bottom-v2.json  |  4 ++--
 .../game/animation/enter-from-left-v2.json    |  4 ++--
 .../game/animation/enter-from-right-v2.json   |  4 ++--
 .../game/animation/enter-v2.json              |  4 ++--
 .../game/animation/exit-v2.json               |  2 +-
 .../game/animation/glitchFilm-v2.json         |  2 +-
 .../game/animation/godrayFilm-v2.json         |  2 +-
 .../animation/move-front-and-back-v2.json     |  4 ++--
 .../game/animation/oldFilm-v2.json            |  2 +-
 .../game/animation/reflectionFilm-v2.json     |  2 +-
 .../game/animation/removeFilm-v2.json         |  2 +-
 .../game/animation/rgbFilm-v2.json            |  2 +-
 .../game/animation/shake-v2.json              |  6 +++---
 .../game/animation/shockwaveIn-v2.json        |  4 ++--
 .../game/animation/shockwaveOut-v2.json       |  4 ++--
 18 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/packages/origine2/src/pages/editor/AnimationEditor/model/animationDocument.ts b/packages/origine2/src/pages/editor/AnimationEditor/model/animationDocument.ts
index 45aa70679..98fb6f9ee 100644
--- a/packages/origine2/src/pages/editor/AnimationEditor/model/animationDocument.ts
+++ b/packages/origine2/src/pages/editor/AnimationEditor/model/animationDocument.ts
@@ -1,8 +1,8 @@
 /**
  * @file 动画文件（Animation v2）与编辑器模型之间的转换。
  *
- * 文件中的关键帧是一个数组，每帧的 duration 是距上一帧的时长，一帧可以同时指定多个属性；
- * 编辑器按属性拆成轨道，每个关键点记录距动画开始的绝对时间，便于在时间轴上逐属性编辑。
+ * 文件中的关键帧是一个数组，每帧的 time 是该帧在动画中的时间，一帧可以同时指定多个属性；
+ * 编辑器按属性拆成轨道，便于在时间轴上逐属性编辑。
  * 格式说明见 WebGAL 仓库的 dev-docs/Animation v2.md
  */
 import set from 'lodash/set';
@@ -84,18 +84,19 @@ function tryParse(text: string): AnimationObject | null {
 
 function framesToTracks(keyframes: unknown[]): ITrack[] {
   const tracks = new Map<string, IKeyPoint[]>();
-  let time = 0;
   for (const frame of keyframes) {
     if (typeof frame !== 'object' || frame === null) continue;
-    const { duration, ease, ...values } = frame as Record<string, unknown>;
-    time += typeof duration === 'number' && duration >= 0 ? duration : 0;
+    const { time: rawTime, ease, ...values } = frame as Record<string, unknown>;
+    // 与引擎一致：time 缺省或非法时按 0 处理
+    const time = typeof rawTime === 'number' && rawTime >= 0 ? rawTime : 0;
     for (const [path, value] of collectNumericValues(values)) {
       const points = tracks.get(path) ?? [];
       points.push({ id: createId(), time, value, ease: typeof ease === 'string' ? ease : DEFAULT_EASE });
       tracks.set(path, points);
     }
   }
-  return [...tracks].map(([path, points]) => ({ path, points }));
+  // 文件中的关键帧不一定按时间排列；sort 是稳定的，同一时刻的关键点（跳变）保持文件中的先后
+  return [...tracks].map(([path, points]) => ({ path, points: points.sort((a, b) => a.time - b.time) }));
 }
 
 /**
@@ -128,10 +129,5 @@ function tracksToFrames(tracks: ITrack[]): Record<string, unknown>[] {
   }
 
   const sortedGroups = [...groups.values()].sort((a, b) => a.time - b.time || a.order - b.order);
-  let lastTime = 0;
-  return sortedGroups.map(({ time, ease, values }) => {
-    const frame = { duration: time - lastTime, ...values, ...(ease === DEFAULT_EASE ? {} : { ease }) };
-    lastTime = time;
-    return frame;
-  });
+  return sortedGroups.map(({ time, ease, values }) => ({ time, ...values, ...(ease === DEFAULT_EASE ? {} : { ease }) }));
 }
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/blur-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/blur-v2.json
index 55ab5e66a..e74972c13 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/blur-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/blur-v2.json
@@ -2,7 +2,7 @@
   "version": 2,
   "keyframes": [
     {
-      "duration": 300,
+      "time": 300,
       "blur": 5
     }
   ]
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/dotFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/dotFilm-v2.json
index 3c95a58f4..bb308d1e3 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/dotFilm-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/dotFilm-v2.json
@@ -2,7 +2,7 @@
   "version": 2,
   "keyframes": [
     {
-      "duration": 0,
+      "time": 0,
       "dotFilm": 1
     }
   ]
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-bottom-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-bottom-v2.json
index 944121933..b06849e39 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-bottom-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-bottom-v2.json
@@ -5,7 +5,7 @@
   },
   "keyframes": [
     {
-      "duration": 0,
+      "time": 0,
       "alpha": 0,
       "position": {
         "y": 50
@@ -13,7 +13,7 @@
       "blur": 5
     },
     {
-      "duration": 500,
+      "time": 500,
       "alpha": 1,
       "position": {
         "y": 0
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-left-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-left-v2.json
index 6fe6e667c..2b9b979da 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-left-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-left-v2.json
@@ -5,7 +5,7 @@
   },
   "keyframes": [
     {
-      "duration": 0,
+      "time": 0,
       "alpha": 0,
       "position": {
         "x": -50
@@ -13,7 +13,7 @@
       "blur": 5
     },
     {
-      "duration": 500,
+      "time": 500,
       "alpha": 1,
       "position": {
         "x": 0
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-right-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-right-v2.json
index 6820ba6fc..07ebb05e1 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-right-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-from-right-v2.json
@@ -5,7 +5,7 @@
   },
   "keyframes": [
     {
-      "duration": 0,
+      "time": 0,
       "alpha": 0,
       "position": {
         "x": 50
@@ -13,7 +13,7 @@
       "blur": 5
     },
     {
-      "duration": 500,
+      "time": 500,
       "alpha": 1,
       "position": {
         "x": 0
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-v2.json
index 8435e148c..1b5473a53 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/enter-v2.json
@@ -5,11 +5,11 @@
   },
   "keyframes": [
     {
-      "duration": 0,
+      "time": 0,
       "alpha": 0
     },
     {
-      "duration": 300,
+      "time": 300,
       "alpha": 1
     }
   ]
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/exit-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/exit-v2.json
index b7f19c7f0..03a743168 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/exit-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/exit-v2.json
@@ -2,7 +2,7 @@
   "version": 2,
   "keyframes": [
     {
-      "duration": 300,
+      "time": 300,
       "alpha": 0
     }
   ]
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/glitchFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/glitchFilm-v2.json
index 1fa22d23f..7efc3cb15 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/glitchFilm-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/glitchFilm-v2.json
@@ -2,7 +2,7 @@
   "version": 2,
   "keyframes": [
     {
-      "duration": 0,
+      "time": 0,
       "glitchFilm": 1
     }
   ]
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/godrayFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/godrayFilm-v2.json
index 5e4770a5a..e71e67304 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/godrayFilm-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/godrayFilm-v2.json
@@ -2,7 +2,7 @@
   "version": 2,
   "keyframes": [
     {
-      "duration": 0,
+      "time": 0,
       "godrayFilm": 1
     }
   ]
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/move-front-and-back-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/move-front-and-back-v2.json
index e12c7a88e..95ce4d32d 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/move-front-and-back-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/move-front-and-back-v2.json
@@ -2,14 +2,14 @@
   "version": 2,
   "keyframes": [
     {
-      "duration": 500,
+      "time": 500,
       "scale": {
         "x": 1.15,
         "y": 1.15
       }
     },
     {
-      "duration": 500,
+      "time": 1000,
       "scale": {
         "x": 1,
         "y": 1
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/oldFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/oldFilm-v2.json
index 75fb2cbd9..2662d645f 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/oldFilm-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/oldFilm-v2.json
@@ -2,7 +2,7 @@
   "version": 2,
   "keyframes": [
     {
-      "duration": 0,
+      "time": 0,
       "oldFilm": 1
     }
   ]
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/reflectionFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/reflectionFilm-v2.json
index ad1307fb4..eaed81193 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/reflectionFilm-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/reflectionFilm-v2.json
@@ -2,7 +2,7 @@
   "version": 2,
   "keyframes": [
     {
-      "duration": 0,
+      "time": 0,
       "reflectionFilm": 1
     }
   ]
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/removeFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/removeFilm-v2.json
index 00e609bbc..0ca8de6ba 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/removeFilm-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/removeFilm-v2.json
@@ -2,7 +2,7 @@
   "version": 2,
   "keyframes": [
     {
-      "duration": 0,
+      "time": 0,
       "oldFilm": 0,
       "dotFilm": 0,
       "reflectionFilm": 0,
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/rgbFilm-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/rgbFilm-v2.json
index 70ffb9ba8..1a5e35d06 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/rgbFilm-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/rgbFilm-v2.json
@@ -2,7 +2,7 @@
   "version": 2,
   "keyframes": [
     {
-      "duration": 0,
+      "time": 0,
       "rgbFilm": 1
     }
   ]
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/shake-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/shake-v2.json
index 4cd3eedf5..810442d4c 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/shake-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/shake-v2.json
@@ -2,21 +2,21 @@
   "version": 2,
   "keyframes": [
     {
-      "duration": 250,
+      "time": 250,
       "position": {
         "x": -100
       },
       "ease": "easeOut"
     },
     {
-      "duration": 500,
+      "time": 750,
       "position": {
         "x": 100
       },
       "ease": "easeInOut"
     },
     {
-      "duration": 250,
+      "time": 1000,
       "position": {
         "x": 0
       },
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveIn-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveIn-v2.json
index 99ab7e023..798c9b178 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveIn-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveIn-v2.json
@@ -2,12 +2,12 @@
   "version": 2,
   "keyframes": [
     {
-      "duration": 0,
+      "time": 0,
       "shockwaveFilter": 0,
       "radiusAlphaFilter": 0
     },
     {
-      "duration": 2000,
+      "time": 2000,
       "shockwaveFilter": 3.05,
       "radiusAlphaFilter": 1.05
     }
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveOut-v2.json b/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveOut-v2.json
index fa129ca6b..02176a17c 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveOut-v2.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/animation/shockwaveOut-v2.json
@@ -2,11 +2,11 @@
   "version": 2,
   "keyframes": [
     {
-      "duration": 0,
+      "time": 0,
       "shockwaveFilter": 0
     },
     {
-      "duration": 2000,
+      "time": 2000,
       "shockwaveFilter": 3
     }
   ]

From 3a319b4bdf21320a11b2b71688ed77058efbe5c8 Mon Sep 17 00:00:00 2001
From: Mahiru <Mahiru_@outlook.com>
Date: Thu, 8 Oct 2026 22:42:00 +0800
Subject: [PATCH 12/12] v4.6.6

---
 package.json                                  |  2 +-
 packages/origine2/package.json                |  2 +-
 packages/origine2/src/locales/en.po           |  3 ++
 packages/origine2/src/locales/ja.po           |  3 ++
 packages/origine2/src/locales/ko.po           |  3 ++
 packages/origine2/src/locales/zhCn.po         |  3 ++
 .../Topbar/tabs/GameConfig/GameConfig.tsx     |  6 +++
 .../WebGAL_Default_Template/template.json     |  2 +-
 .../game/template/template.json               |  2 +-
 .../WebGAL_Template/webgal-engine.json        |  4 +-
 packages/terre2/package.json                  |  4 +-
 packages/terre2/src/version.ts                |  2 +-
 releasenote.md                                | 48 +++++++------------
 yarn.lock                                     | 18 +++----
 14 files changed, 54 insertions(+), 48 deletions(-)

diff --git a/package.json b/package.json
index d39676f47..0a3b041f8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webgal-terre",
-  "version": "4.6.5",
+  "version": "4.6.6",
   "private": true,
   "scripts": {
     "dev": "concurrently -n terre,origine,dev-server -c cyan,green,magenta \"yarn dev:terre\" \"yarn dev:origine\" \"yarn dev:start-dev-server\"",
diff --git a/packages/origine2/package.json b/packages/origine2/package.json
index c9704ba7d..531a9729a 100644
--- a/packages/origine2/package.json
+++ b/packages/origine2/package.json
@@ -1,7 +1,7 @@
 {
   "name": "webgal-origine-2",
   "private": true,
-  "version": "4.6.5",
+  "version": "4.6.6",
   "license": "MPL-2.0",
   "scripts": {
     "sync:editor-preview-protocol": "yarn workspace @webgal/editor-preview-protocol build",
diff --git a/packages/origine2/src/locales/en.po b/packages/origine2/src/locales/en.po
index 94b4352be..a78edea85 100644
--- a/packages/origine2/src/locales/en.po
+++ b/packages/origine2/src/locales/en.po
@@ -113,6 +113,9 @@ msgstr "Live2D Motion"
 msgid "Live2D 表情"
 msgstr "Live2D Expression"
 
+msgid "Live2D 预留内存（MB）"
+msgstr "Live2D Reserved Memory (MB)"
+
 msgid "miniAvatar:选择小头像;"
 msgstr "miniAvatar: Choose a file of avatar;"
 
diff --git a/packages/origine2/src/locales/ja.po b/packages/origine2/src/locales/ja.po
index f3f3b06e5..a54dc81c7 100644
--- a/packages/origine2/src/locales/ja.po
+++ b/packages/origine2/src/locales/ja.po
@@ -113,6 +113,9 @@ msgstr "Live2D モーション"
 msgid "Live2D 表情"
 msgstr "Live2D 表情"
 
+msgid "Live2D 预留内存（MB）"
+msgstr "Live2D 予約メモリ（MB）"
+
 msgid "miniAvatar:选择小头像;"
 msgstr "miniAvatar: アバターファイルを選択;"
 
diff --git a/packages/origine2/src/locales/ko.po b/packages/origine2/src/locales/ko.po
index a279381eb..3d0efb1b8 100644
--- a/packages/origine2/src/locales/ko.po
+++ b/packages/origine2/src/locales/ko.po
@@ -113,6 +113,9 @@ msgstr "Live2D 모션"
 msgid "Live2D 表情"
 msgstr "Live2D 표정"
 
+msgid "Live2D 预留内存（MB）"
+msgstr "Live2D 예약 메모리 (MB)"
+
 msgid "miniAvatar:选择小头像;"
 msgstr "miniAvatar:미니 프로필 선택;"
 
diff --git a/packages/origine2/src/locales/zhCn.po b/packages/origine2/src/locales/zhCn.po
index 3234e3306..c284fe152 100644
--- a/packages/origine2/src/locales/zhCn.po
+++ b/packages/origine2/src/locales/zhCn.po
@@ -113,6 +113,9 @@ msgstr "Live2D 动作"
 msgid "Live2D 表情"
 msgstr "Live2D 表情"
 
+msgid "Live2D 预留内存（MB）"
+msgstr "Live2D 预留内存（MB）"
+
 msgid "miniAvatar:选择小头像;"
 msgstr "miniAvatar:选择小头像;"
 
diff --git a/packages/origine2/src/pages/editor/Topbar/tabs/GameConfig/GameConfig.tsx b/packages/origine2/src/pages/editor/Topbar/tabs/GameConfig/GameConfig.tsx
index d01e5d24f..fc80781a8 100644
--- a/packages/origine2/src/pages/editor/Topbar/tabs/GameConfig/GameConfig.tsx
+++ b/packages/origine2/src/pages/editor/Topbar/tabs/GameConfig/GameConfig.tsx
@@ -187,6 +187,12 @@ export default function GameConfig({ mode = 'full' }: GameConfigProps) {
           compact={compact}
           onChange={(e: string) => updateGameConfigSimpleByKey('Steam_AppID', e)}/>,
       )}
+      {/* 引擎为 Live2D（Cubism）预先分配的内存，单位 MB，不填时引擎默认 32 */}
+      {mode === 'full' && renderConfigItem(t`Live2D 预留内存（MB）`,
+        <GameConfigEditor key="cubismMemoryReservedSize" value={getConfigContentAsString('Cubism_Memory_Reserved_Size_MB')}
+          compact={compact}
+          onChange={(e: string) => updateGameConfigSimpleByKey('Cubism_Memory_Reserved_Size_MB', e)}/>,
+      )}
       {/* <TabItem title={t`文本框主题`}> */}
       {/*  <GameConfigEditorWithSelector key="packageName" value={getConfigContentAsString('Textbox_theme')} */}
       {/*    onChange={(e: string) => updateGameConfigSimpleByKey('Textbox_theme', e)} */}
diff --git a/packages/terre2/assets/templates/WebGAL_Default_Template/template.json b/packages/terre2/assets/templates/WebGAL_Default_Template/template.json
index 3db0e2913..f5ef7b268 100644
--- a/packages/terre2/assets/templates/WebGAL_Default_Template/template.json
+++ b/packages/terre2/assets/templates/WebGAL_Default_Template/template.json
@@ -1,4 +1,4 @@
 {
   "name":"WebGAL Refine 2026",
-  "webgal-version":"4.6.5"
+  "webgal-version":"4.6.6"
 }
diff --git a/packages/terre2/assets/templates/WebGAL_Template/game/template/template.json b/packages/terre2/assets/templates/WebGAL_Template/game/template/template.json
index 3db0e2913..f5ef7b268 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/game/template/template.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/game/template/template.json
@@ -1,4 +1,4 @@
 {
   "name":"WebGAL Refine 2026",
-  "webgal-version":"4.6.5"
+  "webgal-version":"4.6.6"
 }
diff --git a/packages/terre2/assets/templates/WebGAL_Template/webgal-engine.json b/packages/terre2/assets/templates/WebGAL_Template/webgal-engine.json
index d2965879b..d80836d07 100644
--- a/packages/terre2/assets/templates/WebGAL_Template/webgal-engine.json
+++ b/packages/terre2/assets/templates/WebGAL_Template/webgal-engine.json
@@ -2,9 +2,9 @@
   "schemaVersion": "1.0.0",
   "id": "open-webgal.webgal",
   "name": "WebGAL",
-  "version": "4.6.5",
+  "version": "4.6.6",
   "type": "official",
-  "webgalVersion": "4.6.5",
+  "webgalVersion": "4.6.6",
   "description": "界面美观、功能强大、易于开发的全新网页端视觉小说引擎",
   "descriptions": {
     "en": "A brand new web Visual Novel engine with a beautiful interface, powerful features, and easy development",
diff --git a/packages/terre2/package.json b/packages/terre2/package.json
index 0d06823e2..d7a0c20f8 100644
--- a/packages/terre2/package.json
+++ b/packages/terre2/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webgal-terre-2",
-  "version": "4.6.5",
+  "version": "4.6.6",
   "description": "",
   "author": "",
   "private": true,
@@ -62,7 +62,7 @@
     "vscode-languageserver": "^8.1.0",
     "vscode-languageserver-textdocument": "^1.0.11",
     "vscode-ws-jsonrpc-webgal": "0.2.1",
-    "webgal-engine": "4.6.5",
+    "webgal-engine": "4.6.6",
     "webgal-parser": "4.6.5",
     "webpack": "5.76.0",
     "ws": "8.18.0"
diff --git a/packages/terre2/src/version.ts b/packages/terre2/src/version.ts
index 36ea8ac4c..4659cd6b0 100644
--- a/packages/terre2/src/version.ts
+++ b/packages/terre2/src/version.ts
@@ -1,2 +1,2 @@
-export const TERRE_VERSION = '4.6.5';
+export const TERRE_VERSION = '4.6.6';
 export const version_number = TERRE_VERSION;
diff --git a/releasenote.md b/releasenote.md
index a06af5ad0..62178375f 100644
--- a/releasenote.md
+++ b/releasenote.md
@@ -4,21 +4,17 @@
 
 #### 新功能
 
-新增立绘差分切换，用于为立绘更换表情等差分。切换时位置、效果和层级都保持不变，尺寸相同的图片之间会平滑过渡。
+新增动画编辑器。打开动画文件或编辑多段动画时，可以在时间轴上添加和拖动关键帧、为关键帧设置缓动，并实时预览动画效果。
 
-设置变换与动画时，可以选择从立绘当前的状态开始，还是从默认状态开始。原有的“补充默认值”和“默认变换和效果”两个选项合并为“变换起点”。
+支持新版动画格式。开启“相对动画”后，动画会基于立绘或背景的当前状态进行变换；开启“帧继承”后，关键帧中没有设置的属性会沿用之前关键帧的值。模板中新增一组以 -v2 结尾的内置动画。
 
-#### 修复
-
-修复在图形编辑器中调整效果时，实时预览中的立绘可能丢失缩放、滤镜等效果的问题。
-
-修复场景中有多行语句时，调整效果的实时预览可能停在错误语句上的问题。
+游戏配置中新增 Live2D 预留内存设置，可以调整 Live2D 预先分配的内存大小。
 
-修复在脚本编辑中切换到另一个场景后，点击光标所在的行时实时预览不会跳转的问题。
+#### 修复
 
-修复文件名中含有多个点的素材无法预览的问题。
+修复在脚本编辑中打开场景时，如果场景读取缓慢或失败，场景文件可能被错误内容覆盖的问题。现在读取完成前无法编辑，读取或保存失败时会提示并可以重试。
 
-修复游戏列表中部分游戏的封面图无法显示的问题。
+修复在脚本编辑中切回窗口时，尚未保存的修改可能被覆盖的问题。
 
 <!-- English Translation -->
 ## Release Notes
@@ -27,21 +23,17 @@
 
 #### New Features
 
-Added figure variant switching, which changes a figure's variant, such as its expression. The figure's position, effects, and layer stay the same, and images of the same size blend smoothly.
-
-When setting transforms and animations, you can now choose whether to start from the figure's current state or from the default state. The former "Write default" and "Default transforms and effects" options have been merged into "Transform starting point".
-
-#### Fixes
+Added an animation editor. When opening an animation file or editing multiple animations, you can add and drag keyframes on a timeline, set easing for each keyframe, and preview the animation in real time.
 
-Fixed figures in the graphical editor's live preview possibly losing effects such as scale and filters while adjusting effects.
+Added support for the new animation format. With "Relative animation" on, animations transform figures or backgrounds from their current state. With "Keyframe inheritance" on, properties not set in a keyframe carry over values from previous keyframes. Templates now include a set of built-in animations ending in -v2.
 
-Fixed the live preview possibly stopping at the wrong statement while adjusting effects in a scene that contains multi-line statements.
+Added a Live2D reserved memory setting to the game configuration, which adjusts how much memory Live2D allocates in advance.
 
-Fixed the live preview not jumping when clicking the line where the cursor already is, after switching to another scene in script editing.
+#### Fixes
 
-Fixed assets whose file names contain more than one dot failing to preview.
+Fixed scene files possibly being overwritten with incorrect content when a scene loaded slowly or failed to load in script editing. Editing is now disabled until the scene has loaded, and a message with a retry option appears if loading or saving fails.
 
-Fixed the cover images of some games not showing in the game list.
+Fixed unsaved changes possibly being overwritten when switching back to the window in script editing.
 
 <!-- Japanese Translation -->
 ## リリースノート
@@ -50,18 +42,14 @@ Fixed the cover images of some games not showing in the game list.
 
 #### 新機能
 
-立ち絵の差分切り替えを追加しました。立ち絵の表情などの差分を変更するためのものです。切り替えても位置、エフェクト、レイヤーはそのまま保持され、同じサイズの画像同士はなめらかに切り替わります。
-
-変換やアニメーションを設定するときに、立ち絵の現在の状態から始めるか、デフォルトの状態から始めるかを選べるようになりました。従来の「デフォルト値を補う」と「デフォルトの変換と効果」の 2 つの選択肢は「変換の開始状態」にまとめられました。
+アニメーションエディタを追加しました。アニメーションファイルを開いたときや複数のアニメーションを編集するときに、タイムライン上でキーフレームを追加・ドラッグしたり、キーフレームごとにイージングを設定したりでき、アニメーションをリアルタイムでプレビューできます。
 
-#### 修正
-
-グラフィカルエディターでエフェクトを調整する際、リアルタイムプレビューの立ち絵から拡大縮小やフィルターなどのエフェクトが失われることがある問題を修正しました。
+新しいアニメーション形式に対応しました。「相対アニメーション」をオンにすると、立ち絵や背景の現在の状態を基準に変換します。「キーフレーム継承」をオンにすると、キーフレームで設定されていないプロパティは前のキーフレームの値を引き継ぎます。テンプレートに -v2 で終わる組み込みアニメーションを追加しました。
 
-複数行の文を含むシーンでエフェクトを調整する際、リアルタイムプレビューが違う文で止まることがある問題を修正しました。
+ゲーム構成に Live2D の予約メモリ設定を追加しました。Live2D があらかじめ確保するメモリの大きさを調整できます。
 
-スクリプト編集で別のシーンに切り替えたあと、カーソルのある行をクリックしてもリアルタイムプレビューが移動しない問題を修正しました。
+#### 修正
 
-ファイル名にドットが複数含まれる素材をプレビューできない問題を修正しました。
+スクリプト編集でシーンを開く際、シーンの読み込みが遅い、または失敗した場合に、シーンファイルが誤った内容で上書きされることがある問題を修正しました。読み込みが完了するまでは編集できず、読み込みや保存に失敗した場合はメッセージが表示され、再試行できます。
 
-ゲーム一覧で一部のゲームのカバー画像が表示されない問題を修正しました。
+スクリプト編集でウィンドウに戻ったときに、未保存の変更が上書きされることがある問題を修正しました。
diff --git a/yarn.lock b/yarn.lock
index 2af02ccb2..364ec5b0f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11050,10 +11050,10 @@ pixi-filters@^4.2.0:
     "@pixi/filter-twist" "4.2.0"
     "@pixi/filter-zoom-blur" "4.2.0"
 
-pixi-live2d-display-webgal@^0.5.12:
-  version "0.5.12"
-  resolved "https://registry.yarnpkg.com/pixi-live2d-display-webgal/-/pixi-live2d-display-webgal-0.5.12.tgz#f920f926e37bacf222c77343782b5b6fc3d209ab"
-  integrity sha512-93UDIM8ducia8zIgVtidqxlDamxlwEK4+ddUnl/8XcEKBinbr2Qlu0bBN9i1f4c5rzX5OPgEKc0DhjlDa7fJVg==
+pixi-live2d-display-webgal@^0.5.19:
+  version "0.5.19"
+  resolved "https://registry.yarnpkg.com/pixi-live2d-display-webgal/-/pixi-live2d-display-webgal-0.5.19.tgz#3bec5c75b55477ab6896d72bceaa2ae139ed1224"
+  integrity sha512-486kQpM4O0wpxKaQUTefSI46xmTGe1GbSNsCv7Fs4+2isvTSBB3frbTIEgVOSaU2uH8MyfN/WqE50Q3+9j5zwA==
   dependencies:
     gh-pages "^4.0.0"
 
@@ -13425,10 +13425,10 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
-webgal-engine@4.6.5:
-  version "4.6.5"
-  resolved "https://registry.yarnpkg.com/webgal-engine/-/webgal-engine-4.6.5.tgz#2f79065813441f39fcfd900443fa682a25090c36"
-  integrity sha512-l8e4KMEeSbq7XK2TP+0rv/Z6LXiO7I/R850c5h23jSl5MfBY+lQURHdi2RVkCzpyLVcuINznbqMYE6sBKStpbg==
+webgal-engine@4.6.6:
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/webgal-engine/-/webgal-engine-4.6.6.tgz#b6b6d9faa97ab09c68f9f2fddc9512e6e8d46b94"
+  integrity sha512-+DLscXnc/NF2SW7/SzzIlQyRqecZJgJfQk4LqKdl4p3KK+iszxn/yqAlUwPnkuoAHY0laKkEkWmrrLL6nLGO4Q==
   dependencies:
     "@emotion/css" "^11.11.2"
     "@icon-park/react" "^1.4.2"
@@ -13445,7 +13445,7 @@ webgal-engine@4.6.5:
     mitt "^3.0.0"
     modern-css-reset "^1.4.0"
     pixi-filters "^4.2.0"
-    pixi-live2d-display-webgal "^0.5.12"
+    pixi-live2d-display-webgal "^0.5.19"
     pixi.js "^6.3.0"
     popmotion "^11.0.5"
     react "^17.0.2"