POPSブログ

CreateJS Loading Shape 回転テスト1

265

  Category:  javascript2013/12/12 pops 

画像読み込み時に欠かせないのがLoadingです。画像読み込み中回転を続けるShape、イベント毎にグラフイックを書き換えて回転する形式で作りました。matrix変換、transformPoint()を利用すると簡単に仕上がります。
easeljs-0.7 でのテストです。

 

CreateJS Loading Shape 回転テスト1


このページ以前にも画像読み込み時、Loadingを利用していますが、皆、インスタンスを rotation で回転させているものでした。今回のLoadingはイベント毎にグラフイックを書き換えて回転する形式で作りました。
AS3でもそうですが、イベント毎にグラフイックを書き換えた方が回転がスムーツに成ります。ただ作るのが面倒なのでrotationでインスタンスを回転させて済ませることが多い。但し、以外と回転がぎこち無いのが欠点である。


簡単軽量、Canvasエレメント描画の簡単な図形をBitmap()で表示して作る Loading です。
少々特殊かも知れませんが、下記ページの最後に3種類掲載しています。(Html5 Canvas仕様 で作っています)

【参照】当方の記事: CreateJS Canvasエレメント描画の TextCircle (サークルテキスト)等を作る


DEMO


CreateJS Loading Shape 回転テスト1デモ、(createJS050.js)

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// 注意、ブラウザ、マシン性能により描画品質などに大きな差が有ります事了承下さい ///


Chrome Firefox Safari(Win) IE9、で動作確認済み。 Safari(Mac)、IE10、は未確認です。


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

ダウンロードしたJSを使用する場合。記述は一例です。(バージョン 0.7.0 使用)


<script type="text/javascript" src="js/easeljs-0.7.0.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。
このデモでは、preloadjs tweenjs は必要では有りません。


HTML (HTML5)


<div id="demo-wrap">
	<div id="image-box">
		<canvas id="mainCanvas" width="640" height="300"></canvas>
	</div>
</div>

JS

createJS050.js、JS名は任意に変更可。注意、easeljs-0.7用です。


//日本語
//createJS050.js
//Loadingデモ1
//easeljs-0.7用

//--------------------------------------------------------------

//canvasの大きさ/全てこの値を使用
var canvasWidth=640;
var canvasHeight=300;

//Loadingの色 かならず#xxxxxxの16進カラー形式で記入のこと
var loadingbackcolor="#FF1493";
//回転の角度
var angle=Math.PI/12;

//テキスト使用
var textUse=true;

//--------------------------------------------------------------

var stage;
var viewtext;

var loadingShape;
var loadingpoints1=[];
var loadingpoints2=[];
var matrix1=new createjs.Matrix2D();
var matrix2=new createjs.Matrix2D();

//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);

function init() {

	stage=new createjs.Stage("mainCanvas");

	//バックRect/最下位色背景層、無くとも良い
	var backrect=new createjs.Shape();
	backrect.graphics.beginFill("#000000").drawRect(0,0,canvasWidth,canvasHeight);
	stage.addChild(backrect);
	stage.update();

	loadingShape=new createjs.Shape();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;
	stage.addChild(loadingShape);

	//簡易TEXT
	viewtext=new createjs.Text("","12px Arial","#FFFFFF");
	viewtext.x=20;
	viewtext.y=15;
	viewtext.maxWidth=canvasWidth-40;
	viewtext.lineHeight=20;
	viewtext.textBaseline="bottom";
	viewtext.shadow=shadow;//SHADOW処理
	stage.addChild(viewtext);

	//TEXT
	set_text("Loading Now!");

	//位置の決定
	initPoints();
	//描画
	draw_loading();

	//Listener
	createjs.Ticker.setFPS(20);
	createjs.Ticker.addEventListener("tick",loading_rotate);

}

