POPSブログ

CreateJS コンテナ継承クラスのLoading表示2(easeljs-0.8)

346

  Category:  javascript2015/03/20 pops 

easeljs-0.8でMatrix2Dで円周上に配置したインスタンスをMatrixで回転させますが、rotate()もMatrixを使用しコンテナ継承クラスのLoading表示を作ります。arc形式(弧状)の図形を追加しました。
リスナーの形式を少しかえてみましたが、結果的には相違有りませんでした。回転形式の、数多くのLoading表示が可能です。

 

CreateJS コンテナ継承クラスのLoading表示2(easeljs-0.8)テスト


以前のMatrix2Dで円周上に配置したインスタンスをMatrixで回転させるJSを、Loading表示に応用したものですが、easeljs-0.8での新しい形式のコンテナ継承クラスで作ります。
前ページのものと基本的に違いは有りません。クラス内にメソッドを追加すれば、クラス外からの制御などが可能のようですので少し考慮してみます。


zu

 

DEMO (easeljs-0.8)


CreateJS コンテナ継承クラスのLoading表示2(easeljs-0.8)テストデモ、(createJS128.js)

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


demo


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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


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

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


HTML (HTML5)


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

JS

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

このデモ用JSは単に中央で回転させているだけです。



//日本語
//createJS128.js
//Matrix2D、Loadingクラスデモ
//easeljs-0.8用
//インスタンス角度はMatrixで処理

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

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

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

var stage;
var viewtext;
var partsContainer;

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

//背景切り替え
var backchg_no=0;
var backcolors=["#FFFFFF","#708090","#D2B4BC","#EEEEEE","#888888","#555555","#000000"];
var backrect;

function init() {

	stage=new createjs.Stage("mainCanvas");
	//MouseOver設定/必要に応じ設定
	stage.enableMouseOver(20);

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

	//クリックアクション
	backrect.addEventListener("click",backchg);

	//インスタンス配置
	//タイプrect.circle.line.arc、分割数、半径、幅、高さ、正転逆転、速度、角度、虹色true、色、色2
	partsContainer=new LoadingClass("arc",12,15,2,14,1,5,0,true,"#EEEEEE","#222222");
	partsContainer.x=canvasWidth/2;
	partsContainer.y=canvasHeight/2;
	stage.addChild(partsContainer);
	//停止非表示
	//partsContainer.stopNo=0;
	//partsContainer.visible=false;

	//簡易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("Matrix-rotation-Loading");

	//Ticker-Listener
	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener("tick",tick);

}

//背景色変更
function backchg() {
	backchg_no ++;
	if (backchg_no > backcolors.length-1) {backchg_no=0;}
	var color=backcolors[backchg_no];
	backrect.graphics.beginFill(color).drawRect(0,0,canvasWidth,canvasHeight);
}

function tick(){
	stage.update();
}

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

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

