Jssor предопределенный заголовок переводит старые настройки на новые, как? - PullRequest
Новая
       52

Jssor предопределенный заголовок переводит старые настройки на новые, как?

0 голосов
/ 28 мая 2018

Я не хочу использовать Jssor caption Builder.Вместо этого мне нужны некоторые из предопределенных конфигураций перехода с титрами.У меня есть массив со всеми возможными настройками, как это: 

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

Кто-нибудь решил эту проблему?Я хотел бы знать решение.

1 Ответ

0 голосов
/ 08 июня 2018

Короткий ответ: невозможно полностью перевести со старого -> нового или из нового -> старого.Старая система имела несколько функций, таких как $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"

, который можно найти здесь: https://github.com/jssor/slider/blob/master/js/jssor.slider.min.js

Затем мы можем применитьнекоторый здравый смысл, чтобы выяснить, каким будет новый синтаксис для более сложных элементов на основе старых значений.Для этого нужно немного поиграть с новым инструментом и посмотреть, какие значения он добавляет, поскольку некоторые вещи (например, ослабления) являются бессмысленными целыми числами.(Найдите список ослабления внизу этого ответа).

Так что, если мы возьмем ваш пример: 

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

По мере того как вывидно, все становится намного сложнее очень быстро.Я настоятельно рекомендую использовать инструмент для воссоздания этих переходов, так как разработка некоторых значений может быть довольно сложной.

Несмотря на это, я надеюсь, что некоторая часть этой информации помогла.

список типов Easing и соответствующий им код номера: 

    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
...