我不想使用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$.$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}}有人解决了这个问题吗？ 我想知道解决方案。
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.
最满意答案
简短的回答是，不可能完全从旧的 - >新的，或从新的 - >旧的。 旧系统有一些功能，比如$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: 33The 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 6But.. 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更多推荐
$Duration,$Easing,->,电脑培训,计算机培训,IT培训"/> <meta name="descr
发布评论