//タイプ、分割数、半径、幅、高さ、正転逆転、速度、角度、虹色、色、色2 指定色	
// LoadingClass("rect",12,50,20,20,1,5,90,true,"#FF0000","#333333");
(function(){

//shapetype,split,radius,width,height,rotateflag,angle,partsAngle,rainbowColor,color,color2
function LoadingClass(_shapetype,_split,_radius,_width,_height,_rotateflag,_angle,_partsAngle,_rainbowColor,_color,_color2) {

	this.Container_constructor();

	this.shapetype=_shapetype;
	this.backc=_color;
	this.backc2=_color2;
	this.count=_split;
	this.radius=_radius;
	this.parts_w=_width;
	this.parts_h=_height;
	this.rotateflag=_rotateflag;
	this.angle=_angle;
	this.partsAngle=_partsAngle;
	this.rainbowColor=_rainbowColor;

	this.stopNo=1;//停止用
	this.alphaflag=false;//透明度変化
	this.back=false;//背景
	this.arc_w=1;//1-3、arcの長さを倍にする、1

	this.plusAngle=0;//ラジアン

	//SET-UP
	this.setup();
}

var p=createjs.extend(LoadingClass,createjs.Container);
var parts_chip=[];
var matrix=new createjs.Matrix2D();
var backbase;//back

p.setup=function(){

	//Backbase
	if(this.back){
		backbase=new createjs.Shape();
		var w=(this.radius*2+this.parts_w)*1.5;
		//角丸バック
		backbase.graphics.beginRadialGradientFill([this.backc,"#000000"],[0,1],0,0,this.radius*3,0,this.radius/2,0).drawRoundRect(-w/2,-w/2,w,w,5);
		this.addChild(backbase);
	}

	var alpha=1/this.count;//透明度変化用
	var arc_angle=Math.PI*2/this.count;

	//パーツ作成
	for (var i=0; i < this.count; i++){

		if (this.rainbowColor) {
			this.backc=createjs.Graphics.getHSL(i/this.count*360,100,50);//直接
			this.backc2=createjs.Graphics.getHSL(i/this.count*360,80,10);//直接
		}

		//2色交互に着色、Lineの場合有効、未使用
		//if (i%2!=0) {this.backc="#CCCCCC";}
		//else{this.backc="#FF0000";}

		//図形用インスタンス配置コンテナ
		//内部図形/角丸は無し
		var s=new createjs.Shape();
		s.id=i;
		if(this.shapetype=='rect'){
			//Rect/角
			s.graphics.beginLinearGradientFill([this.backc,this.backc2],[0,0.5],0,0,0,this.parts_h).drawRect(-this.parts_w/2,-this.parts_h/2,this.parts_w,this.parts_h);
		}
		if(this.shapetype=='circle'){
			//Ellipse/円も可能
			s.graphics.beginLinearGradientFill([this.backc,this.backc2],[0,0.5],0,0,0,this.parts_h).drawEllipse(-this.parts_w/2,-this.parts_h/2,this.parts_w,this.parts_h);
		}
		if(this.shapetype=='line'){
			//Line/色はbackcのみ使用グラデはなし
			s.graphics.ss(this.parts_w,"round").s(this.backc).moveTo(0,-this.parts_h/2);
			s.graphics.lineTo(0,this.parts_h/2);
		}
		if(this.shapetype=='arc'){
			//Arc
			s.graphics.ss(this.parts_w,"butt").s(this.backc);
			s.graphics.arc(-this.radius,0,this.radius,0,arc_angle*this.arc_w);//長さ可変
		}

		//alpha
		if(this.alphaflag){s.alpha=alpha*(i+1);}

		parts_chip[i]=s;
		this.addChild(parts_chip[i]);
	}

	//ON-Listener
	this.on("tick",this.rotate_item);

};

//Tick-Listener
p.rotate_item=function(event){

	//加算/停止処理
	this.plusAngle +=(this.angle*createjs.Matrix2D.DEG_TO_RAD*this.stopNo);

	//描画データ
	var cx,cy;
	var cAngle=0;//-Math.PI/2-(Math.PI*2/this.count);
	var nAngle=0;

	//描画位置、360度で配置
	nAngle=Math.PI*2/this.count;
	var chipflag=1;
	var parts_angle=0;

	for (var i=0; i < this.count; i++){
		//回転
		cAngle +=nAngle;
		cx=Math.cos(cAngle+this.plusAngle)*this.radius;
		cy=Math.sin(cAngle+this.plusAngle)*this.radius;
		//matrix
		matrix.identity();
		//位置をずらす
		matrix.translate(cx,cy);
		//配置角度取得
		parts_angle=Math.atan2(cy,cx);
		matrix.rotate(this.rotateflag*this.rotateflag*parts_angle*180/Math.PI+this.partsAngle);
		//実行
		matrix.decompose(parts_chip[i]);
	}

};

/*
p.start=function(){
	this.setup();
}
p.clear=function(){
	this.removeAllChildren();
};
p.typechg=function(type,angle,rainbow,c,c2){
	this.removeAllEventListeners();
	this.shapetype=type || "rect";
	this.angle=angle || 3;
	this.rainbowColor=rainbow;
	this.backc=c;
	this.backc2=c2;
	this.setup();
};
p.remove=function(){
	//this.removeAllEventListeners();//リスナー削除できる
	this.visible=false;//非表示出来る
};
*/

window.LoadingClass=createjs.promote(LoadingClass,"Container");

}());

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

//START
window.onload=function() {
	init();
}

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


CSS

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



