JavaScript缩小/增长圈转换

Question

我的第一个问题.:)

我正在寻找两个图像之间的过渡,其中图像首先收缩为圆形,然后圆圈再次包含另一个图像.这很难解释,我可能会使用错误的词语,因为我在Interwebz上找不到任何关于它的内容.

我说的是Loony Toons结尾的效果. http://www.youtube.com/watch?v=ZuYIq-J5l9I

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

Answer 1

TL:DR

• 跨浏览器:请参阅此处的工作演示.好吧,主要是工作......和跨浏览器.可能会更糟.]
• 纯CSS3解决方案:请参阅此处的工作演示

我怎么开始描述这个呢？如果CSS 2剪辑标准支持除了"rect"值之外的任何东西,即"圆圈"或"椭圆",但是......因为不存在,我会尽力做到最好一起做你要问的事.警告很多.一个是,如果您希望图片剪辑到背景,这只能用于具有纯色背景的东西.另一个原因是,虽然我试图考虑跨浏览器的CSS更新时间,但渲染仍然不是"完美".我最初的方法是简单地为被替换的图像上的剪辑设置动画,但由于通过我所在的插件中的缓动功能对剪辑进行更新的方式,这不起作用.最后的方法如下.

该方法

这个概念是将图像设置为background-image像一个容器的属性<div>具有background-position的center center,而position该容器中relative,或任何非静态.接下来是生成剪辑元素作为容器的子元素.第一个是position: absolute你的背景颜色的剪裁圆图像,无论是透明的PNG或GIF(我更喜欢前者),并在未来四年的申报单,也与absolute那些位置left,right,top,和bottom属性设置为0为每个他们将剪辑的各方.我们的想法是动画top,left,width,和height限幅圆图像及由它们匹配到当前同步起来使用.animate()调用的回调步骤选项削波的div的宽度和高度left和top值.在动画之间,您background-image将容器更改为新图像,然后以相反方向返回动画.

这需要在IE7,8和Webkit浏览器中略微调整,因为动画在Firefox和IE9中更加干净.这将是adjust您在工作演示中看到的变量.

示例代码如下:

标记

<div class="imageContainer image1">
    <img class="clip" src="http://www.mysite.com/images/clipCircle.png" />
    <div class="top fill"></div>
    <div class="left fill"></div>
    <div class="right fill"></div>
    <div class="bottom fill"></div>
</div>

CSS

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");
            }
        });
    }
});

编辑:

CSS3解决方案

当跨浏览器兼容性不那么重要时,CSS3是一个选项(虽然我可能建议看看这种动画的新HTML5 Canvas可以做些什么).有几点需要注意:

• 图像必须位于容器内,以便我们可以向中心而不是左上角进行剪切.
• border-radius属性不会剪切容器内的子图像.因此,图像必须成为容器的background-image属性.
• jQuery目前没有正确设置border-radius动画.您可以替换该属性的当前jQuery动画功能,也可以构建自定义border-radius动画对象以使jQuery更加良好.我选择了后者.每个角的边界半径必须单独设置动画.
• 动画输入或输出由两个独立的段组成,因此"线性"缓动功能可能最适合用于最干净的结果.

该方法在下面注释如下:

标记

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

CSS

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(http://www.mysite.com/images/myFirstImage.png);
}

div.image2
{
    background-image: url(http://www.mysite.com/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
    }
});

同样,演示位于此处.