POPSブログ

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

347

  Category:  javascript2015/03/21 pops 

コンテナ継承クラスのLoading表示を作りますがMatrixを利用せずに全体をrotationで回転させます。Matrix処理が面倒で判り難いなどの理由があればこちらが簡単に作れます。回転形式の、数多くのLoading表示が可能です。

 

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


前ページのものと基本的に違いは有りません。クラス内にメソッドを追加すれば、クラス外からの制御などが可能です。


zu

 

DEMO (easeljs-0.8)


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

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

このデモ用JSは単に中央で回転させているだけです。(通常のrotationで回転、Matrix処理では有りません)



//日本語
//createJS129.js
//rotation、Loadingクラスデモ
//easeljs-0.8用
//インスタンス回転はrotationで処理

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

//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 LoadingRotationClass("circle",12,15,2,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("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 指定色	
// LoadingRotationClass("rect",12,50,20,20,1,5,90,true,"#FF0000","#333333");
(function(){

//shapetype,split,radius,width,height,rotateflag,angle,partsAngle,rainbowColor,color,color2
function LoadingRotationClass(_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;//ラジアン
	//補正、0では困る
	if(this.rotateflag == 0){this.rotateflag=1;}

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

var p=createjs.extend(LoadingRotationClass,createjs.Container);
var parts_chip=[];
var backbase;//back
var ring=new createjs.Container();//loadingホルダー

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);
		backbase.shadow=shadow;//陰影
		this.addChild(backbase);
	}

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

	//描画データ
	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++){

		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);}

		//外周配置/正逆補正
		cAngle +=nAngle*this.rotateflag;
		//XY
		cx=Math.cos(cAngle+this.plusAngle)*this.radius;
		cy=Math.sin(cAngle+this.plusAngle)*this.radius;

		//配置角度取得角度修正
		parts_angle=Math.atan2(cy,cx);
		s.rotation=(this.rotateflag*this.rotateflag*parts_angle*180/Math.PI+this.partsAngle);
		//外周配置実行
		s.x=cx;
		s.y=cy;
		//配列に保存
		parts_chip[i]=s;
		//パーツを纏める
		ring.addChild(parts_chip[i]);

	}

	//コンテナクラスにadd
	this.addChild(ring);
	//ON-Listener
	this.on("tick",this.rotate_item);

};

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

	//rotation加算/停止処理
	ring.rotation +=this.angle*this.stopNo;

};

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

}());

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

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

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


CSS

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



/*日本語 createJS129.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の引数は下記の様に成ります。前ページMatrixの場合と全て同じ。
回転用のリスナー処理が簡単になりますが、設定説明はまったく同じになります。



//タイプ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は1に補正されます。
7. 速度、回転の速度、度数。5-10位。
8. 角度、円周配置図形の角度。15-90度、マイナス値は反対角度
9. 虹色、虹色にする true、指定色を使用 false、
10. 色、指定色、グラデ装飾のため2色指定する(rect,circle)。
但し、line arc はグラデに成らないので、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 LoadingRotationClass("circle",12,15,2,14,1,5,30,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 arc の場合に設定ください。



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";}

リスナーの形式

リスナー形式は、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){

	//rotation加算/停止処理
	ring.rotation +=this.angle*this.stopNo;

};

リスナーの削除

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

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


//削除等
partsContainer.remove();

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

外周インスタンスをコンテナでラップ

このデモでは、rotation回転のために外周インスタンスをコンテナでラップして、「コンテナ継承クラス」のコンテナにaddしています。つまり2重構造になります。
Loadingの下に配置する背景が無ければ、直接「コンテナ継承クラス」にaddして「コンテナ継承クラス」自体を回転させても構いません。これらは其の時々の設計で変わると思います。


Matrix回転処理との違い

rotationでの回転は若干Matrix処理と比較して回転が滑らかでは有りません。また負荷のかかる場合は回転が遅くなりがちです。(画像を読み込んでいる時は負荷が大きい)


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

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

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



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

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

改造などは自由です

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


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



全てMatrixで回転処理の場合は前ページ記事参照ください。デザイン設定などは全て同じです。

【参照】当方の記事: CreateJS コンテナ継承クラスのLoading表示2(easeljs-0.8)



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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]