POPSブログ

CreateJS Loading 円周上にgraphicsラインを描画し、Shapeを回転させる簡易形です

269

  Category:  javascript2014/01/03 pops 

画像読み込み時に表示するLoading、コンテナの円周上にgraphicsラインを描画(配置)し、イベント毎に回転する形式で最も単純なものですが、回転が判り易いように段階的に透明度を付けました。単純ですが、簡単に設置できるのが強みです。
easeljs-0.7 でのテストです。

 

CreateJS Loading Shape回転簡易形、テスト5


「Loading」として使用するならば、簡単な作りのほうが便利と思います。これは当方で今後使用するため作りました。
原型は、以前のページで使用している「Loading」を少し改造しただけです。

下記キャプチャーの様に多少のバリエーションが有りますので、これ一つで千年位十分です。


 

DEMO


CreateJS Loading Shapeインスタンス回転簡易形、テスト5、(createJS054.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

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


//日本語
//createJS054.js
//Loadingデモ5 簡易Line
//easeljs-0.7用

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

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

//回転速度 デグリー値5-50
var angle=15;//DEG

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

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

var stage;
var viewtext;
var loadingShape;

//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();

	//Loadingインスタンス配置2透明度
	loadingShape=loadingIndicator2(1);//右=1 左=-1
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;
	//tickListenerを設定
	createjs.Ticker.setFPS(20);
	loadingShape.tick=function (){
		loadingShape.rotation +=angle;
		stage.update();
	};
	//loading addEventListenerを設定
	createjs.Ticker.addEventListener('tick',loadingShape.tick);
	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!");

	//未使用
	//createjs.Ticker.addEventListener('tick',tick);

}

//Main-Ticker 未使用
function tick() {
	stage.update();
}

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

//簡単なLOADING
function loadingIndicator2 (angle_v) {

	var loadingbackcolor="#CCCCCC";
	//16進カラーをrgbの形式に変換
	var rgbArr=toRgb(loadingbackcolor);
	//graphicのスタイル
	var graphics=new createjs.Graphics();
	graphics.setStrokeStyle(2,"round");//round

	//描画データ
	var rotateflag=1;
	if (angle_v < 0){rotateflag=-1};//逆転

	var alpha_v=1;//透明度
	var alphaback;

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

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){

		//回転補正
		if (rotateflag != 1) {cAngle +=nAngle;}
		if (rotateflag == 1) {cAngle -=nAngle;}
		//透明度を描画毎に変更
		if (i > 0) {alpha_v -=0.05;}

		alphaback=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],alpha_v);
		//alphaback=createjs.Graphics.getRGB(204,204,204,alpha_v);

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

		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.beginStroke(alphaback).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;
}

//変換は配列で返す
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;
}
//--------------------------------------------------------------

init();

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


CSS

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


