jquery.animate()を使用したCSSローテーションクロスブラウザ


81

クロスブラウザ互換のローテーション(ie9 +)の作成に取り組んでおり、jsfiddleに次のコードがあります

$(document).ready(function () { 
    DoRotate(30);
    AnimateRotate(30);
});

function DoRotate(d) {

    $("#MyDiv1").css({
          '-moz-transform':'rotate('+d+'deg)',
          '-webkit-transform':'rotate('+d+'deg)',
          '-o-transform':'rotate('+d+'deg)',
          '-ms-transform':'rotate('+d+'deg)',
          'transform': 'rotate('+d+'deg)'
     });  
}

function AnimateRotate(d) {

        $("#MyDiv2").animate({
          '-moz-transform':'rotate('+d+'deg)',
          '-webkit-transform':'rotate('+d+'deg)',
          '-o-transform':'rotate('+d+'deg)',
          '-ms-transform':'rotate('+d+'deg)',
          'transform':'rotate('+d+'deg)'
     }, 1000); 
}

CSSとHTMLは本当にシンプルで、デモ用です。

.SomeDiv{
    width:50px;
    height:50px;       
    margin:50px 50px;
    background-color: red;}

<div id="MyDiv1" class="SomeDiv">test</div>
<div id="MyDiv2" class="SomeDiv">test</div>

回転は使用.css()時に機能し.animate()ますが、使用時には機能しません。それはなぜですか、それを修正する方法はありますか?

ありがとう。


jQueryは、回転をアニメーション化する方法を知りません。おそらくCSS3トランジションを使用しますか?
ジョン・ドヴォルザーク

1
@ JanDvorak-IE9がCSS3トランジションをサポートしていないことを除いて。
Spudley 2013

1
「fixit」の部分に賛成します(stepコールバックを実装することになるかもしれません)が、「whyisthat」の部分はかなり明確です。
ジョン・ドヴォルザーク

@Spudley:はい、わかっています。IE9サポートの目標は、setIntervalを使用し、DoRotate関数を数回呼び出すことです。
フレンチブルドッグ2013

ところで-私はあなたの他の質問に対する私の答えの中でCSSサンドペーパーライブラリをすでに指摘しました。それはIEのCSSトランジションのポリフィルです。あなたはそれを試してみたいかもしれません。
Spudley 2013

回答:


222

CSS-TransformsはまだjQueryでアニメーション化することはできません。あなたはこのようなことをすることができます:

function AnimateRotate(angle) {
    // caching the object for performance reasons
    var $elem = $('#MyDiv2');

    // we use a pseudo object for the animation
    // (starts from `0` to `angle`), you can name it as you want
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            // in the step-callback (that is fired each step of the animation),
            // you can use the `now` paramter which contains the current
            // animation-position (`0` up to `angle`)
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

ステップコールバックの詳細については、http//api.jquery.com/animate/#stepをご覧ください。

http://jsfiddle.net/UB2XR/23/

そして、ところで:css3変換の前にjQuery1.7 +を付ける必要はありません

更新

これをjQueryプラグインでラップして、作業を少し楽にすることができます。

$.fn.animateRotate = function(angle, duration, easing, complete) {
  return this.each(function() {
    var $elem = $(this);

    $({deg: 0}).animate({deg: angle}, {
      duration: duration,
      easing: easing,
      step: function(now) {
        $elem.css({
           transform: 'rotate(' + now + 'deg)'
         });
      },
      complete: complete || $.noop
    });
  });
};

$('#MyDiv2').animateRotate(90);

http://jsbin.com/ofagog/2/edit

Update2

私はの順序を作ってそれを少し最適化easingdurationおよびcomplete軽微。

$.fn.animateRotate = function(angle, duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  var step = args.step;
  return this.each(function(i, e) {
    args.complete = $.proxy(args.complete, e);
    args.step = function(now) {
      $.style(e, 'transform', 'rotate(' + now + 'deg)');
      if (step) return step.apply(e, arguments);
    };

    $({deg: 0}).animate({deg: angle}, args);
  });
};

アップデート2.1

-完全に-コンテキストの問題を指摘してくれたmatteoに感謝します。各ノードでコールバックをバインドして修正した場合。thiscallbackjQuery.proxy

Update 2から、以前にコードにエディションを追加しました。

アップデート2.2

これは、回転を前後に切り替えるなどの操作を行う場合に可能な変更です。関数に開始パラメーターを追加し、次の行を置き換えただけです。

$({deg: start}).animate({deg: angle}, args);

開始度を設定するかどうかに関係なく、すべてのユースケースでこれをより一般的にする方法を誰かが知っている場合は、適切な編集を行ってください。


使い方は...とても簡単です!

主に、目的の結果を得るには2つの方法があります。しかし、最初に、議論を見てみましょう:

jQuery.fn.animateRotate(angle, duration, easing, complete)

「angle」を除いて、それらはすべてオプションであり、デフォルトのjQuery.fn.animate-propertiesにフォールバックします。

duration: 400
easing: "swing"
complete: function () {}

1位

この方法は短い方法ですが、渡す引数が多いほど不明確に見えます。

$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});