//Ticker
function loading_rotate(event) {

	//回転速度方向
	//angle=1/5;//右
	angle=-1/5;//左

	//matrix変換
	var count=loadingpoints1.length;
	matrix1.identity().rotate(angle);
	matrix2.identity().rotate(angle);
	//point決定
	for (var i = 0; i < count; i++) {
		var point=loadingpoints1[i];
		matrix1.transformPoint(point.x,point.y,point);
		var point2=loadingpoints2[i];
		matrix2.transformPoint(point2.x,point2.y,point2);
	}
	//書換え
	draw_loading();
}

//初期ライン描画位置計算
function initPoints() {

	//描画データ
	var cx,cy,
	numNeedles=12,
	innerR=15,
	outerR=10,
	cAngle= -Math.PI/2,
	nAngle;

	//ライン描画位置
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){
		cAngle +=nAngle;
		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		//位置保存
		loadingpoints1.push(new createjs.Point(cx,cy));
		cx=Math.cos(cAngle)*outerR;
		cy=Math.sin(cAngle)*outerR;
		//位置保存
		loadingpoints2.push(new createjs.Point(cx,cy));
	}
}

//回転グラフイック書換え
function draw_loading() {

	var count=loadingpoints1.length;
	var _point=loadingpoints1[count-1];
	var _point2=loadingpoints2[count-1];
	//透明度
	var alpha_v=1;

	//16進カラーをrgbの形式に変換、面倒
	var rgbArr=toRgb(loadingbackcolor);

	//graphicのスタイル
	var graphics=new createjs.Graphics();
	//graphics.setStrokeStyle(2,"round").beginStroke("rgba(0,0,0,1)");
	//graphics.setStrokeStyle(2,"round").beginStroke("rgbArr[0],rgbArr[1],rgbArr[2],1)");

	//graphics.setStrokeStyle(5,"round");
	graphics.setStrokeStyle(5,"butt");

	loadingShape.graphics.clear();

	//ライン描画
	for (var i=0; i < count; i++){

		//透明度をライン毎に変更
		//alpha_v=1/(count-i);
		alpha_v -=0.05;

		//虹色計算alpha無し
		//var alphaback=createjs.Graphics.getHSL(i/count*360,100,50);

		//var alphaback=createjs.Graphics.getRGB(255,0,0,alpha_v);
		//rgbaのデータ設定alpha
		var alphaback=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],alpha_v);
		//rgbaのデータ設定を適用
		graphics.beginStroke(alphaback);
		//point1
		_point=loadingpoints1[i];
		loadingShape.graphics=graphics.moveTo(_point.x,_point.y);
		//point2
		_point2=loadingpoints2[i];
		//loadingShape.graphics.moveTo(_point2.x,_point2.y);
		loadingShape.graphics=graphics.lineTo(_point2.x,_point2.y);

	}
	stage.update();

}

//変換は配列で返すナントカ使える
function toRgb(bc) {
	bc=bc.replace("#","");
	var rgbArr=[];
	rgbArr[0]=parseInt(bc.slice(0,2),16);
	rgbArr[1]=parseInt(bc.slice(2,4),16);
	rgbArr[2]=parseInt(bc.slice(4,6),16);
	return rgbArr;
}

//VIEWTEXT
function set_text(t) {
	if (textUse) {
		viewtext.text=t;
		stage.update();
	}
}

//--------------------------------------------------------------

init();

注釈文を削除すれば、幾分早くなります。
画像使用の場合、登録画像パスは当方の例です。使用の際は環境に合わせて下さい。


CSS

createJS050.css、CSS名は任意に変更可


/*日本語 createJS050.css*/

#demo-wrap {
text-align:center;
}

#image-box {
position:relative;
top:0;left:0;
width:640px;
height:300px;
margin:0 auto;
padding:0;
border:1px #CCCCCC solid;
background-color:#FFFFFF;
}

当方のサンプルの例です。


簡単な説明


Loadingをイベント毎にグラフイックを書き換えて回転


円周上にライン,図形などを配置した回転するLoadingを作る場合に、イベント毎にグラフイックを書き換えて回転させるのも1つの方法です。
HTML5テクニカルノート、「EaselJSのMatrix2Dオブジェクトの変換行列を適用する」の記事を参考に作成しました。