/*日本語 createJS054.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;
}

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


簡単な説明


[説明図]

 

Shape()インスタンスを作り外周に直接graphicsで配置して並べている簡単な作りで。Shape()インスタンスを回転する仕組みです。不透明な場合、回転速度によっては静止状態になるが、多色、段階的透明な場合は回転が判る。
graphicsに透明度を付けるのに、getRGB()で処理している違いが有るだけです。


1. 大きさ、図形の配置角度、回転速度など変更可能です。
2. 図形の形は、ラインのみですが少々設定の変更で形を変えることが出来ます。
3. 透明度を段階的に変える事が可能です。但し1色の場合のみ。
4. 左右回転は rotation の数値を変えてください。
5. マシン、ページに負荷がかかると回転速度が落ちたりします。


大きさなどを変える

大きさなどを変更出来ます。innerR outerR は描画位置の半径です。差分がラインの長さになります。
図形の描画は、lineTo()の設定でラインを描いて行っています。両端の形状など多少変更が可能です。
(round butt square)、初期値round。


ラインの太さ両端の形状の種類
graphics.setStrokeStyle(2,"round");//round butt square

大きさ
var numNeedles=12;
var innerR=15;
var outerR=10;

回転速度

rotation値(デグリー値)を記載します。マイナス値は逆転します。Loading図形の左右の反転を行なってください。


var angle=15;

loadingShape.tick=function (){
	loadingShape.rotation +=angle;
	stage.update();
};

//直接でも可能
loadingShape.rotation +=25;

左右の反転

左右回転に応じて図形の「左右反転」が可能です。初期は「右回転」用になっています。マイナス値の引数を与えると「左回転」用に向きを変えます。


//Loadingインスタンス配置2透明度
loadingShape=loadingIndicator2(1);//右=1 左=-1

引数はマイナスのみ判定、数値は使用していません

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

回転速度がグローバルな場合

//回転速度 デグリー値
var angle=-15;//DEG

//Loadingインスタンス配置
loadingShape=loadingIndicator2(angle);

この場合は左に反転する

引数が邪魔なら無しに改造下さい、どうしても必要では有りません。


透明度を与えてラインの描写

graphics.beginStroke()で透明度を与える場合はrgba形式で指定します。直接16進カラーでは透明度は指定できません。指定には、CreateJSのgetRGB()を使用します。
親であるShape()インスタンスに.alphaで透明度は変えることは出来ますが、ここでは外周のgraphics部材個別に透明度を与えます。


rgbaの書式例、(黒 透明度1)


ライン
graphics.beginStroke("rgba(0,0,0,1)")....

FILL
graphics.beginFill("rgba(0,0,0,1)")....

上記の記載は扱い難いので、CreateJSでは下記の様になります。

RGB値は「画像ソフト」があれば簡単に調べられますが、面倒です。次ぎの項でtoRgb()関数で変換させています。


//RGB値、透明度を設定
alphaback=createjs.Graphics.getRGB(204,204,204,alpha_v);
//描画
graphics.beginStroke(alphaback).moveTo(cx,cy);

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

//下記でも可能
graphics.beginStroke(createjs.Graphics.getRGB(204,204,204,alpha_v)).moveTo(cx,cy);

---------------------------------------------------------------------------
var loadingbackcolor="#CCCCCC";
16進カラーでは透明度は付けられない
graphics.beginStroke(loadingbackcolor).moveTo(cx,cy);

RGB値の計算

一般的に16進カラーを扱っていると、RGB値で入力するのは大変面倒です。変換させるようにしました。
toRgb()関数を作り、RGB値を「配列」で返しますのでその値を使用します。16進カラーに透明度は有りませんので別途計算して与えます。


var loadingbackcolor="#CCCCCC";
//16進カラーをrgbの形式に変換
var rgbArr=toRgb(loadingbackcolor);

alphaback=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],alpha_v);

loadingbackcolorの変更だけですから楽です。


虹色にする

下記のalphabackを有効にして、他は無効にします。getHSL()を使えば簡単。


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

描画を半分にする

標準では分割対象は全周です。半周にすれば半月状に描画することになります。次ぎは角度の分割を半分にする。


全周
//ライン描画
nAngle=Math.PI*2/numNeedles;

半周
nAngle=Math.PI*2/numNeedles/2;

透明度の変化

透明度を低くすれば、環境によっては、見えない場合も有りますので余り低くは設定していません。分割数、色、背景色などを考慮しての調整は可能です。(下記は、一応20分割まで使用できる)


//透明度を描画毎に変更
if (i > 0) {alpha_v -=0.05;}

ライン描画を斜めにする

最後の角度の部分を修正すれば、ライン描画を斜めにする事は可能です。


cx=Math.cos(cAngle)*innerR;
cy=Math.sin(cAngle)*innerR;
graphics.beginStroke(alphaback).moveTo(cx,cy);
cx=Math.cos(cAngle*1.02)*outerR;
cy=Math.sin(cAngle*1.02)*outerR;
graphics.lineTo(cx,cy);

不必要な部分を削除してオリジナル化

多少は、多様性を考慮した記述をしましたが、不必要な部分を削除してオリジナル化は自由です。


実際の組み込み

コンテナloadingShapeにEventListenerを設定して、回転させているだけです。loadingShape設定直下に書くか、分離するかの違いです。以下回転動作は同等です。


表示、非表示の切り替えを行います。使用しない時はEventListenerは削除します。


表示、EventListener設定
loadingShape.visible=true;
createjs.Ticker.addEventListener('tick',loadingShape.tick);

非表示、EventListener削除
loadingShape.visible=false;
createjs.Ticker.removeEventListener('tick',loadingShape.tick);


 

16進カラーをrgb形式に変換して使用する場合

16進カラー、loadingbackcolorをrgb形式に変換して使用しますので色の変更が簡単になります。
変換のための、toRgb()関数が必要です。


//簡単なLOADING
function loadingIndicator2 (angle_v) {

	var loadingbackcolor="#CCCCCC";
	//16進カラーをrgbの形式に変換
	var rgbArr=toRgb(loadingbackcolor);
	//graphicのスタイル
	var graphics=new createjs.Graphics();
	graphics.setStrokeStyle(2,"round");//round

	//描画データ
	var rotateflag=1;
	if (angle_v < 0){rotateflag=-1};//逆転

	var alpha_v=1;//透明度
	var alphaback;

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

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){

		//回転補正
		if (rotateflag != 1) {cAngle +=nAngle;}
		if (rotateflag == 1) {cAngle -=nAngle;}
		//透明度を描画毎に変更
		if (i > 0) {alpha_v -=0.05;}

		alphaback=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],alpha_v);
		//alphaback=createjs.Graphics.getRGB(204,204,204,alpha_v);

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

		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.beginStroke(alphaback).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;
}

//変換は配列で返す
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;
}

rgbaを手書きで入力(記述)する場合

使用する色のrgbの値を調べて手書きで入力します。少し簡素化できます。


#CCCCCCの RGB値を記入、透明度は自動

getRGB(204,204,204,alpha_v);


//簡単なLOADING
function loadingIndicator2 (angle_v) {

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

	//描画データ
	var rotateflag=1;
	if (angle_v < 0){rotateflag=-1};//逆転

	var alpha_v=1;//透明度
	var alphaback;

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

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){

		//回転補正
		if (rotateflag != 1) {cAngle +=nAngle;}
		if (rotateflag == 1) {cAngle -=nAngle;}
		//透明度を描画毎に変更
		if (i > 0) {alpha_v -=0.05;}

		alphaback=createjs.Graphics.getRGB(204,204,204,alpha_v);

		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.beginStroke(alphaback).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;
}



 

原型

以前当方で使用していたLoadingです。1色不透明なために速度によっては回転が良く見えない欠点がでます。


//簡単なLOADING
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など修正する場合がありますので了承下さい。

CreateJSは結構「仕様」が変わりますので特に注意が必要です。


以上、簡単なLoadingです。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]