カテゴリー別アーカイブ: Javascript / jQuery

簡単にSVGアニメーションが実装できるjQueryプラグインLazy Line Painterの使い方

SVGアニメーションの例

今回は、線画を描いていくSVGアニメーションを簡単に実装できる、Lazy Line PainterというjQueryプラグインの使い方を紹介します。

DEMO

まずはDEMOをご覧ください。こんな感じのアニメーションが作れます。

Lazy Line Painter DEMO

使い方

以下のような手順で実装できます。

  1. IllustratorなどでSVGを作成する
  2. JSファイルをHTMLに読み込ませる
  3. Lazy Line PainterのサイトでSVGファイルからコードを生成する
  4. 3のコードをHTMLに記述する

1. IllustratorなどでSVGを作成する

まずは、アニメーションさせたいSVGを作成します。Illustratorの場合は、ファイル>書き出し などでSVG形式の画像を書き出すことができます。

Lazy Line Painterで出来るのは線画のアニメーションなので、塗り無しの線画にしておきます。

2. JSファイルをHTMLに読み込ませる

読み込みが必要なファイルは、jQuery本体とLazy Line PainterのJSファイルの2つだけです。Lazy Line PainterのJSファイルは、GitHubからダウンロードします。

Lazy Line Painterのダウンロードページ|GitHub
(右の方の緑のボタンからZIPファイルがダウンロードできます。)

ZIPの中には色々なファイルが入っていますが、必要なのは「jquery.lazylinepainter-1.7.0.min.js」だけです。

以下のようなコードを、HTMLのhead要素内かbodyの終了タグの直前に書いて読み込ませます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jquery.lazylinepainter-1.7.0.min.js"></script>

3. Lazy Line Painterのサイトでコードを生成する

Lazy Line Painterサイト

Lazy Line Painterのサイト

上記サイトにアクセスし、「Click or Drop your SVG file here to be converted」と書いてある赤い枠の中にSVGファイルをドロップします。

ファイルをドロップする場所

すると、アニメーションのプレビューとコードが生成されます。アニメーションの順番は、背面にあるオブジェクトから先に描画されるようになっています。

Lazy Line Painterでのプレビュー

アニメーションを確認したら、上の画像の青枠で囲った部分(Copy data to clipboard)をクリックしてコードをコピーします。

4. 3のコードをHTMLに記述する

手順2で書いたscript要素の下に新しくscript要素を作り、手順3でコピーしたコードをペーストします。その際、以下の2箇所を同じ文字列に変更してください。

SVGオブジェクトのキー

