jquery - jQuery / CSSを使用して、アニメーションのはさみgifでリアルなカット効果を作成するにはどうすればよいですか？

Question

はさみでdivを切り取るアニメーションを作成するための最良/最も優れた方法を探していますか？

このhttp://img.photobucket.com/albums/v29/wormholes201/animated-scissors.gifのようなアニメーション化された.gifが、divの四隅を移動するようにアニメーション化されていればクールだと思っていました。回転して角の方向を変えますか？それともスプライトのあるものですか？または3DCSSで何か？

助けてくれてありがとう！

Answer 1

.offset()、.height()を使用.width()して要素の境界のメトリックを計算し、それらを使用して画像を移動できます...

HTML：</ p>

<div id="paperTrail"></div>
<img src="http://img.photobucket.com/albums/v29/wormholes201/animated-scissors.gif" id="ToBeAnimated">

CSS：

#paperTrail{
    position:relative;
    left:100px;
    top:100px;
    height:200px;
    width:300px;
    border:1px black solid;
}
#ToBeAnimated{
 position:absolute;
    transition:all 1s;
}​

JS：

function animationLoop() {
    $("#ToBeAnimated").css({
        top: ($("#paperTrail").offset().top - parseInt($("#ToBeAnimated").height()) / 2),
        left: ($("#paperTrail").offset().left - parseInt($("#ToBeAnimated").width()) / 2)
    }).rotate(270);
    $("#ToBeAnimated").animate({
        top: $("#paperTrail").offset().top + $("#paperTrail").height() - $("#ToBeAnimated").height() / 2
    }, 2000, function() {
        $(this).animate({
            rotate: "180deg"
        }, function() {
            $("#ToBeAnimated").animate({
                left: $("#paperTrail").offset().left + $("#paperTrail").width() - $("#ToBeAnimated").width() / 2
            }, 2000, function() {
                $(this).animate({
                    rotate: "90deg"
                }, function() {
                    $("#ToBeAnimated").animate({
                        top: $("#paperTrail").offset().top - $("#ToBeAnimated").height() / 2
                    }, 2000, function() {
                        $(this).animate({
                            rotate: "0deg"
                        }, function() {
                            $("#ToBeAnimated").animate({
                                left: $("#ToBeAnimated").width() / 2
                            }, 2000, function() {
                                setTimeout(animationLoop, 2000);
                            });
                        });
                    });
                });

            });
        });
    });
}
animationLoop();​

JsFiddle： http: //jsfiddle.net/djb3T/