POPSブログ

CreateJS Loading Shape 回転テスト2

266

  Category:  javascript2013/12/17 pops 

画像読み込み時に表示するLoading、Circle図形を円周上に配置し、イベント毎にグラフイックを書き換えて回転する形式で作りました。matrix変換、transformPoint()を利用すると簡単に仕上がります。但し、Circle以外は描画できない問題が発生しました。
easeljs-0.7 でのテストです。

 

CreateJS Loading Shape 回転テスト2


前回のものはライン描写によるものでしたが今回は、transformPoint()を利用し、beginFill()の形式でCircleを描画して作ります。但し、この形式ではCircle以外の図形を配置するのは難しい。これは最後にのべる。


DEMO


CreateJS Loading Shape 回転テスト2 デモ、(createJS051.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

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


//日本語
//createJS051.js
//Loadingデモ2
//easeljs-0.7用

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

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

var radius=3;//サークル半径

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

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

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

var stage;
var viewtext;

var loadingShape;
var loadingpoints1=[];
var matrix1=new createjs.Matrix2D();
//保存用
var alphaArr=[];
var radiusArr=[];

//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);
	//point決定
	for (var i = 0; i < count; i++) {
		var point=loadingpoints1[i];
		matrix1.transformPoint(point.x,point.y,point);
	}
	//書換え
	draw_loading();
}

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

	var alpha_v=1;
	var radius_v=radius;//サークル半径

	//描画データ
	var cx,cy,
	numNeedles=12,
	innerR=15,
	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));

		//alpha半径の計算値保存
		alpha_v -=0.05;
		alphaArr[i]=alpha_v;
		radius_v -=0.1;
		radiusArr[i]=radius_v;
	}

	//保存値反転
	alphaArr.reverse();
	radiusArr.reverse();
}

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

	//サークル半径
	var radius_v=radius;

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

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

	//graphicのスタイル
	var graphics=new createjs.Graphics();
	loadingShape.graphics.clear();

	var kk=1;
	//円形描画
	for (var i=0; i < count; i++){

		//透明度を描画毎に変更、描画方向を変えればそのままでも良い
		alpha_v -=0.05;//左
		//alpha_v=alphaArr[i];//右 保存逆転値

		//半径序序に小さく
		//radius_v -=0.1;//左
		//radius_v=radiusArr[i];//右 保存逆転値

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

		//不透明2色
		//var alphaback=loadingbackcolor;
		//if (kk < 0) {alphaback=loadingbackcolor2;}

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

		//point1
		_point=loadingpoints1[i];
		graphics.moveTo(_point.x,_point.y);
		//Circle rgbaのデータ設定を適用
		loadingShape.graphics=graphics.beginFill(alphaback).drawCircle(_point.x,_point.y,radius_v);

		//Ellipse観覧車になる未使用です
		//loadingShape.graphics=graphics.beginFill(alphaback).drawEllipse(_point.x,_point.y,5,10);

		kk *=-1;
	}
	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

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