【参考】HTML5テクニカルノート: EaselJSのMatrix2Dオブジェクトの変換行列を適用する


transformPoint()を利用すると簡単に座標変換してくれますので、回転をずらす度に再計算する手間が省けます。グラフイック書き換えLoadingを簡易に作ることが出来ます。(transformPoint()はeaseljs-0.7より利用可能)
Loadingはlineを描写する形式のものですから、lineの長さ、太さ、両端の形などを変更すれば結構形が変ります。
Loadingの原型は、wonderfl、ActionScript3 Thread library のサンプル「Happy Eclipse!!」のものを改造しています。


実際に参考にした transformPoint() のコード

【参考】jsdo.it 記事: Rotating Point objects with Matrix2D.transformPoint() method of EaselJS 0.7.0

この「デモ」JSは上記参考記載の「実際に参考にした transformPoint() のコード」サンプルと同じ形式の処理になっています。(細部は多少違いはありますが...)


[説明図]

 

設定変更で色々と変化を付ける

何時も同じでは詰まりませんので、設定変更で色々と変化を付けられる様にして見ました。

1. 大きさなどを変える。(描画ライン数も変更可能)
2. 回転を逆にする。
3. 透明度を与える。
4. 色の変更。

図の様に色々と変化できますので、1つ原型を作れば利用価値が有ります。


Point保存配列

ここでは、ライン描写でLoadingを作っていますので、ラインの 始点、終点 のPoint保存のため配列を2個使用しています。当然、matrixも2個用意します。(1個でも可能ですが...)


var loadingpoints1=[];
var loadingpoints2=[];
var matrix1=new createjs.Matrix2D();
var matrix2=new createjs.Matrix2D();

Matrix2Dオブジェクトを初期化

identity()メソッドが使用されているのは以下の理由だそうです。(HTML5テクニカルノート記事より引用)

Matrix2DオブジェクトをMatrix2D.identity()メソッドにより初期化したうえで、Matrix2D.rotate()メソッドで回します。
Matrix2Dオブジェクトを初期化して使い回す方がガベージコレクションなどの負荷が減ります。


matrix1.identity().rotate(angle);
matrix2.identity().rotate(angle);

上記は引用です。


大きさなどを変える

大きさなどを変更出来ます。innerR outerR の差分がラインの長さになります。
両端の形状をsetStrokeStyle()、round butt で指定できます。ラインの太さもここで設定する。(round 指定で旨く調整すれば 円 に近い形も得られる、square も設定可能です、図参照)
位置をずらしてラインを斜めにする。innerR の角度を少々変えれば斜めになります。(マイナス値なら逆方向になる)


//描画データ
numNeedles=12
innerR=15
outerR=10

------------------------------------------------------------------
lineCapプロパティは端点のスタイル butt round square
第一引数は線の太さです

//graphicのスタイル
setStrokeStyle(2,"round")
setStrokeStyle(5,"butt")

square は余り使用しないでしょう
setStrokeStyle(5,"square")

------------------------------------------------------------------

位置をずらす

//ライン描画位置
nAngle=Math.PI*2/numNeedles;
for (var i=0; i < numNeedles; i++){
	cAngle +=nAngle;
	cx=Math.cos(cAngle+0.2)*innerR;
	cy=Math.sin(cAngle+0.2)*innerR;
	//位置保存
	loadingpoints1.push(new createjs.Point(cx,cy));
	cx=Math.cos(cAngle)*outerR;
	cy=Math.sin(cAngle)*outerR;
	//位置保存
	loadingpoints2.push(new createjs.Point(cx,cy));
}

回転を逆にする

Ticker設定で、右左に回転可能です。数値を変えれば回転の速度が変化します。

適当な値を入れれば回転しますので調整。記載設定しなければ初期値が使用されます。


var angle=Math.PI/12;

//Ticker
function loading_rotate(event) {

	//回転速度方向
	//angle=1/5;//右
	angle=-1/5;//左

	略す
}

透明度を与える

透明度を与えるには rgba 形式で色情報及び透明度を指定します。(黒色、透明度無し)

