如何手动将Jssor预定义字幕过渡旧配置迁移为新配置？

我帮你梳理下Jssor字幕动画从旧格式到新格式的完整迁移方案，结合你给出的示例和疑问一步步拆解：

核心基础转换规则 #

先把最常用的参数映射和转换逻辑列出来，这是迁移的基础：

• 时长参数：旧格式$Duration:1200直接转换为新格式d:1200（d代表duration，单位毫秒）
• 位移参数：旧的$x:1/$y:-0.5对应新格式x:1/y:-0.5（数值为元素自身宽/高的倍数）
• 透明度参数：旧格式$Opacity:2（表示从透明到完全显示）对应新格式o:1；如果是隐藏动画则用o:0
• 缓动函数映射（关键！旧的$JssorEasing$系列对应新格式e:{x:数值}）：
  • $EaseLinear → e:{x:1}
  • $EaseInCubic → e:{x:5}
  • $EaseOutCubic → e:{x:6}
  • $EaseInOutCubic → e:{x:9}
  • $EaseInOutQuart → e:{x:16}
  • $EaseInOutBack → e:{x:22}
• 兄弟元素动画：旧格式$Brother:{...}需要拆分为独立的动画对象，绑定到对应的兄弟字幕元素上

你的基础示例转换 #

示例1：滑块动画「Shift LR」 #

旧配置：

$sliderAnimationsList: 'Shift LR'->'{$Duration:1200,x:1,$Easing:{$Left:$Jease$.$EaseInOutQuart,$Opacity:$Jease$.$EaseLinear},$Opacity:2,$Brother:{$Duration:1200,x:-1,$Easing:{$Left:$Jease$.$EaseInOutQuart,$Opacity:$Jease$.$EaseLinear},$Opacity:2}}'

转换为新格式（拆分为主元素和兄弟元素两个动画）：

// 主元素动画配置
{ d:1200, x:1, e:{x:16, o:1}, o:1 },
// 兄弟元素动画配置（需绑定到对应兄弟字幕）
{ d:1200, x:-1, e:{x:16, o:1}, o:1 }

解释：

• x:1/x:-1保持旧格式的位移倍数逻辑
• e:{x:16}对应旧的$EaseInOutQuart，e:{o:1}对应旧的透明度线性缓动
• o:1实现从透明到完全显示的过渡

示例2：字幕动画「L|IB」 #

旧配置：

$captionAnimationsList: 'L|IB'->'{$Duration:1200,x:0.6,$Easing:{$Left:$Jease$.$EaseInOutBack},$Opacity:2}'

转换为新格式：

{ d:1200, x:0.6, e:{x:22}, o:1 }

解释：

• e:{x:22}对应旧的$EaseInOutBack缓动效果
• x:0.6保持原有的水平位移比例

复杂分段动画的转换（你提出的疑问示例） #

旧配置：

{$Duration:1000,$Clip:4,$FlyDirection:2,$Easing:$JssorEasing$.$EaseInOutCubic,$ScaleHorizontal:0.8,$ScaleClip:0.8,$During:{$Left:[0.4,0.6],$Clip:[0,0.4]}}

第一步：拆解旧参数含义 #

• $Duration:1000：总动画时长1000ms
• $Clip:4：从右向左的裁剪动画（旧格式Clip参数：1=上，2=下，3=左，4=右）
• $FlyDirection:2：向下的飞行位移
• $EaseInOutCubic：全局缓动，对应新格式e:{x:9}
• $ScaleHorizontal:0.8：水平缩放至原尺寸的0.8倍
• $During：指定动画阶段——裁剪在0-400ms（总时长的0-0.4）执行，左移在400-600ms（0.4-0.6）执行

第二步：转换为新格式的分段动画 #

新格式通过多段{b:..., d:..., ...}对象组合实现分段逻辑：

// 第一段：裁剪+缩放（0-400ms）
{ b:0, d:400, clip:4, e:{x:9}, scaleX:0.8 },
// 第二段：左移动画（400-600ms）
{ b:400, d:200, x:-0.2, e:{x:9} },
// 第三段：向下飞行+恢复缩放（600-1000ms）
{ b:600, d:400, y:1, e:{x:9}, scaleX:1 }

解释：

• b是动画开始时间（begin），d是该段时长
• 把旧的比例时间段（比如0.4）转换为具体毫秒数（1000*0.4=400）
• clip:4直接对应旧的裁剪方向，scaleX对应水平缩放参数

完整迁移流程总结 #

1. 基础参数替换：把$Duration、$X、$Y、$Opacity等基础参数直接映射为新格式的d、x、y、o
2. 缓动函数映射：对照上面的缓动参数表，把旧的$JssorEasing$系列函数转换为新格式的e:{x:数值}
3. 分段动画拆分：旧格式的$During需要拆分为多个新格式的动画片段，用b和d定义每个片段的时间范围
4. 特殊参数转换：裁剪（$Clip→clip）、缩放（$ScaleHorizontal→scaleX）、飞行方向（对应x/y的正负值）等特殊参数直接对应新格式的同名/同类参数
5. 兄弟元素拆分：旧的$Brother配置单独拆分为独立动画，绑定到对应的兄弟字幕元素

内容的提问来源于stack exchange，提问作者step