animate | Fukuro Press

jQueryで要素を移動・回転・拡大・傾斜アニメーションさせる方法

フク郎 — Thu, 24 May 2018 12:30:24 +0000

jQueryではanimate関数を使うとCSSプロパティを変化させて要素をフェードインさせたりなどのアニメ効果をつけることができます。

しかしこの関数に要素の回転・移動・拡大・傾斜などを行うtransformプロパティを指定することはできないのでそのようなアニメ効果をつけたい場合は別の方法を考えなくてはなりません。

ここでは要素に対して移動・回転・拡大・傾斜アニメーションをつける方法について解説します。

transformプロパティはanimate関数で使えない

transformプロパティは要素を移動・回転・拡大・傾斜の４つの方法で変形させるプロパティのことです。

このプロパティに渡せるのは次の４つの関数です。

translate(移動関数)
rotate(回転関数)
scale(拡大関数)
skew(傾斜関数)

例えばX軸方向に100px、Y軸方向に50px、２倍の大きさに拡大したいなら次のようにtransformプロパティに関数を渡します。

transform: translateX(100px) translateY(50px) scale(2);

関数はスペースで区切ることで複数渡せます。

要素を簡単に変形できて便利ですが、このtranformプロパティはjQueryのanimate関数の中では使えません。

例えば次のような書き方は不可です。

$(".box").animate(
  {transform: "translateX(100px) translateY(50px) scale(2)"}, 
  {duration: 3000}
);

animate関数ではtransformプロパティを使えないので注意が必要です。

transitionプロパティを使う

animate関数は使えないので代わりにアニメさせたい要素に対してtransitionプロパティを指定する方法を使います。

transitionプロパティは要素のCSSプロパティの時間変化を指定するためのプロパティで、次のように変化させたいCSSプロパティと時間をまとめて指定できます。

#box{
  transition: width 3s;
}

このプロパティを指定した時点ではwidthに変化はありません。

次のようにホバーされたときに呼び出されるhover疑似クラス内などでwidthプロパティが指定されると3秒かけてその大きさまでアニメーションつきで変化します。

#box:hover
{
  width: 200px;
}

実際にどのように動くかは下の要素にマウスをホバー(スマホの場合は要素を長押し)してみてください。

サンプル

このtransitionプロパティを使って要素のtransformプロパティを変化させてアニメーションさせます。

やり方ですがまず次のようなアニメさせる要素とボタン要素の２つを用意します。

そしてアニメ表示させる要素に次のCSSを適用します。初期状態では「transform: scale(0)」と指定することで要素の大きさを０にしています。

#box
{
  transform: scale(0);
  transition: transform 3s;
	
  background-color: rgba(0, 255, 255, 0.5);
  width: 200px;
  height: 100px;
}

次がボタンがクリックされたときにtransformプロパティをcss関数で書き換えるスクリプトを書きます。

$(function(){
  $("#show_btn").on("click", function(){
    $("#box").css({transform: "scale(1)"});
  });
});

このようなコードを書くとボタンがクリックされたときに徐々に拡大しながら要素が表示されます。実際にどのような動きをするかは次のボタンをクリックしてみてください。

このようにtransitionプロパティをうまく使えばanimate関数を使わず要素に変形アニメーションを適用できます。

変形アニメーションの種類

最後にtransformプロパティで移動・回転・拡大・傾斜の４種類のアニメ効果のつけ方と例を紹介します。

移動(translate)

要素の移動にはtranslate関数を使います。アニメーションのコード例は次の通りです。

CSSコード

#box{
  transform: translateX(200px);
  transition: transform 2s;
}

スクリプト

$("start_btn").on("click", function(){
  $("#box").css( { transform: translateX(0) } );
});

下のボタンを押すと水色の要素が右から左に移動します。

回転(rotate)

回転にはrotate関数を使い、関数に渡す値には「deg」という角度を表す単位をつけます。

次がアニメーションのコード例です。

CSSコード

#box{
  transform: rotate(360deg);
  transition: transform 2s;
}

スクリプト

$("start_btn").on("click", function(){
  $("#box").css( { transform: "rotate(0deg)" } );
});