/*日本語 createJS128.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表示を作る

 

1. 従来形式よりも、継承クラスの作り方が簡単になりました。
2. ここではLOADINGに応用してみます。
3. 円周配置インスタンス回転、放射状のタイプです。
4. 下図の様に組み合わせ次第では数十種類を生成可能です。
5. 継承クラスの型は「EASELJS INHERITANCE」を参照ください。
(EaselJS-0.8.0/tutorials/Inheritance/index.html)
6. arc形式(弧状)の図形を追加しました。
7. メソッドを作りクラス外からアクセスすると便利です。


zu

 

書式

LoadingClassの引数は下記の様に成ります。



//タイプrect.circle.line、分割数、半径、幅、高さ、正転逆転、速度、角度、虹色true、色、色2
ローデングインスタンス=new LoadingClass("rect",12,15,4,14,1,5,75,true,"#EEEEEE","#222222");

1. タイプ、生成するデザインです、rect,circle,line,arcの4種類より選定する。
2. 分割数、 円周配置インスタンス(図形)の数です。8-12位。
3. 半径、生成するの半径。実際はそれより大きくなる。15-30位。
4. 幅、円周配置図形の幅。随意。
5. 高さ、円周配置図形の高さ。随意。
6. 正転逆転、右回転 1、左回転 -1、0の場合回転しない。
7. 速度、回転の速度、度数。1-5位。
8. 角度、円周配置図形の角度。15-90度、マイナス値は反対角度
9. 虹色、虹色にする true、指定色を使用 false、
10. 色、指定色、グラデ装飾のため2色指定する(rect,circle)。
但し、lineはグラデに成らないので、1色のみ使用します。


arc形式の追加

12時方向にしての説明ですが、実際には外周配置パーツの中心はY方向が半径分ずれて(arc以外はパーツの中心は外周の各ポイントで 0 0)、外周に配置されますので値の設定次第では意図しない形状になる場合があります。


zuzu

arc形式(弧状)の図形を追加しましたが、他の形状と少し作りが違いますので、伴い変数をも増やしています。
他のものと比較して図形の原点が違いますので、角度を与えた場合の形状に少しくせがあります。
設定は上図のように成ります。


1. 弧の長さ調整(arc_w)、弧に隙を与えたり長さの調節。0.5-3
(弧の長さは角度で、360度/分割数の値になるが、比率で調節可能です)
2. 角度がマイナス値の場合は弧が外側に描画され全体が大きくなるので注意ください。
(必要に応じ、径、角度、弧の長さで調整します)
3. ライン幅は図形の幅を利用します。
4. このデモではarc形式(弧状)表示、弧の長さ調整 1、角度 0です。


背景の表示

Loadingの後ろに配置する背景です。必要ならば設定しますが単に背景を表示するのみの機能ですから、本格的な使用の際はオリジナルの設計に変更した方が良いかも知れません。


this.back=true;//背景

インスタンスを生成する

コンテナ継承クラスですから、次の様にしてステージにaddします。
インスタンス名は随意です(グローバルの方があとで制御し易い)。
通常はステージ中央に配置する場合が多い。



ローデングインスタンス=new LoadingClass("rect",.........);
stage.addChild(ローデングインスタンス);

----------------------------------------------------------
DEMOでの記載例

//インスタンス配置
//タイプrect.circle.line、分割数、半径、幅、高さ、正転逆転、速度、角度、虹色true、色、色2
partsContainer=new LoadingClass("rect",12,15,4,14,1,5,75,true,"#EEEEEE","#222222");
partsContainer.x=canvasWidth/2;
partsContainer.y=canvasHeight/2;
stage.addChild(partsContainer);

表示、非表示の制御

.visible=true、または .visible=false、で表示の切り替えが出来ます。
イベントリスナーはクラスの中に有りますので、設定の必要はありませんが、原則、リスナーの停止は出来ません。
(一括削除は可能ですから、必要ならこの後の「リスナーの削除」を参照ください)

アップデートをしませんので、別途にstage.update()のTicker用Listenerが必要です。通常は以下の様になる。



//Ticker-Listener
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",tick);

function tick(){
	stage.update();
}

回転を停止する

次の様にすれば、ここでは必要性はまったく有りませんが、クラス外から回転を停止できます。その他の機能などは自己責任で改造ください。



ローデングインスタンス.stopNo=0;

partsContainer.stopNo=0;

透明度をかえる

原則、透明度は変えませんが、円周配置図形の透明度を順次変えたい場合は次の様にすれば設定なります。
グラデの場合は綺麗ではないので、必要があれば、タイプlineの場合に設定ください。



this.alphaflag=true;//透明度変化

var alpha=1/this.count;//透明度変化用

//alpha
if(this.alphaflag){s.alpha=alpha*(i+1);}

色変化を別にする

次の様に修正すれば、2色交互に着色なります。例は白黒交互。



//2色交互に着色、Lineの場合有効、未使用
if (i%2!=0) {this.backc="#000000";}
else{this.backc="#FFFFFF";}

リスナー形式の変更

コンテナ継承クラスの中のリスナーは次の様な形式になっていますので、stage.update()を実行してはいけません。


以前の形式はListener削除が難しい。


	//TickerListener
	this.on("tick",function(event){
		//
	});

今回の形式。
リスナー形式は、this.on("tick",xxxxxxxx)以外の設定は出来ません。これでもリスナー停止 off() は機能しません。
リスナーの削除は、removeAllEventListeners()でのみ可能です。下記で別途説明。


//ON-Listener
this.on("tick",this.rotate_item);


//注意、機能しない
this.off("tick",this.rotate_item);


-------------------------------------------------------
//Tick-Listener
p.rotate_item=function(event){

	//加算/停止処理
	this.plusAngle +=(this.angle*createjs.Matrix2D.DEG_TO_RAD*this.stopNo);

	//描画データ
	var cx,cy;
	var cAngle=0;//-Math.PI/2-(Math.PI*2/this.count);
	var nAngle=0;

	//描画位置、360度で配置
	nAngle=Math.PI*2/this.count;
	var chipflag=1;
	var parts_angle=0;

	for (var i=0; i < this.count; i++){
		//回転
		cAngle +=nAngle;
		cx=Math.cos(cAngle+this.plusAngle)*this.radius;
		cy=Math.sin(cAngle+this.plusAngle)*this.radius;
		//matrix
		matrix.identity();
		//位置をずらす
		matrix.translate(cx,cy);
		//配置角度取得
		parts_angle=Math.atan2(cy,cx);
		matrix.rotate(parts_angle*180/Math.PI+this.partsAngle);
		//実行
		matrix.decompose(parts_chip[i]);
	}

};

リスナーの削除

一般的には、クラスでつくった、partsContainerをステージより削除すれば中のリスナーも削除なる仕組みです。(実際にリスナーなどをも削除されているかの確認はしたことは無い)

場合によっては個別にクラス外から「リスナーの削除」処理などが必要な場合もあるでしょう。
「リスナーの削除」などはメソッドを作りクラス外からアクセスすると便利です。上記デモの例では。


//削除等
partsContainer.remove();

p.remove=function(){
	this.removeAllEventListeners();//リスナー削除できる
	this.visible=false;//非表示出来る
};

その他の制御

必要があればメソッドを作りクラス外からアクセスすれば良いが、これらは必要に応じて作ります。以前より簡単で作り易く且つ明瞭に成っています。
下記は単なる例であり全てが必要では有りませんが、ProgressBarと一体に作る場合には制御が必要になります。
次回にProgressBarを組み込んだものを実際に作ってみます。


現在のスタートをオフにする
//SET-UP
//this.setup();

こちらでスタートさせる
//start
partsContainer.start();

p.start=function(){
	this.setup();
}

-----------------------------------------------------
実際はありえませんが

インスタンスを削除して別タイプを作り実行
partsContainer.typechg("line",3,false,"#FFFFFF","#222222");

途中でタイプをかえる
p.typechg=function(type,angle,rainbow,c,c2){
	this.removeAllChildren();
	this.removeAllEventListeners();
	this.shapetype=type || "rect";
	this.angle=angle || 3;
	this.rainbowColor=rainbow;
	this.backc=c;
	this.backc2=c2;
	this.setup();
};

Matrixでの回転の利点

インスタンスを回転させるには、rotationでも可能ですから作るにはその方が簡単ですが、rotationと比較して「Matrixでの回転」の方が回転が滑らかになります。


継承クラスファイルの読み込み

JSに付属させるか、または外部JSファイルとして保存しておき、随時読み込みます。

色々な図形をまとめましたのでJSが長くなりますので好かれません。外部JSファイルとして保存すれば「JSが長い」事など忘れてしまいますから、人間って不思議なものです。



適当な名前で保存して読み込む

<script type="text/javascript" src="js/kuru-kuru-maware.js"></script>

改造などは自由です

適当に使い易いように、自己責任で改造ください。
好みの図形だけに絞ると、JSも短くなります。


外周配置のインスタンスは自由に改造出来ますので、好みの形にして下さい。
また、不要な部分は削除も可能です。詳細はJSを参照ください。



easeljs-0.8用の記事です。全てMatrixで処理していますがマチガイ易いので注意。

【参照】当方の記事: CreateJS Matrixで円周配置の図形Shapeなどを回転(easeljs-0.8)



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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]