jQuery自由にアニメーション移動サンプル！

今回は、jQueryでもう少し自由にアニメーションさせる作り方をサンプルと共に記載していきます。

jQueryのアニメーションで、「もっと自由に動きを付けたい！」や「アニメーションのサンプルは？」などの初心者の方の質問に答えるべく、animate()メソッドにCSSのプロパティを指定して、比較的自由なアニメーションのサンプルの表現をしてみようと思います。

という事で、それでは今回はッ、

・CSSを操作してアニメーション:animate()メソッド
・animate()メソッドで複数のCSSを操作
・アニメーションの動きに変化を付ける

上記について記載していこうと思います…。

CSSを操作してアニメーション:animate()メソッド

前回までのエフェクト系メソッドは、CSSのopacityを操作したり、heightを操作してアニメーションを表現するものの紹介でした。animate()メソッドは、ご自身でCSSのプロパティを指定して、アニメーションを作ることができるメソッドになります。

例えばmarginを変更すれば、要素が動いているように見えますし、heightとwidthを変更すれば、拡大するようなアニメーションを作ることができます。

という事で、サンプルを記載していきます。

サンプルソース<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#photo”).animate({
“margin-left”: “200px”
)};
});
</script>
</head>
<body>
・・省略・・
<p id=”photo”>
<img src=”images/roadBike.jpg” width=”180″ height=”135″ alt=”エモンダ”>
</p>
<p>animate()メソッドでmarginを操作してアニメーション！</p>
・・省略・・
</body>
</html>

animate()メソッドでmarginを操作してアニメーション！

↓↓↓　margin-left:0;から変化しながらmargin-leftの指定箇所に移動　↓↓↓

animate()メソッドでmarginを操作してアニメーション！

animate()メソッドは、CSSのプロパティと値をセットにして記述します。

animate({ “プロパティ” : “値” })

このサンプルの記述方法は、見覚えがあることと思います。css()メソッドの書き方に似ています。

css()メソッドでは、記述方法が複数ありました。キャメルスタイルを使用したり、クォーテションを省略した記述方法がありました。animate()メソッドの記述方法も、css()メソッドの記述方法に似ていて、複数の記述方法があります。

サンプル1animate({ “margin-left” : “200px” })
animate({ marginLeft : “200px” })
animate({ “marginLeft” : “200px” })

上記どの記述方法でも動作はします。

また、animate()メソッドではCSSのプロパティを利用してアニメーションを作成しますが、どんなプロパティでも利用できるわけではありません。利用できるプロパティは、値を数値（pxやem、%など）で指定できるものに限ります。

例えばmargin-top、opacity、heightなどは使用することができますが、colorなどの数値で指定できないプロパティは使えません。また、今までの紹介したメソッドと同じように、アニメーションのスピードを設定することができます。記述方法は「{}」ブレースの外に「,」カンマで区切って指定します。

animate({ “プロパティ” : “値” }, “スピード”)

サンプル2animate({ “margin-left” : “200px” },2000)
animate({ marginLeft : “200px” },”slow”)

animate()メソッドで複数のCSSを操作

それではもう一つanimate()を使ったサンプルを記載してみます。今度はwidthとheightの複数のプロパティを使ってみます。

サンプルソース2<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#photo”).animate({
“width”: “400px”
“height”:”300px”
},”slow”);
});
</script>
</head>
<body>
・・省略・・
<p id=”photo”>
<img src=”images/roadBike.jpg” width=”180″ height=”135″ alt=”エモンダ”>
</p>
<p>animate()メソッドでmarginを操作してアニメーション！</p>
・・省略・・
</body>
</html>

animate()メソッドでmarginを操作してアニメーション！

↓↓↓　600ミリ秒（0.6秒）かけて、徐々に拡大表示される　↓↓↓

animate()メソッドでmarginを操作してアニメーション！

複数のプロパティを指定するときでも、記述方法は基本的には同じです。「,」カンマでつないでいくだけです。改行やインデントをするとコードが見やすくなります。

$(“セレクタ”).animate({
“プロパティ”:”値”,
“プロパティ”:”値”,
},”スピード”);

jQueryを使っている色々なUIを作ろうとすると、必ずといってイイほど何かしらのアニメーションを使います。見ためにも楽しいエフェクト系メソッドですが、実は色々なCSSプロパティの値を、徐々に変更していって表現しているものとなります。
CSSを理解している人にとっては、それほど難しいものではない事と思います。

アニメーションの動きに変化を付ける

jQueryのアニメーションと一緒によく使われるのが、Easingというプラグインになります。
Easingを利用すれば、単調なアニメーションの動きに変化を付けることができます。どのように変化するかは、下記リンクより確認することができます。

jQuery日本語リファレンス

サンプルソース3<script src=”js/jquery.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js”></script>
<script>
$(function(){
$(“#list”).slideDown(600, “easeInOutElastic”);
});
</script>

Easingプラグインの使い方はとても簡単です。公式サイトよりjQuery.easing.jsをダウンロードして使用するか、もしくは上記サンプルのように、cdnを使用するかになり、head内などでjQuery.jsの後に読み込みます。

あとはアニメーション系のメソッド内、スピードの後にEasingのエフェクトを指定するだけでOKです。

.メソッド(スピード,”easing”)

jQuery Easing Plugin［jquery.easing.js］

このEasingには様々なエフェクトが用意されていて、公式サイトではその動きを確認することもできますので、ぜひいろいろなエフェクトの動きを確認してみることをオススメします。ご自身のサイト制作にも役立つことと思います。

という事で今回は、jQuery自由にアニメーション移動サンプル！animate()メソッドとEasingにつきまして、サンプルコードと共に記載いたしました。

animate()メソッドが自由に使いこなすことができると、サイトのデザイン表現の幅が、より一層広がることと思います。また、アニメーションを記載するうえで欠かせないEasing、エフェクトの種類も豊富にあることから、他のサイトとの差別化を図る上でも重要な要素のように思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。