0

これはスイング、またはバウンスに当てはまると思います。このコードが投稿された別の投稿で、オブジェクトをスイングさせる方法の例: http://jsfiddle.net/gVCWE/149/

スイングをゆっくりと停止させるにはどうすればよいでしょうか。

.box{
    width:50px; height:50px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    -webkit-animation:swing 3s infinite ease-in-out;
    -webkit-transform-origin:top;
}

@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}

他の「慣性効果」もやりたいです。必要に応じて、JavaScript や JQuery を使用してもかまいません。自分のやりたいことに対して、CSS やキーフレームだけでは物足りない気がします。

setInterval を使用して、次のようなことを行っても問題ありません。

function prepareAnimation()
{
    setInterval(slowAnimation, 200)
}

function slowAnimation()
{
    speed=$(".box").getSpeed(); // how would I write getSpeed?
    if(speed<=0) return;
    speed = speed - .1;
    $(".box").setSpeed(speed); // how would I write setSpeed (degree would be set in here too)?
}

スクリプトを使用してアニメーション プロパティを変更する最善の方法がわかりません。特に、アニメーションの途中でデュレーションを変更する場合は、まったく可能かどうかわかりません。ありがとう。

4

1 に答える 1

3

http://jsfiddle.net/gVCWE/150/

(function swing() {
    var ang  = 20,
        dAng = 1,
        dir  = 1,
        box = document.getElementById("box");

    (function setAng(ang){
        box.style.WebkitTransform =  'rotate('+ang+'deg)';
        box.style.MozTransform =  'rotate('+ang+'deg)';
        dir = -dir;
        if (Math.abs(ang) > 0)
            setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng));
    })(ang);
})();​

CSS

.box{
    width:50px; height:150px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-transition:-moz-transform 1s ease-in-out;
    -moz-transform-origin: center top;
    -webkit-transition:-webkit-transform 1s ease-in-out;
    -webkit-transform-origin:top;
}

angと の初期値をdir負にすることで、初期方向を切り替えることができます。の値を大きくすることで「スイング」をより速く遅くすることができますがdAng、それは の係数である必要がありangます。

于 2012-11-08T18:25:43.277 に答える