POPSブログ

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

345

  Category:  javascript2015/03/14 pops 

easeljs-0.8でMatrix2Dで円周上に配置したインスタンスをMatrixで回転させますが、rotate()もMatrixを使用しコンテナ継承クラスのLoading表示を作ります。
回転形式の、数多くのLoading表示が可能です。

 

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


以前のMatrix2Dで円周上に配置したインスタンスをMatrixで回転させるJSを、Loading表示に応用したものですが、easeljs-0.8での新しい形式のコンテナ継承クラスで作ります。


zu

 

DEMO (easeljs-0.8)


CreateJS コンテナ継承クラスのLoading表示(easeljs-0.8)テストデモ、(createJS127.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

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

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



//日本語
//createJS127.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、分割数、半径、幅、高さ、正転逆転、速度、角度、虹色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);
	//停止非表示
	//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.angle *=this.rotateflag;
	this.plusAngle=0;//ラジアン

	//SET-UP
	this.setup();

}
var p=createjs.extend(LoadingClass,createjs.Container);

p.setup=function(){

	var parts_chip=[];
	var matrix=new createjs.Matrix2D();
	var alpha=1/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="#000000";}
		//else{this.backc="#FFFFFF";}

		//図形用インスタンス配置コンテナ
		//内部図形/角丸は無し
		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);
		}

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

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

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

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

		//描画データ
		var cx,cy;
		var cAngle=0;
		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]);
		}
	});
};

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

}());

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

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

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


CSS

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



/*日本語 createJS127.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)


zu

 

書式

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



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

1. タイプ、生成するデザインです、rect,circle,line,の3種類より選定する。
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色のみ使用します。


インスタンスを生成する

コンテナ継承クラスですから、次の様にしてステージに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";}

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

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


改造などは自由です

適当に使い易いように、自己責任で改造ください。


ご注意

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



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

		略す

		for (var i=0; i < this.count; i++){

			略す

		}
		//ダメです、設定してはいけません
		stage.update();

	});

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



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

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



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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]