2位

引数が3つ以上ある場合はオブジェクトを使用することを好むので、この構文が私のお気に入りです。

$(node).animateRotate(90, {
  duration: 1337,
  easing: 'linear',
  complete: function () {},
  step: function () {}
});

4
これをフィドルに入れてもらえますか?
フレンチブルドッグ2013

4
わかりました、とてもかっこいいです:それはクロスブラウザ(IE9 +)CSS3ローテーションのためのプラグインです!! あなたはそれを主張することができます:あなたはそれを構築しました。よくやった!
フレンチブルドッグ2013年

1
@matteo応答が遅くなり、テストに感謝します。問題を解決するのに少し時間が必要でしたが、わかりました。fiddle.jshell.net/P5J4V/43ちなみに、私は私の答えであなたの調査について言及しました:)
yckart 2014年

1
@matteo thisDOMオブジェクトを参照しない理由は、コンテキストanimate()が呼び出されたオブジェクトに{deg: 0}設定されているためです。この場合は、コンテキストに設定されています。これを修正するには、各コールバック関数のコンテキストをapply()/call()または$.proxy()(@yckartが示しているように)で変更します。すべてのコールバックを修正し、3Dローテーションを許可するための私のソリューションは次のとおり
Avery

1
同じ要素を何0度もアニメーション化する場合は、毎回度から開始しても期待どおりの動作が得られないため、現在の回転値で初期化する必要があります。ここで説明されてそれを行う方法:stackoverflow.com/a/11840120/61818
アスビョルンUlsberg

17

yckartに感謝します!多大な貢献。プラグインをもう少し具体化しました。フルコントロールとクロスブラウザCSS用のstartAngleが追加されました。

$.fn.animateRotate = function(startAngle, endAngle, duration, easing, complete){
    return this.each(function(){
        var elem = $(this);

        $({deg: startAngle}).animate({deg: endAngle}, {
            duration: duration,
            easing: easing,
            step: function(now){
                elem.css({
                  '-moz-transform':'rotate('+now+'deg)',
                  '-webkit-transform':'rotate('+now+'deg)',
                  '-o-transform':'rotate('+now+'deg)',
                  '-ms-transform':'rotate('+now+'deg)',
                  'transform':'rotate('+now+'deg)'
                });
            },
            complete: complete || $.noop
        });
    });
};

5
jQueryは必要なベンダープレフィックスを自動的に追加するので、これは必要ありません!
yckart 2013

クロスプラットフォームの場合は+1。すごい。@yckart:この場合、自動プレフィックスは機能しません。
lsmpascal 2013

@PaxMaximinusどのjQueryバージョンを使用していますか?blog.jquery.com/2012/08/09/jquery-1-8-released
yckart

@yckart:1.7.1バージョン。
lsmpascal 2013

1
@PaxMaximinus jquery-blogの記事でわかるように、自動プレフィックスはそれ以来jquery-1.8+です!
yckart

10

jQueryを介してCSS3アニメーションを扱っている場合、jQueryトランジットはおそらくあなたの生活を楽にしてくれるでしょう。

2014年3月の編集 (私のアドバイスは投稿してから常に賛成票と反対票が投じられているため)

