我在这里的第一个问题。 :)

我正在寻找两个图像之间的过渡，其中图像首先缩小为圆形，然后圆圈再次增长，包含另一个图像。这很难解释，而且我可能用错了词，因为我在 Interwebz 上找不到任何关于它的信息。

我说的是像 Loony Toons 结局这样的效果。
http://www.youtube.com/watch?v=ZuYIq-J5l9I

缩小到黑色，可以在 JavaScript/JQuery 中完成吗？

最佳答案

TL:博士

- 跨浏览器:[**查看工作演示
这里**](http://jsfiddle.net/lthibodeaux/8DSjz/)。
嗯，主要是工作......和
跨浏览器。可以做得更糟。 ;]
- 纯 CSS3 解决方案:[**查看工作演示
这里**](http://jsfiddle.net/lthibodeaux/8DSjz/16/)

我该如何开始描述这个？如果 CSS 2 剪辑标准支持除“矩形”值之外的任何内容，即“圆形”或“椭圆”，那会容易得多，但是......因为那不存在，我已经尽力拼凑一些东西一起做你所要求的。警告有很多。一个是，如果您希望将图片剪辑到背景，这仅适用于具有纯色背景的东西。另一个原因是，虽然我尝试考虑跨浏览器的 CSS 更新时间，但渲染仍然不是“完美的”。我最初的方法是简单地对要替换的图像上的剪辑进行动画处理，但是由于通过我找到的插件中的缓动功能对剪辑进行更新的方式，这不起作用。最后的方法如下。

方法

概念是将图像设置为 background-image像 <div> 这样的容器的属性与 background-position的 center center ，以及 position将容器移至 relative ，或任何非静态的。接下来是生成剪辑元素作为容器的子项。第一个是 position: absolute背景颜色的剪裁圆图像，可以是透明的 PNG 或 GIF(我更喜欢前者)，接下来的四个是 div，也是 absolute拥有 left 的职位, right , top , 和 bottom属性设置为 0 他们将剪辑的每一边。这个想法是动画 top , left , width , 和 height使用 .animate() 调用的 step 回调选项，通过将它们与当前 left 匹配来同步裁剪 div 的宽度和高度。和 top值(value)观。在动画之间，您更改 background-image将容器移动到新图像，然后以相反的方向开始动画。

这需要在 IE7、8 和 Webkit 浏览器中进行一些调整，因为动画在 Firefox 和 IE9 中剪辑得更加干净。这将是 adjust您将在工作演示中看到的变量。

示例代码如下:

标记

<div class="imageContainer image1">
    <img class="clip" src="clipCircle.png" />
    <div class="top fill"></div>
    <div class="left fill"></div>
    <div class="right fill"></div>
    <div class="bottom fill"></div>
</div>

div.imageContainer
{
    background-position: center;
    width: 300px;
    height: 300px;
    position: relative;
}

img.clip
{
    width: 100%;
    height: 100%;
    position: absolute;
}

div.fill
{
    position: absolute;
    background-color: White;
}

div.left, div.right
{
    height: 100%;
    top: 0;
    width: 0;
}

div.left
{
    left: 0;
}

div.right
{
    right: 0;
}

div.top, div.bottom
{
    width: 100%;
    left: 0;
    height: 0;
}

div.top
{
    top: 0;
}

div.bottom
{
    bottom: 0;
}

var speed = 1000;

$clip = $("img.clip");

$clip.animate({
    top: $clip.parent().height() / 2,
    left: $clip.parent().width() / 2,
    width: 0,
    height: 0
}, {
    duration: speed,
    step: function(now, fx) {
        switch (fx.prop) {
        case "top":
            $("div.top").css("height", now);
            $("div.bottom").css("height", now + adjust);    
            break;
        case "left":
            $("div.left").css("width", now);
            $("div.right").css("width", now + adjust);
        }
    },
    complete: function() {
        $(this).parent().addClass("image2");

        $(this).animate({
            top: 0,
            left: 0,
            width: $clip.parent().width(),
            height: $clip.parent().height()
        }, {
            duration: speed,
            step: function(now, fx) {
                switch (fx.prop) {
                case "top":
                    $("div.top").css("height", now);
                    $("div.bottom").css("height", now + adjust);    
                    break;
                case "left":
                    $("div.left").css("width", now);
                    $("div.right").css("width", now + adjust);
                }
            },
            complete: function() {
                $("div.imageContainer > *").removeAttr("style");
            }
        });
    }
});

<div class="imageContainer image1">
</div>

div.imageContainer
{
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
}

div.image1
{
    background-image: url(/images/myFirstImage.png);
}

div.image2
{
    background-image: url(/images/mySecondImage.png);
}

// Total animation speed in or out will be speed * 1.5
var speed = 600;

// Store a reference to the object to be clipped
var $clip = $("div")

// A function to build a mapping object for border radius parameters
var buildRadiusObj = function(value) {

    // Dimension an option object
    var opts = {};

    // Use specialized Mozilla CSS attributes when needed
    var attributes = $.browser.mozilla ?
        ["-moz-border-radius-topleft",
         "-moz-border-radius-bottomleft",
         "-moz-border-radius-topright",
         "-moz-border-radius-bottomright"] :
        ["border-top-left-radius",
         "border-bottom-left-radius",
         "border-top-right-radius",
         "border-bottom-right-radius"];

    // Build the option object
    $.each(attributes, function(i, key) {
        opts[key] = value;
    });

    // Return the result
    return opts;
}

$clip.animate(buildRadiusObj($clip.width() * 0.5), {    // Animate the border radius until circular
    duration: speed * 0.5,
    easing: "linear"
}).animate({                                            // Resize and reposition the container
    width: 0,
    left: $clip.width() / 2,
    height: 0,
    top: $clip.height() / 2
}, {
    duration: speed,
    easing: "linear",
    step: function(now, fx) {                           // Synch up the background-position
        if (fx.prop == "top") {
            $(this).css("background-position", "-" + $(this).css("top") + " -" + $(this).css("left"));
        }
    },
    complete: function() {                              // Swap the image
        $(this).addClass("image2");
    }
}).animate({                                            // Restore position and size
    width: $clip.width(),
    left: 0,
    height: $clip.height(),
    top: 0
}, {
    duration: speed,
    easing: "linear",
    step: function(now, fx) {                           // Synch the background-position
        if (fx.prop == "top") {
            $(this).css("background-position", "-" + $(this).css("top") + " -" + $(this).css("left"));
        }
    },
    complete: function() {                              // Remove inline styles but reapply border-radius
        $(this).removeAttr("style").css(buildRadiusObj($clip.width() * 0.5));
    }
}).animate(buildRadiusObj(0), {                         // Restore border-radius to block
    duration: speed * 0.5,
    easing: "linear",
    complete: function() {
        $(this).removeAttr("style");                    // Remove inline styles
    }
});

关于JavaScript 缩小/增长循环过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5365322/