var pathObj = {
  "SVG_sample": { //この部分がキー(SVGのファイル名になっている)
    "strokepath": [

lazylinepainter実行場所を指定するセレクタ(ID名)

/* 
 Setup and Paint your lazyline! 
 */ 

 $(document).ready(function(){ 
   $('#undefined').lazylinepainter( //IDの #undefined を上のキーと同じにする
   {
     "svgData": pathObj,
     "strokeWidth": 2,
     "strokeColor": "#e09b99"
   }).lazylinepainter('paint'); 
 });

この2つを同じ名前にします。キーとIDが同じであればデフォルトの名前を使わなくても大丈夫です。

その他

以上のような手順でSVGアニメーションが実装できます。

また、SVGから生成したコード中の「Setup and Paint your lazyline!」の部分で線の太さや色を変更したり、アニメーション前後の動きなどをオプションで指定することができます。

/* 
 Setup and Paint your lazyline! 
 */ 

 $(document).ready(function(){ 
   $('#undefined').lazylinepainter( 
     "svgData": pathObj,
     "strokeWidth": 2,         //線の太さ
     "strokeColor": "#e09b99"  //線の色
   }).lazylinepainter('paint'); 
 });

どんなオプションが使えるかはGitHubで確認できます。

また、SVGのコードの「”duration”」の部分で、パスの描画にかける時間を設定できます。単位はミリ秒です。

簡単に実装できるので、ぜひ使ってみてください。

jQuery 演算子の種類4 ~論理演算子~

3回にわたってJavaScriptの演算子(算術演算子、代入演算子、比較演算子)を紹介してきました。4回目の今回は、論理演算子を紹介します。今までの記事は下記リンクからご覧ください。

論理演算子

論理演算子は、名前から用途が想像しづらいですが、複数の条件を組み合わせたり、真偽値(trueかfalseか)を反転したりするための演算子です。「~かつ~」「~または~」といった意味を持つ演算子があります。比較演算子と同じく、if文の条件指定によく使われます。

論理演算子の種類
演算子 意味 備考
&& AND(かつ) A && B と書いたとき
AとBの両方とも当てはまれば true
AとBのどちらか片方でも当てはまらなければ false
|| OR(または) A || B と書いたとき
AとBのどちらか片方でも当てはまれば true
AとBの両方とも当てはまらなければ false
! NOT(真偽値の反転) !条件 の形で書く
trueがfalseになり、falseがtrueになる

論理演算子の使用例

以下は論理演算子で条件指定したif文の例です。

if(hoge < 5 || hoge > 10){ //hogeが4以下または11以上のとき
  $("p").css("color","red");
} else if(hoge > 5 && hoge < 10){ //hogeが6以上9以下のとき
  $("p").css("color","green");
} else { //それ以外(hogeが5か10)のとき
  $("p").css("color","blue");
}

hogeが4以下または11以上のときにp要素の文字色を赤に、6以上9以下のときに緑に、それ以外のときに青にする命令です。

参考サイト

jQuery 演算子の種類3 ~比較演算子~

前回前々回の記事に引き続き、演算子についてです。今回は比較演算子を紹介します。

比較演算子

比較演算子は、「等しい」とか「~より大きい」など二つの値を比較するための演算子です。比較演算子は、if文の条件指定などによく使われます。前回の記事で「=」だけでは「等しい」という意味にならないと書きましたが、今回紹介する「==」や「===」が「等しい」という意味の演算子です。

比較演算子の種類
演算子 意味 備考
== 等しい 型の違いは比較しません
=== 厳密に等しい 型の違いも厳密に比較します
!= 等しくない 型の違いは比較しません
!== 厳密に等しくない 型の違いも厳密に比較します
> より大きい 3>3 のときはfalse、4>3 ならtrue
< より小さい(未満) 3<3 のときはfalse、2<3 ならtrue
>= より大きいか等しい(以上) 3>=3 も 4>=3 もtrue、2>=3はfalse
<= より小さいか等しい(以下) 3<=3 も 2<=3 もtrue、4<=3はfalse

比較演算子の使用例

以下は比較演算子で条件指定したif文の例です。

if(hoge >= 5){
  $("p").css("color","red");
}

もしも変数 hoge が5以上だったらp要素の文字色を赤にするという命令です。

参考サイト

jQuery 演算子の種類2 ~代入演算子~

前回の記事に引き続き、jQuery(JavaScript)の演算子についてです。今回は代入演算子を紹介します。

代入演算子

代入演算子は、右辺のものを左辺の変数に代入するという意味です。「=」を使いますが、「=」単体で等しいという意味にはなりません

代入演算子の種類
演算子 意味
= 値を変数に代入する
+= 加算(足し算)して代入する
-= 減算(引き算)して代入する
*= 乗算(掛け算)して代入する
/= 除算(割り算)して代入する
%= 剰余(割り算の余り)を代入する

参考サイト

jQuery 演算子の種類1 ~算術演算子~

今回の記事から数回に分けて、jQueryで使うJavaScriptの演算子を紹介していきます。これらの演算子は、JavaScriptだけでなく、PHPなど他のプログラミング言語でも使えるものが多いです。

演算子の種類

演算子とは、どんな計算をするか指示するための記号のようなものです。演算子には「算術演算子」「代入演算子」「比較演算子」「論理演算子」など種類がありますが、今回は「算術演算子」を紹介します。

算術演算子

算術演算子の種類
演算子 意味
+ 加算(足し算)
- 減算(引き算)
* 乗算(掛け算)
/ 除算(割り算)
% 剰余(割り算の余り)
++ インクリメント(値を1増やす、1を足す)
-- デクリメント(値を1減らす、1を引く)

加算演算子「+」だけは、数値で計算をするほか、文字列を連結することもできます。たとえば、var sample = “Hello ” + “World” と書いたら、変数sampleには”Hello World”という文字列が入ります。

インクリメント演算子「++」やデクリメント演算子「--」は、変数に数値が入っているとき、その数値を1ずつ増減します。以下は書き方の例です。

インクリメント・デクリメントの記述例

jQuery

var sample = 2
sample++; //sampleを1増やす
alert(sample); //3が表示される

上の sample++; の部分でsampleの数値を1増やしています。デクリメントの場合は、変数名--; でOKです。

参考サイト

jQuery 変数の使い方と宣言のしかた

今回は、jQueryの変数の使い方について、変数ってどんなものかという話から紹介します。

変数とは

色々なプログラム言語でよく出てくる「変数」は、しばしば「値を中に入れて、とっておける箱」にたとえられます。たとえば、Aという名前の変数(箱)を作って、中に「あいうえお」という文字を入れておいたら、次に「あいうえお」と書きたいときは「A」と書けばいいというイメージです。たとえば以下のようなときに変数を使います。

  • プログラムの中で同じ文字列などを繰り返し沢山使うとき、それを短い名前の変数に入れて記述しやすくする
  • 状況によって値が変わるもの(たとえば「セレクトボックスで選ばれている要素」や「いくつかの要素の中でクリックされた要素」など、決まった値が指定できないもの)を保存してプログラムで使うとき

jQuery(JavaScript)の変数の書き方

「jQueryの変数」と書きましたが、変数の宣言はJavaScriptの書き方がそのまま使われるので、「jQueryで変数を宣言する方法」=「JavaScriptで変数を宣言する方法」です。

var 変数名 = 中に入れるもの

var というのが変数を作りますよ、という宣言です。その次に半角スペースを空けて変数名(任意の文字列。ただし先頭に数字は×)を書きます。変数の中身を呼び出したいときには、この変数名を使います。= の後に、変数の中に入れるものを書きます。文字列を記述すれば変数にその文字列が入り、何らかの処理を書けばその結果が変数に入ります

変数の使用例

以下は、2つのフォームに入力された数字を掛け算するプログラムです。フォームに入力された値をval()で取得して、計算できる型にしたあと、変数valAとvalBにそれぞれ入れています。

HTML

<p>
<input type="number" id="numA">
×
<input type="number" id="numB">
=
<span id="answer"></span>
</p>
<input type="button" id="go" value="計算する">

jQuery

$("#go").click(function(){
  //フォームの入力値を文字列として取得する
  var numA = $("#numA").val();
  var numB = $("#numB").val();
  //文字列のままでは計算できないので、計算できるように数値に変換する
  var valA = Number(numA) || 0;
  var valB = Number(numB) || 0;
  //#answerに掛け算した答えを表示する
  $("#answer").text(valA * valB);
});

DEMO

掛け算プログラム

上記プログラムのデモファイルです。実際にブラウザで表示して試してみてください。

jQuery fadeIn・fadeOutで表示非表示

jQuery fadeIn fadeOut

今回は、要素をふわっと表示する fadeIn と非表示にする fadeOut を紹介します。

fadeInの書き方

$( 表示させる要素 ).fadeIn( 時間 , コールバック );

コールバックは、フェードインが終わった後の動作のことです。

fadeOutの書き方

fadeOut も同じように書くことができます。

$( 表示させる要素 ).fadeOut( 時間 , コールバック );

記述例

下記の例は、#sample1 にホバーしたら #sample2 がフェードインで表示され、マウスポインタを外すとフェードアウトで消える例です。ポップアップの表示などに使えるかもしれません。

$("#sample1").hover(function(){
  $("#sample2").fadeIn("slow");
},function(){
  $("#sample2").fadeOut("slow");
});

DEMO

fadeInとfadeOutのデモ

上記例のデモファイルです。灰色の四角にホバーすると赤い四角が現れます。

参考

jQuery if文を使った条件分岐の方法2

jQuery else if

前々回の記事で「もしAなら○○する」というif文の書き方を紹介し、前回の記事では「もしAなら○○、そうでなければ××」というelse文を紹介しました。今回は、このふたつを組み合わせて「もしAなら○○、AでなくてBなら××」という 書き方を紹介します。

else if の書き方

「もしAなら○○、AでなくてBなら××、BでもなくてCなら……」という風に、if 文で複数の条件を使って分岐を行いたいときは、else と組み合わせて else if 「そうではなくて、もし」という書き方をします。

if( 条件1 ){
  条件1に当てはまる場合の処理
} else if( 条件2 ){
  条件2に当てはまる場合の処理
} else if( 条件3 ){
  条件3に当てはまる場合の処理
} else {
  どれにも当てはまらないときの処理(最後のelseは無くてもOK)
}

記述例

下記は前回の記事で紹介した「答え合わせ」の仕組みに、条件を追加したものです。

フォームに「正解」と入力すると「赤い○」が、フォームに「正解」が入力されておらず、かつ空でないとき(間違った回答のとき)「青い×」が、それ以外のとき(フォームが空のとき)「回答を入力してね!」という文が表示されます。

$("#check").click(function(){
  var answer = $("#answer").val();
  if(answer == "正解"){
    $("#answerArea").css("color","red");
    $("#answerArea").html("○");
  } else if(answer != ""){
    $("#answerArea").css("color","blue");
    $("#answerArea").html("×");
  } else {
    $("#answerArea").css("color","black");
    $("#answerArea").html("回答を入力してね!");
  }
});

DEMO

答え合わせデモ2

上記スクリプトのデモです。

参考

jQuery if文を使った条件分岐の方法2

jQuery else

前回に引き続き、jQueryの条件分岐の書き方を紹介します。今回は、if文で指定した条件に当てはまらなかった場合に別の処理を実行させる else の書き方です。

else文の書き方

else は if とセットで使います。if で指定した条件に当てはまらなかった場合、else に書いた処理が実行される仕組みです。

if( 条件 ){
  条件に当てはまる場合の処理
} else {
  条件に当てはまらない場合の処理
}

記述例

下は、フォームを使った答え合わせの仕組みです。#check がクリックされたとき、フォーム#answerに入力された内容が「正解」なら#answerAreaに赤い「○」、それ以外なら青い「×」が表示されます。

$("#check").click(function(){
  var answer = $("#answer").val();
  if(answer == "正解"){
    $("#answerArea").html("○");
    $("#answerArea").css("color","red");
  } else {
    $("#answerArea").html("×");
    $("#answerArea").css("color","blue");
  }
});

DEMO

答え合わせデモ

上記例のDEMOファイルです。

参考

jQuery if文を使った条件分岐の方法1

jQuery if

今回の記事から3回に分けて、jQueryで条件分岐をする際のif文の書き方を紹介します。if文は「もし~ならAの処理」というように、条件にあった場合のみ処理を実行する条件分岐文です。

if文の書き方

if文は以下のように書きます。

if( 条件 ){
  条件に当てはまる場合の処理
}

条件に当てはまらなかった場合に別の処理を実行する書き方もありますが、それは次回記事で紹介します。

if文の記述例

下は、#sample にホバーしたとき、もし #sample img の display プロパティの値が none だったら fadeIn で表示させる例です。

$("#sample").hover(
  function(){
    if($("#sample img").css("display") == "none"){
      $("#sample img").fadeIn(500);
    }
  }
);

参考

次回記事では、条件に合わなかったときに別の処理を実行する書き方を紹介します。