Jssor predefined caption transitions old setting to new, how to?

I don't want to use Jssor caption builder. Instead, I need some of predefined caption transition configurations. I have an array with all possible settings like this:

$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}',

And I need to change it into new settings. I know some of them are like:

$Duration:1200 -> d:1200
$Easing:$JssorEasing$.$EaseInCubic -> e:{x:5}

But there are other migrated settings which I don't know how to convert.

{$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}}

Has anyone solved this issue? I would like to know the solution.

Solution

The short answer is that it is not possible to translate fully from old -> new, or from new -> old. The old system had a couple of features like $Round and $Brother which simply don't exist in the new one, whilst the new system features multiple stages to a single transition using keyframes, which simply are not possible in the old one. This means that your final example is not actually possible to translate as it is actually representing 6 stages of a transition:

{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

But.. we can translate some values with relative ease.

For simple transitions, the new version is fairly easy to calculate from the old version and vice versa. There is a list of the value names with descriptive variable names minified in the new slider code, attached below:

$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"

Which can be found here: https://github.com/jssor/slider/blob/master/js/jssor.slider.min.js

We can then apply some common sense to work out what the new syntax would be for the more complex elements, based on the old values. This requires some playing around with the new tool and seeing which values it adds, as some things (like the easings) are meaningless integers. (Find the easing list at the bottom of this answer).

So if we take your example of:

{
    $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]
    }
}

This becomes:

{
    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
}

As you can see, it gets a lot more complicated very quickly. I would strongly advise using the tool to recreate these transitions, as working out some of the values can get quite complex.

Regardless, I hope some of this information helped.

The list of Easing types and their corresponding number code:

    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