下のボタンを押すと要素が回転します。

拡大・縮小

要素の拡大・縮小にはscale関数を使います。以下がコード例です。

CSSコード

#box{
  transform: scale(0);
  transition: transform 2s;
}

スクリプト

$("start_btn").on("click", function(){
  $("#box").css( { transform: "scale(1)" } );
});

下のボタンを押すと水色の要素が徐々に拡大されながら表示されます。

傾斜(skew)

要素を傾けて表示するにはskew関数を使います。関数に渡し値にはscale関数と同じく「deg」という単位をつけるのを忘れないでください。

以下がコード例です。

CSSコード

#box{
  transform: skew(0deg, 0deg);
  transition: transform 2s;
}

スクリプト

$("start_btn").on("click", function(){
  $("#box").css( { transform: "skew(20deg, 5deg)" } );
});

下のボタンを押すとX軸方向に20度、Y軸方向に5度だけ要素が傾きます。

以上jQueryでtransformプロパティをアニメーションさせる方法について解説しました。

The post jQueryで要素を移動・回転・拡大・傾斜アニメーションさせる方法 first appeared on Fukuro Press.

jQueryでanimate関数を使わずtransformプロパティをアニメーションさせる方法

フク郎 — Wed, 23 May 2018 12:30:51 +0000

jQueryで要素のアニメーションをするにはanimate関数が使われます。

しかしCSSで要素の移動・回転・拡大・傾斜を行うtransformプロパティを指定することはできません。

そこでtransitonプロパティを使ってanimate関数を使わずに要素をアニメーションさせる方法について紹介します。

animate関数にtransformプロパティは渡せない

jQueryのanimate関数は時間に沿ってCSSプロパティを変化させて要素をアニメーションさせるための関数です。

animate関数には次のように２つの引数を渡します。

$("セレクタ").animate({CSSプロパティ}, {オプション})

CSSプロパティには「プロパティ名: 値」の形式でアニメーション終了時のCSSプロパティを指定し、２つめのオプションには再生時間を指定できます。

例えば要素のwidthを200px、heightを100pxに５秒間かけて変化させたいなら次のように書きます。durationには再生時間をミリ秒で渡します。

$(".box").animate(
  {width: 200px, height: 100px}, 
  {duration: 3000}
);

ただしこのanimate関数にはtransformプロパティを渡すことはできません。

例えば以下の例は３秒間かけて透過度を1から0.5、transformプロパティにrotateY関数を渡して要素を回転させようとしたスクリプトです。

jQuery(".box").css({transform: "rotate(360deg)"});
jQuery(".box").animate(
  { transform: "rotate(0deg)", opacity: 0.5 },
  {duration: 3000}
);

こう書いた場合透過度(opacity)だけが変化し、要素は回転しません。

animate関数で複雑なアニメーションをするのにtransformプロパティを渡すのをやってしまいがちですが、こう書いても期待通りのアニメーションはしないので注意してください。

transformプロパティをアニメーションさせるには

そこでanimate関数の代わりにアニメーションさせる要素に対してtransitionプロパティを指定します。

まず次のようにアニメーションさせる要素とクリックしたらアニメを開始するボタンを定義します。

そしてこの要素に対して次のようなCSSを指定します。

#box { 
  transform: rotate(360deg); 
  transition: transform 1s; 
  
  background-color: rgba(0, 255, 255, 0.5);
  width: 200px;
  height: 100px;	
}

transitionプロパティにはtransformプロパティが変化したら1.0秒かけて変化するように指定してあります。

そしてボタンがクリックされたときにスクリプト側でcss関数を使い、次のようにtransformプロパティを変化させます。

jQuery(function(){
  jQuery("#start_btn").on("click", function(){
    jQuery("#box").css({transform: 'rotate(0deg)'});
  });
});

実際にどのように動くかは下のボタンを押して確かめてください。

「スタート」ボタンを押すと右に一回転して元に戻ります。もう一度アニメを見る場合はページをリロードしてください。

以上、jQueryでtransformプロパティをアニメーションさせる方法について解説しました。

The post jQueryでanimate関数を使わずtransformプロパティをアニメーションさせる方法 first appeared on Fukuro Press.