私が最初に上記のプラグインをほのめかしていた理由を説明しましょう:

の更新 DOM各ステップ(つまり$.animate)での、パフォーマンスの観点からは理想的ではありません。動作しますが、おそらく純粋なCSS3トランジションCSS3アニメーションよりも遅くなります。

これは主に、遷移が最初から最後までどのように見えるかを示すと、ブラウザーが先を考える機会を得るためです。

これを行うには、たとえば、遷移の状態ごとにCSSクラスを作成し、jQueryのみを使用してアニメーションの状態を切り替えることができます。

これは、CSSをビジネスロジックと混同する代わりに、CSSの残りの部分と一緒にアニメーションを微調整できるため、一般的に非常に優れています。

// initial state
.eye {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   transform: rotate(45deg);
   // etc.

   // transition settings
   -webkit-transition: -webkit-transform 1s linear 0.2s;
   -moz-transition: -moz-transform 1s linear 0.2s;
   transition: transform 1s linear 0.2s;
   // etc.
}

// open state    
.eye.open {

   transform: rotate(90deg);
}

// Javascript
$('.eye').on('click', function () { $(this).addClass('open'); });

変換パラメーターのいずれかが動的である場合は、もちろん代わりにstyle属性を使用できます。

$('.eye').on('click', function () { 
    $(this).css({ 
        -webkit-transition: '-webkit-transform 1s ease-in',
        -moz-transition: '-moz-transform 1s ease-in',
        // ...

        // note that jQuery will vendor prefix the transform property automatically
        transform: 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)'
    }); 
});

MDNでのCSS3遷移に関するより詳細な情報。

ただし、覚えておくべきことが他にもいくつかあります。複雑なアニメーションやチェーンなどがあり、jQuery Transitが内部ですべてのトリッキーな部分を実行する場合、これらすべてが少しトリッキーになる可能性があります。

$('.eye').transit({ rotate: '90deg'}); // easy huh ?

3

IE7 +を含むこのクロスブラウザを実行するには、変換行列を使用してプラグインを拡張する必要があります。ベンダープレフィックスはjquery-1.8 +からjQueryで行われるため、transformプロパティでは省略します。

$.fn.animateRotate = function(endAngle, options, startAngle)
{
    return this.each(function()
    {
        var elem = $(this), rad, costheta, sintheta, matrixValues, noTransform = !('transform' in this.style || 'webkitTransform' in this.style || 'msTransform' in this.style || 'mozTransform' in this.style || 'oTransform' in this.style),
            anims = {}, animsEnd = {};
        if(typeof options !== 'object')
        {
            options = {};
        }
        else if(typeof options.extra === 'object')
        {
            anims = options.extra;
            animsEnd = options.extra;
        }
        anims.deg = startAngle;
        animsEnd.deg = endAngle;
        options.step = function(now, fx)
        {
            if(fx.prop === 'deg')
            {
                if(noTransform)
                {
                    rad = now * (Math.PI * 2 / 360);
                    costheta = Math.cos(rad);
                    sintheta = Math.sin(rad);
                    matrixValues = 'M11=' + costheta + ', M12=-'+ sintheta +', M21='+ sintheta +', M22='+ costheta;
                    $('body').append('Test ' + matrixValues + '<br />');
                    elem.css({
                        'filter': 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')',
                        '-ms-filter': 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')'
                    });
                }
                else
                {
                    elem.css({
                        //webkitTransform: 'rotate('+now+'deg)',
                        //mozTransform: 'rotate('+now+'deg)',
                        //msTransform: 'rotate('+now+'deg)',
                        //oTransform: 'rotate('+now+'deg)',
                        transform: 'rotate('+now+'deg)'
                    });
                }
            }
        };
        if(startAngle)
        {
            $(anims).animate(animsEnd, options);
        }
        else
        {
            elem.animate(animsEnd, options);
        }
    });
};

注:useまたはforのみを設定する必要がある場合、パラメーターoptionsstartAngleはオプションです。startAngle{}nulloptions

使用例:

