如何为几乎相同的图像设置平滑过渡？答案

【问题标题】：How to set a smooth transition for nearly the same images?如何为几乎相同的图像设置平滑过渡？
【发布时间】：2012-06-12 21:03:41
【问题描述】：

我将一系列 3 张图片放入无序列表中。图像几乎相同，只有一小部分图像发生了变化。这样我就得到了一种“电影”的效果。

我使用jquery cycle plugin。

我遇到了一个问题，我似乎无法弄清楚如何将过渡设置为如此平滑，从而将图像融合到另一个图像中。现在一张图像淡出，另一张淡入……这导致图像之间出现闪光……

谁能分享一个平滑混合几乎相同图像的示例？

【问题讨论】：

你现在用的是什么效果？ Fade 是满足您需求的最佳效果....
$('#yourImages').cycle() 应该这样做！见第三个例子malsup.com/jquery/cycle
当您查看它时，您会注意到它并没有完全“融合”到下一张图像中。这正是我的问题。顺便说一句：我使用fade。

标签： jquery transition cycle jquery-cycle

【解决方案1】：

更新：

我已将过渡修改为几乎不显眼地淡出，以便看起来每张幻灯片只淡入。您可能需要更改速度、延迟和/或超时属性以完全匹配您的情况努力完成。

http://jsfiddle.net/lucuma/tcRCj/12/

过渡：

$.fn.cycle.transitions.smooth = function($cont, $slides, opts) {
    $slides.not(':eq(' + opts.currSlide + ')').css('opacity', .99);
    opts.before.push(function(curr, next, opts) {
        $.fn.cycle.commonReset(curr, next, opts);
        opts.cssBefore.opacity = 0;
    });
    opts.animIn = {
        opacity: 1
    };
    opts.animOut = {
        opacity: .99
    };
    opts.cssBefore = {
        top: 0,
        left: 0
    };
};

原文：

最接近超级平滑的过渡是这样的：

$('#slideshow').cycle({fx:'fade', continuous:1, timeout:0, easeIn: 'linear', easeOut: 'linear'});

演示：http://jsfiddle.net/lucuma/tcRCj/6/

这也适用于水平/垂直效果。

第二轮：

我已将 jsfiddle 更新为一个名为 Smooth 的新自定义 fx：

http://jsfiddle.net/lucuma/tcRCj/12/

你可能需要玩转速度：

$.fn.cycle.transitions.smooth = function($cont, $slides, opts) {
    $slides.not(':eq(' + opts.currSlide + ')').css('opacity', .99);
    opts.before.push(function(curr, next, opts) {
        $.fn.cycle.commonReset(curr, next, opts);
        opts.cssBefore.opacity = 0;
    });
    opts.animIn = {
        opacity: 1
    };
    opts.animOut = {
        opacity: .99
    };
    opts.cssBefore = {
        top: 0,
        left: 0
    };
};


$('#slideshow').cycle({
    fx: 'smooth',
    continuous: 1,
    speed: 300,
    easeIn: 'linear',
    easeOut: 'linear'
});

【讨论】：

太棒了！这非常有效（尽管在查看演示时我认为它不会 - 背景仍然不会保持黑色并且会出现“闪烁”）。
我认为如果您的图像相似且更小，它会更平滑一些。
实际上它们更大，但更相似。不过，谢谢，就像一个魅力！
我不知道为什么......但我认为我遇到了一些缓存问题。它在混合图像时根本不起作用。还有其他建议吗？
@hphoeksma 我已经通过基于原始淡入淡出构建新的过渡来更新答案。看看它是否适合你。