/*日本語 createJS051.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つのShape内の半径 innerR の円周上、に円を描画しているだけです。
(図は、cAngle=-Math.PI/2 で補正されて、描画開始位置を左に90度回転した状態です)


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

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

1. 大きさなどを変える。(描画数も変更可能)
2. 回転を逆にする。回転速度を変える。
3. 透明度を与える。(注意、透明度が低い場合、マシン環境が悪いと表現出来ない、要素の色、背景色によっても見た目が違ってくるので確認が必要、透明度1-0.4位の範囲にするのが無難)
4. 色の変更。
5. 配置の図形要素は「円形」以外は難しいので「円形専用」です。(中の図形をShape化すれば制御は可能)

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


Point保存配列

ここでは、beginFill()グラフイック描写でLoadingを作っていますので、円周上配置位置のPoint保存のため配列を使用しています。


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

Matrix2Dオブジェクトを初期化

identity()メソッドでMatrix2Dオブジェクトを初期化


matrix1.identity().rotate(angle);

詳細は、前ページ参照下さい。


大きさなどを変える

大きさなどを変更出来ます。innerR 円周上配置位置の半径です。
ラインの描画では有りませんので、setStrokeStyle()、beginStroke()の設定は不要です。

大きさ、透明度の変更の段階を小さくしています(マシン性能が悪いと透明度の表現が荒い)ので、逆転の時計算が面倒になるため、予め計算して保存値配列を逆転して使用している。この辺は自由に設定しても構わない。


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

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

円の大きさグローバル

//サークル半径
var radius=3;

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

円の大きさを小さくする

//半径序序に小さく
radius_v -=0.1;

● alpha半径の計算値保存

回転を逆転した場合の計算を楽にするため、各設定値を保存して配列を逆転しています。この辺の使用は自由です。


● 描画方向の逆転

円周上描画方向の逆転は以下の変更で出来ます。通常は左回転で設定し易くなっていますが、描画方向を変えても良いかも知れません。この場合は透明度、大きさ、の設定も変更は要らない。回転速度方向を逆にすれば良い。
この辺の設定も自由です。


初期描画方向 左
cAngle +=nAngle;

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

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

変更する 右
cAngle -=nAngle;

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


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

	var alpha_v=1;
	var radius_v=radius;//サークル半径

	略す

	//描画位置
	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));

		//alpha半径の計算値保存
		alpha_v -=0.05;
		alphaArr[i]=alpha_v;
		radius_v -=0.1;
		radiusArr[i]=radius_v;
	}

	//保存値反転
	alphaArr.reverse();
	radiusArr.reverse();
}

● 図形要素の配置間隔を変える。
通常は円周上に等間隔では配置していますが、変化させれば弧状にもなります。この辺は好きにします。


通常は円周上に等間隔

//ライン描画位置
nAngle=Math.PI*2/numNeedles;
------------------------------------------------------------------

間隔を半分にする、弧状になる

nAngle=Math.PI/numNeedles;

回転を逆にする

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

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


var angle=Math.PI/12;

//Ticker
function loading_rotate(event) {

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

	略す
}
------------------------------------------------------------------

透明度を与えている場合、速度を大きくすると「視覚的」に大きく違ったりします
angle=-1/2;//左

透明度を与える

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

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


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

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


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

記載例
graphics.beginFill(createjs.Graphics.getRGB(255,0,0,0.5)).drawCircle.........;

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


色の変更

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

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


「デモ」では描画毎に、透明度など変化させるため、beginFill()に、getRGB()で色の設定をしています。


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

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

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

//サークル描画
for (var i=0; i < count; i++){

	//透明度を描画毎に変更、描画方向を変えればそのままでも良い
	alpha_v -=0.05;//左
	//alpha_v=alphaArr[i];//右 保存逆転値

	//半径序序に小さく
	//radius_v -=0.1;//左
	//radius_v=radiusArr[i];//右 保存逆転値

	略す

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

	//point1
	_point=loadingpoints1[i];
	graphics.moveTo(_point.x,_point.y);
	//Circle rgbaのデータ設定を適用
	loadingShape.graphics=graphics.beginFill(alphaback).drawCircle(_point.x,_point.y,radius_v);

	kk *=-1;
}

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

//変換は配列で返すナントカ使える
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.beginFill(alphaback).....
を
graphics.beginFill(loadingbackcolor)......
直接なら
graphics.beginFill("#FF1493")......

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


● 2色で塗る、この辺は各自のアイデアで。


//不透明2色
var alphaback=loadingbackcolor;
if (kk < 0) {alphaback=loadingbackcolor2;}

● 虹色に染める場合は、次ぎを有効にします。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);

円形以外の問題

ここでは1つの loadingShape 内に移動して複数の図形を描画しています。簡単に描画書き換えが行えますが、円形以外の図形を配置した場合に、各図形要素はインスタンス化していませんので角度の制御を出来ませんから、遊園地の観覧車に例えれば吊られたゴンドラの動きと同じになります。キレイに回転できません。

この方が「面白い」となれば話は別、人それぞれ感性は違う。


通常は中に配置する図形要素個別にShape化して、中心より放射状に配置すればよいが、Shape化(インスタンス)しても matrix.rotate() の影響が大きく、インスタンスをmatrixで旨く修正すれば角度の制御が出来る様ですが、かなり面倒なようです。
構造を変えなければ成りませんので、ここでは円形だけにします。


 

円形でも問題がでているが、円形を回転しても変化がないので判らないだけです。
Loading目的ならば円形だけで用は足ります


● Ellipseの例。
見えないが円形もこの動きをしている。この「デモ」ではEllipse()の角度調整が出来ない。


//Ellipse 観覧車になる 未使用です
loadingShape.graphics=graphics.beginFill(alphaback).drawEllipse(_point.x,_point.y,5,10);

色々テストをして見ましたが、構造を変えても、matrix.rotate()の影響が大きく、修正などには時間がかかると思います。円形以外のものはLoading以外の目的での使用となると予想される
(現在ある程度作動するテスト品はあるが完全ではない、誰か考えてください)


イベント毎にグラフイックを書き換え無い方法

普通に、matrix.rotate()を使用しない方法ならば、図形要素を個別にShape化して配置毎に回転など修正出来ますので問題は出ません。但し親要素をtick毎に rotation する事になります。


実際の組み込み

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



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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]