どーも、ご無沙汰しています。
新入社員に「本舘さんはアニオタだよ」と紹介されているらしく、何の反論もできないものの複雑な感情を想起された本舘です。
記事前の挨拶にアニメネタを振る……と言うのも考えたのですが、差し止めされそうなので、無難に我が家のお庭のメンバー紹介です。
……冬になったらどうしよう?
写真は我が家が誇るバラです。品種は忘れましたが、とても鮮やかな花を付けます。
ちなみにこれは、１０月現在の写真。世間は秋色に染まり、気温も低くなってきたというのに、このヤロウ（？）は今年３度目の花期を迎えました。
こいつは我が家の庭でトップクラスの生命力を誇り、枝葉を伸ばしては片っ端から蕾を付けまくる怪物。怪獣映画『ゴジラ』シリーズの、バラから生まれた怪獣ビオランテを彷彿とさせます。トゲは怪獣の名に相応しく強靭で、金属かと思う程に堅く、鋭いです。
草むしり中、何度こやつに引っかかれたことか……
……と、時節の挨拶（？）が終わったところで、今回の本題。mo.jsの基本である「Shape」クラスの応用編を見ていきましょう。
「ポワ～ン」と波紋を広げるサンプル
前回の記事で、「図形の動作は、Shapeのコンストラクタへ渡すパラメータで決まる」という事を解説しました。
Animoconデモにある「波紋」のような動作を設定するのも、その例外ではありません。所詮はコンストラクタへ渡すパラメータが違うというだけです。
早速、簡単な波紋を作るサンプルを用意しましょう。
<body>
<input id="btnTgt" type="button" value="波紋を出すよ！" onclick="doShape();">
<script src="mo.min.js"></script>
<script>
// 波紋のタネ
var objShape = new mojs.Shape({
shape : 'circle',
scale: {
0 : 1
},
radius: 300,
stroke: 'pink',
strokeWidth: {
50 : 0
},
fill: 'transparent',
duration: 1000
});
// 波紋を出すよ！
function doShape() {
objShape.replay();
}
</script>
</body>?のサンプルのお試しはこちら（jsFiddleのページに飛びます）
上記サンプルを実行して、左上端にあるボタンをポチッ?と押した結果が……。
?の図の通りです。ピンク色の波紋が「ポワ～ン」と広がり、消えていきます。
波紋のサンプルを解説しますと……
サンプルのコードを眺めると、前回の記事で紹介したパラメータがチラホラと見えます。紹介済のパラメータの部分だけ抜き出して、動作を説明すると……。
“「半径300ピクセルの透明色（＝transparent）の円を1秒間（＝1000ミリ秒）かけて、縮尺0（＝半径0ピクセル、すなわち何も表示されていない）から縮尺１（＝半径300ピクセル）まで大きくする」”
という事になりますね。
これって、前回のサンプルの色違いなだけです。円の色を青ではなく、透明に指定しているだけです。
とすると……勘の良い方は既に「ああ、なるほど」と気付いてしまっているかと思いますが……波紋の部分とは、円（＝図形）の輪郭である、ということが言えます。
つまり、今回のサンプルで新しく追加したパラメータは、「輪郭」に関する設定というワケです。早速、その内訳を見ていきましょう。
■stroke
「一撃」とか「羽ばたき」という意味の言葉ですが、mo.jsでは「輪郭」と解釈してＯＫです。このパラメータでは「輪郭の色」を設定します。
■strokeWidth
「輪郭」に「Width（＝幅）」という言葉が付いたもので、そのままズバリ「輪郭の幅」を設定するパラメータです。
このサンプルでは「scale」パラメータと同様の形式で指定していますが、これは{[動作開始時の幅] : [動作終了時の幅]}を表しています。
これらのパラメータを踏まえて、改めてサンプルの動作を解説すると。
“「半径300ピクセルの透明色（＝transparent）で、輪郭の色がピンクの円を1秒間（＝1000ミリ秒）かけて、縮尺0（＝半径0ピクセル、すなわち何も表示されていない）から縮尺１（＝半径300ピクセル）まで大きくする。この時、輪郭の幅を50ピクセルから0ピクセルへと変化させる」”
ということになります。
新しい事は少ないので簡単ですよね♪ ……ですよね？
さて、次回は……
第一回の記事で紹介した「花火」を実装するための「輪」の部分は、今回の「波紋」の解説によって実装方法をご理解いただけたと思います。
次回は、「花火」を構成するもう一つの要素。パッと弾けて広がる「飛沫」の部分の実装方法を解説したいと思います。
次回はmo.jsのクラス「Burst」を新たにご紹介することになりますので、心の準備をしておいてください……！
それでは、またお会いしましょう。