Javascript Jssor预定义标题将旧设置转换为新设置,如何?
我不想使用Jssor标题生成器。相反,我需要一些预定义的字幕转换配置。 我有一个包含所有可能设置的数组,如下所示:Javascript Jssor预定义标题将旧设置转换为新设置,如何?,javascript,slider,jssor,Javascript,Slider,Jssor,我不想使用Jssor标题生成器。相反,我需要一些预定义的字幕转换配置。 我有一个包含所有可能设置的数组,如下所示: $sliderAnimationsList: 'Shift LR'=>'{$Duration:1200,x:1,$Easing:{$Left:$Jease$.$EaseInOutQuart,$Opacity:$Jease$.$EaseLinear},$Opacity:2,$Brother:{$Duration:1200,x:-1,$Easing:{$Left:$Jease$.
$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}}',
$captionAnimationsList:
'L|IB'=>'{$Duration:1200,x:0.6,$Easing:{$Left:$Jease$.$EaseInOutBack},$Opacity:2}',
我需要把它换成新的设置。
我知道其中一些是:
$Duration:1200 -> d:1200
$Easing:$JssorEasing$.$EaseInCubic -> e:{x:5}
但还有其他迁移的设置,我不知道如何转换
{$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]}} -> ?
? -> {b:0,d:500,x:-105},{b:500,d:500,x:230},{b:1000,d:500,y:-120},{b:1500,d:500,x:-70,y:120},{b:2600,d:500,y:-80},{b:3100,d:900,y:160,e:{y:24}}
有人解决了这个问题吗?我想知道解决方案。简单的回答是,不可能完全从旧->新或从新->旧进行翻译。旧系统有两个功能,如
$Round
和$Brother
,在新系统中根本不存在,而新系统使用关键帧将多个阶段转换为单个过渡,这在旧系统中根本不可能。这意味着您的最后一个示例实际上不可能翻译,因为它实际上代表了转换的6个阶段:
{b:0,d:500,x:-105}, //stage 1
{b:500,d:500,x:230}, //stage 2
{b:1000,d:500,y:-120}, //stage 3
{b:1500,d:500,x:-70,y:120}, //stage 4
{b:2600,d:500,y:-80}, //stage 5
{b:3100,d:900,y:160,e:{y:24}} //stage 6
但是。。我们可以相对轻松地翻译一些值
对于简单的转换,新版本与旧版本相比非常容易计算,反之亦然。在新的滑块代码中,有一个带有描述性变量名称的值名称列表,如下所示:
$Top: "y",
$Left: "x",
$Bottom: "m",
$Right: "t",
$Rotate: "r",
$RotateX: "rX",
$RotateY: "rY",
$ScaleX: "sX",
$ScaleY: "sY",
$TranslateX: "tX",
$TranslateY: "tY",
$TranslateZ: "tZ",
$SkewX: "kX",
$SkewY: "kY",
$Opacity: "o",
$Easing: "e",
$ZIndex: "i",
$Clip: "c",
vb: "bc",
xd: "re",
wd: "gr",
Bd: "bl"
可在此处找到:
然后,我们可以应用一些常识,根据旧值计算出更复杂元素的新语法。这需要一些新工具,看看它添加了哪些值,因为有些东西(比如测量值)是无意义的整数。(请在此答案底部找到缓解措施列表)
因此,如果我们以你为例:
{
$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]
}
}
这就变成了:
{
b:0, // starting time in ms
d:1000, // duration in ms
c: { // clip
y: 40.0 // desired top clip amount in percent - would also take the position of $ScaleClip
},
// flyDirection doesn't really exist any more as this is now managed by x and y values
x: 80 // x movement value in pixels
sX: -0.2, // scale horizontal (expressed as the scale percentage (as a float) to be deducted from the scale total)
// for scaleClip, see c: y
e: { // easing - added once per transitioning value
c: {
y: 7 // see values at bottom of answer for easing translations
},
x: 7
}
// during: left and during: clip would now be managed by x / y & clip values
}
如你所见,它很快变得复杂得多。我强烈建议使用该工具重新创建这些转换,因为计算某些值可能会变得非常复杂
不管怎样,我希望这些信息能有所帮助
缓解类型列表及其相应的编号代码:
Linear: 0,
Swing: 1,
InQuad: 2,
OutQuad: 3,
InOutQuad: 4,
InCubic: 5,
OutCubic: 6,
InOutCubic: 7,
InQuart: 8,
OutQuart: 9,
InOutQuart: 10,
InQuint: 11,
OutQuint: 12,
InOutQuint: 13,
InSine: 14,
OutSine: 15,
InOutSine: 16,
InExpo: 17,
OutExpo: 18,
InOutExpo: 19,
InCirc: 20,
OutCirc: 21,
InOutCirc: 22,
InElastic: 23,
OutElastic: 24,
InOutElastic: 25,
InBack: 26,
OutBack: 27,
InOutBack: 28,
InBounce: 29,
OutBounce: 30,
InOutBounce: 31,
Early: 32,
Late: 33
我也愿意这样做。希望任何人都有解决办法,因为我向项目负责人发送了请求,但运气不好。