0

英語でごめんなさい。「イーズアウト弾性」の回転運動を追加しようとしていますが、できません。私が試しているコードはhttp://jsfiddle.net/22Feh/5/です。ありがとう 

    
    var img = $('.image');
    if(img.length > 0){
    var offset = img.offset();
    function mouse(evt){
        var center_x = (offset.left) + (img.width()/2);
        var center_y = (offset.top) + (img.height()/2);
        var mouse_x = evt.pageX; var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90; 
        img.css('-moz-transform', 'rotate('+degree+'deg)');
        img.css('-webkit-transform', 'rotate('+degree+'deg)');
        img.css('-o-transform', 'rotate('+degree+'deg)');
        img.css('-ms-transform', 'rotate('+degree+'deg)');
    }
    $(document).mousemove(mouse);
    }

4

1 に答える 1

0

イージングの計算は、タイマーを使用して行う必要があります。これは複雑になる可能性がありますが、これを処理する多くのライブラリが存在します。手始めにGSAPを見てみましょう。

あなたのコードを使用して、以下のjsfiddleを作成しました。私が行ったことは、CSS コードの変換コードを TweenMax 関数に置き換えて、使いやすさを追加しただけであることがわかります。

TweenMax.to(img, 1, {rotationZ:degree, ease:Elastic.easeOut});

http://jsfiddle.net/Boolean/PNvgt/

次に、さらに一歩進めたい場合は、GreenSock Draggable ライブラリがあります。

http://www.greensock.com/draggable/

于 2013-10-31T12:20:49.330 に答える