段階的に透明度を与えていますので、ループの中で変更します。(一律の場合はループ外で設定可能)


graphics.setStrokeStyle(2,"round").beginStroke("rgba(0,0,0,1)")

CreateJSでは、getRGB()で r g b alpha を指定します。(赤色、透明度50%)


createjs.Graphics.getRGB(255,0,0,0.5)

記載例
graphics.setStrokeStyle(2,"round").beginStroke(createjs.Graphics.getRGB(255,0,0,0.5));

色変更の場合に、RGB形式で記載するのは結構面倒です...


色の変更

rgbでその都度「色の変更」は煩わしいので、関数で16進カラーを変換できるようにしました。rgbのみ変換しますので透明度は別途指定します。透明度の方向も変えることが可能です。
#付きの16進カラーを引数に、rgb値が、rgbArr[0-2]、で帰り取得出来ますのでそれを使用します。

段階的に透明度を与えていますので、ループの中で変更します。計算式は色々とあると思います。
(一律の場合はループ外で設定可能、状況に応じてかえて行く)


「デモ」では描画ライン毎に、透明度など変化させるため、beginStroke()をループの中で実行しています。


//Loadingの色 かならず #xxxxxx の16進カラー形式で記入のこと
var loadingbackcolor="#FF1493";

//16進カラーをrgbの形式に変換、面倒
var rgbArr=toRgb(loadingbackcolor);

//ライン描画
for (var i=0; i < count; i++){

	//透明度をライン毎に変更
	//alpha_v=1/(count-i);
	alpha_v -=0.05;

	//rgbaのデータ設定alpha
	var alphaback=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],alpha_v);
	//rgbaのデータ設定を適用
	graphics.beginStroke(alphaback);

	略す
}

----------------------------------------------------------------------------

//変換は配列で返すナントカ使える
function toRgb(bc) {
	bc=bc.replace("#","");
	var rgbArr=[];
	rgbArr[0]=parseInt(bc.slice(0,2),16);
	rgbArr[1]=parseInt(bc.slice(2,4),16);
	rgbArr[2]=parseInt(bc.slice(4,6),16);
	return rgbArr;
}

例、parseInt("FF",16) は16進を10進に変換します、255に成る。


● 透明度を変えない場合


alphaを 1 にする

//rgbaのデータ設定
var alphaback=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],1);

----------------------------------------------------------------------------
又は16進カラーをいれる

//rgbaのデータ設定を適用
graphics.beginStroke(alphaback);
を
graphics.beginStroke(loadingbackcolor);
直接なら
graphics.beginStroke("#FF1493");

rgba形式でないなら、透明度は変化しない。


● 虹色に染める場合は、次ぎを有効にします。rgbaのデータ設定は無効にする。


//虹色計算alpha無し
var alphaback=createjs.Graphics.getHSL(i/count*360,100,50);

よって下記設定は無効にする
//rgbaのデータ設定alpha
//var alphaback=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],alpha_v);

ラインで描写していますので、setStrokeStyle() beginStroke() で変更している事に注意下さい。


実際の組み込み

「デモ」では表示回転させているだけですので、実際に組み込む場合は其れなりに工夫ください。マシン環境が悪い場合に、負荷が大きいと回転は落ちます。


Loading原型

当方のほかの「デモ」で使用しているLoadingです。通常はこれを、rotation で回転させています。
これを基本に改造して利用しました。(そっくりそのままです)


function loadingIndicator(){

	//graphicのスタイル
	var graphics=new createjs.Graphics();
	graphics.setStrokeStyle(2,"round").beginStroke("#CCCCCC");//round

	//描画データ
	var cx,cy,
	numNeedles=12,
	innerR=10,
	outerR=5,
	cAngle= -Math.PI/2,
	nAngle;

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){
		cAngle +=nAngle;
		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.moveTo(cx,cy);
		cx=Math.cos(cAngle)*outerR;
		cy=Math.sin(cAngle)*outerR;
		graphics.lineTo(cx,cy);
	}
	//Shapeに格納
	var s=new createjs.Shape(graphics);
	return s
}


一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]