var obj = $(document.createElement('div'));
obj.on("click", function(){
    obj.stop().animateRotate(180, {
        duration: 250,
        complete: function()
        {
            obj.animateRotate(0, {
                duration: 250
            });
        }
    });
});
obj.text('Click me!');
obj.css({cursor: 'pointer', position: 'absolute'});
$('body').append(obj);

デモについては、このjsfiddleも参照してください。

更新extra: {}オプションを渡すこともできるようになりました。これにより、他のアニメーションを同時に実行できるようになります。例えば:

obj.animateRotate(90, {extra: {marginLeft: '100px', opacity: 0.5}});

これにより、要素が90度回転し、100pxで右に移動し、アニメーション中に同時に半透明になります。


またはIE9はFirefoxで動作しますが、firefoxのみです。
リアム

これで、Chrome、Firefox、IE10で動作するようになりました。IE9、リアムをテストできますか?問題は、ChromeとIEの変換プロパティが定義されていないため、スクリプトが変換プロパティを使用できないと判断したことです。したがって、私はすべてのプレフィックスを含めるようにスクリプトを変更:msowebkitmoz正しく検出を確実にするために。フィドルもv12に更新されます。
イエティ2014

2

これが私の解決策です:

var matrixRegex = /(?:matrix\(|\s*,\s*)([-+]?[0-9]*\.?[0-9]+(?:[e][-+]?[0-9]+)?)/gi;

var getMatches = function(string, regex) {
    regex || (regex = matrixRegex);
    var matches = [];
    var match;
    while (match = regex.exec(string)) {
        matches.push(match[1]);
    }
    return matches;
};

$.cssHooks['rotation'] = {
    get: function(elem) {
        var $elem = $(elem);
        var matrix = getMatches($elem.css('transform'));
        if (matrix.length != 6) {
            return 0;
        }
        return Math.atan2(parseFloat(matrix[1]), parseFloat(matrix[0])) * (180/Math.PI);
    }, 
    set: function(elem, val){
        var $elem = $(elem);
        var deg = parseFloat(val);
        if (!isNaN(deg)) {
            $elem.css({ transform: 'rotate(' + deg + 'deg)' });
        }
    }
};
$.cssNumber.rotation = true;
$.fx.step.rotation = function(fx) {
    $.cssHooks.rotation.set(fx.elem, fx.now + fx.unit);
};

次に、デフォルトのanimatefktで使用できます。

//rotate to 90 deg cw
$('selector').animate({ rotation: 90 });

//rotate to -90 deg ccw
$('selector').animate({ rotation: -90 });

//rotate 90 deg cw from current rotation
$('selector').animate({ rotation: '+=90' });

//rotate 90 deg ccw from current rotation
$('selector').animate({ rotation: '-=90' });

1

jQuery.transitはjQuery.easingと互換性がないため、別の答え。このソリューションは、jQuery拡張機能として提供されます。より一般的ですが、ローテーションは特定のケースです。

$.fn.extend({
    animateStep: function(options) {
        return this.each(function() {
            var elementOptions = $.extend({}, options, {step: options.step.bind($(this))});
            $({x: options.from}).animate({x: options.to}, elementOptions);
        });
    },
    rotate: function(value) {
        return this.css("transform", "rotate(" + value + "deg)");
    }
});

使用法は次のように簡単です。

$(element).animateStep({from: 0, to: 90, step: $.fn.rotate});

0

setIntervalを使用したプラグインクロスブラウザなし:

                        function rotatePic() {
                            jQuery({deg: 0}).animate(
                               {deg: 360},  
                               {duration: 3000, easing : 'linear', 
                                 step: function(now, fx){
                                   jQuery("#id").css({
                                      '-moz-transform':'rotate('+now+'deg)',
                                      '-webkit-transform':'rotate('+now+'deg)',
                                      '-o-transform':'rotate('+now+'deg)',
                                      '-ms-transform':'rotate('+now+'deg)',
                                      'transform':'rotate('+now+'deg)'
                                  });
                              }
                            });
                        }

                        var sec = 3;
                        rotatePic();
                        var timerInterval = setInterval(function() {
                            rotatePic();
                            sec+=3;
                            if (sec > 30) {
                                clearInterval(timerInterval);
                            }
                        }, 3000);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.