当前位置：文江博客话题详情

如何修复 SlideItMoo 中的不稳定过渡？（使用 Mootools 的 Fx.Transitions）

发布于 2024-12-02 20:17:14 字数 414 浏览 0 评论 0原文

我在 joomla 网站中使用 Mootools。

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寒冷纷飞旳雪 2024-12-09 20:17:14

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

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

// 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);

I don't know why the transitions appeared to be jerky to me. I did some analysis and graphed the transition curves, and didn't see anything really obvious.

I ended up building my own transition, which to my eye appeared to produce a smoother visual effect.

// 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);

回复收藏 0 原文

~没有更多了~