javascript - 如何修复 SlideItMoo 中的不稳定过渡？ (使用 Mootools 的 Fx.Transitions)

Question

我在 joomla 网站中使用 Mootools。

我想做一个基本的横幅旋转器。找到一个 slider ，SlideItMoo ，这似乎大部分有效。

但在我看来，过渡有点不稳定，尤其是在最后。在 circ:out 或 sine:out 过渡结束时，新图像会采取明显的步骤。

也许问题是时间片粒度太大。有没有办法减少时间片，使整个过程更加顺利？或者有其他方法可以让过渡看起来更平滑吗？

我正在使用 Mootools。任何解决方案都应该关注 mootools；请不要建议我切换到替代框架。

Answer 1

我不知道为什么转换对我来说似乎很不稳定。我做了一些分析并绘制了过渡曲线，但没有看到任何明显的东西。

我最终构建了自己的过渡，在我看来，这似乎产生了更平滑的视觉效果。

// Requirements for a transition function are:
// - it should be continuous on the interval [0,1]
// - f(0) = 0, and f(1)= 1 .  f(x) between zero and 1
//   may fall out of that range.
//
// To guarantee the f(x)=1 , I produce a fn for which f(0)=0, 
// and f(1) is non-zero. Then I produce a second function which is the
// normalized transform of that, by simply using g(x)=f(x)/f(1), and
// use g(x) instead of f(x) as the transition function.  
// This guarantees that g(1) = 1.
//

function fn1(x) {
    return (Math.pow(x + 0.4, 3)  * Math.sin((x - 0.5)*3.1415926));
}

function g(x) {
    return fn1(x)/normalizationFactor;
}

normalizationFactor = fn1(1);
transitionCustom = new Fx.Transition(g);