POPSブログ

CreateJS テキストアニメーション ランダム設定のテスト レインボー色(虹色)

233

  Category:  javascript2013/07/05 pops 

CreateJSを利用してキャンバスに、レインボー色(虹色)の「テキストアニメーション」を加えました。テキストアニメーションは1行限定ですが文字間(間隔)がキレイに揃います。前回の文字処理を複数の文字列でもアニメーション出来るように考えてみました。
easeljs-0.7 でのテストです。

 

CreateJS テキストアニメーション ランダム設定のテスト


2013/09/25/EaselJSなどバージョンUPされました(easeljs-0.7)。動作など確認してeaseljs-0.7用に更新しています。(2013/10/21)


基本的には、前の改造ですから簡単に仕上がります。テキストアニメーションは、AS AS3アニメを書き換えたような感じです。まだ簡単単純ですが、CreateJSのTweenが高性能ですから結構満足で面白いのが出来ると思います。

 

[説明図]

 

1. テキストの分解を独立させましたので複数の文字列を扱えます。
2. 文字は指定色、レインボー色(虹色)どちらも指定出来ます。
3. 文字のアニメーション(Tween)は基本的に個人が作成します。
4. 中間の「ロゴ」は png画像です。

 

DEMO


CreateJS テキストアニメーション ランダム設定のテスト レインボー色(虹色) (createJS024.js)

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// マシン環境の悪い方は「Chrome」推奨 ///


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>
<script type="text/javascript" src="js/tweenjs-0.5.0.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。
このデモでは preloadjs を使用していません。


HTML (HTML5)


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

JS

createJS024.js、JS名は任意に変更可。easeljs-0.7用


//日本語
//createJS024.js
//デモ用rainbow-Colorテキストアニメーション
//easeljs-0.7用

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

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

//prologue表示時間
var prologue_time=12000;

//メインテキスト
var mainstring="ViVa POPS WEB KOUBOU";
//メインテキスト表示位置
var mtcontainer_x=100;//中央補正しない場合
var mtcontainer_y=80;//80

//サブテキスト
var substring="Kokekokkou Welcome to my site. thanks";

//------------------------------------------------------
//変数、未使用もあり

//ステージ
var stage;
//box
var backrect;
var welcomeImage;
var container;
var btncontainer;
//TEXT
var viewtext;

//MAIN-TEXT
var maintextcontainer;
var maintext;
//MOVE-TEXT
var textChip=[];
var textPosx=[];
var textPosy=[];

//SUB-TEXT
var subtextcontainer;
//MOVE-TEXT
var textChip2=[];
var textPosx2=[];
var textPosy2=[];

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

//click-btn
var myhitBtn;

//var textlen=0;
//var textcount=0;
var backchg_no=0;
var backcolors=["#000000","#FFFFFF","#EEEEEE","#888888"];

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


//ステージ周りセット
function init() {

	//STAGE
	stage=new createjs.Stage('mainCanvas');
	//MouseOver重要
	stage.enableMouseOver(20);

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

	//クリック
	backrect.addEventListener("click",backchg);
	stage.addChild(backrect);

	//welcome画像層画像表示
	welcomeImage=new createjs.Bitmap('/main/images/textimg01.png');
	welcomeImage.regX=340/2;
	welcomeImage.regY=50/2;
	welcomeImage.x=canvasWidth/2;
	welcomeImage.y=canvasHeight/2-15;
	stage.addChild(welcomeImage);
	stage.update();

	//簡易TEXT、Arialに変更
	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);
	
	//MAIN-TEXT
	maintextcontainer=new createjs.Container();
	//表示位置
	maintextcontainer.x=mtcontainer_x;
	maintextcontainer.y=mtcontainer_y;
	stage.addChild(maintextcontainer);

	//SUB-TEXT
	subtextcontainer=new createjs.Container();
	stage.addChild(subtextcontainer);

	//btncontainer
	btncontainer=new createjs.Container();
	btncontainer.y=270;
	stage.addChild(btncontainer);
	set_btn();
	myhitBtn.visible=false;

	stage.update();

	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',tick);

	//調整
	setTimeout(function() {

		//プロローグ表示に進む
		set_prologue();

	},2000);

}

//プロローグ
function set_prologue() {

	//MAINテキストアニメ
	set_mainanime();
	//SUBテキストアニメ
	set_subanime();

	//調整
	setTimeout(function() {

		//案内
		set_text("テキストアニメーションが終了したら「ボタン」を押してください。");
		//ボタン表示
		myhitBtn.visible=true;
		//自動
		//reset_text();

	},prologue_time);
}

//背景色変更
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);
}

//MAINテキストアニメ、スタンダード、未使用
function set_mainanime_st() {

	//MAINテキストアニメーション
	var text_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;

	//インスタンス配列取得
	//サイズ,フォント,色,虹色,スペース,文字
	textChip=createMoveText("32px","Arial","#FFFFFF",false,text_spc,mainstring);
	var textlen=mainstring.length;

	//移動
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		maintextcontainer.addChild(textChip[i]);
		//ポジション取得
		textPosx[i]=textChip[i].x;
		textPosy[i]=textChip[i].y;

		//全幅
		text_W +=textChip[i].width;
		if(i < textlen) {text_W +=text_spc;}

		//移動
		textChip[i].x=canvasWidth;
		k ++;
		flag *=-1;
	}

	//コンテナ中央
	if (center) {maintextcontainer.x=(canvasWidth-text_W)/2;}

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn=createjs.Tween.get(textChip[i])
		.wait(200*i)
		.to({x:textPosx[i]},1000)
		.call(finshmove);//現在何もしない
	}

}


//MAINテキストアニメ/現在使用
function set_mainanime() {

	//MAINテキストアニメーション
	var maintext_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;

	//インスタンス配列取得
	//サイズ,フォント,色,虹色,スペース,文字
	textChip=createMoveText("32px","Arial","#FFFFFF",true,text_spc,mainstring);
	var textlen=mainstring.length;

	//ランダム配置のため全幅の計算を先に
	for (var i=0; i < textlen; i++) {
		maintext_W +=textChip[i].width;
		if(i < textlen) {maintext_W +=text_spc;}
	}
	//コンテナ中央ランダムのため速く決めた
	if (center) {maintextcontainer.x=(canvasWidth-maintext_W)/2;}

	//移動
	var delay_st=[];
	//パターン番号
	var pattern_no=Math.floor(Math.random()*6);
	//多目的判定用フラグ
	var chgxyflag=Math.floor(Math.random()*5);
	//多目的用2
	var chgflag=Math.floor(Math.random()*3);
	var chgflag2=Math.floor(Math.random()*3);
	//逆転フラグ
	var chg_v=Math.floor(Math.random()*2);
	if (chg_v < 1) {chg_v=-1;}

	//回転
	var rotate_no=chgflag*chg_v;
	//スケール
	var sclsdata=[1,1,1,.5,4,8];
	var scls=sclsdata[Math.floor(Math.random()*sclsdata.length)];
	//delay番号
	var delay_no=Math.floor(Math.random()*3);

	var sh=textlen-1;
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		maintextcontainer.addChild(textChip[i]);
		//ポジション取得
		textPosx[i]=textChip[i].x;
		textPosy[i]=textChip[i].y;

		//全幅計算は上で行っている
		//maintext_W +=textChip[i].width;
		//if(i < textlen) {maintext_W +=text_spc;}

		//移動左右1、X方向のみ
		if (pattern_no == 0) {
			textChip[i].x=canvasWidth*chg_v;
			textChip[i].y=textPosy[i];
		}
		//移動左右2、Y方向ズレ
		if (pattern_no == 1) {
			textChip[i].x=canvasWidth/2*chg_v;
			textChip[i].y +=100*flag*chg_v*(chgflag2-1);
		}
		//移動上下
		if (pattern_no == 2) {
			textChip[i].x=textPosx[i];//その場
			textChip[i].y=canvasHeight/2*chg_v*(chgflag+1);
			if (chgflag == 1) {
				textChip[i].y *=flag;//上下交互
			}
		}
		//ランダム
		if (pattern_no == 3) {
			//globalToLocal
			var point=maintextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip[i].x=point.x;
			textChip[i].y=point.y;
		}
		//文字列の中心から
		if (pattern_no == 4) {
			textChip[i].x=maintext_W/2;
			textChip[i].y=textPosy[i];//その場
		}
		//その場所から
		if (pattern_no == 5) {
			textChip[i].x=textPosx[i]+20*(chgflag-1);//その場少しずらす
			textChip[i].y=textPosy[i];//その場
		}

		textChip[i].rotation=rotate_no*180*(chgflag2-1);
		textChip[i].alpha=0;
		textChip[i].scaleX=scls;
		textChip[i].scaleY=scls;

		//delay
		delay_st[i]=100*i;//標準
		if (delay_no == 1) {delay_st[i]=20*i*i;}
		if (delay_no > 1) {delay_st[i]=Math.abs(i-sh/2)*150;}//150-200

		//交互遅延
		if (chgflag2 == 1) {
			if (flag == 1) {delay_st[i] +=1500;}
		}

		k ++;
		flag *=-1;
	}
	//delay逆転
	if (chgflag == 0) {
		delay_st.reverse();
	}

	//コンテナ中央補正は上で行っている
	//if (center) {maintextcontainer.x=(canvasWidth-maintext_W)/2;}

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn=createjs.Tween.get(textChip[i])
		.wait(delay_st[i])
		.to({x:textPosx[i],y:textPosy[i],scaleX:1,scaleY:1,alpha:1,rotation:0},1000)
		.wait(100).to({scaleX:2,scaleY:2},50)
		.wait(100).to({scaleX:1,scaleY:1},200)
		.call(finshmove);//現在何もしない
	}

}

//SUBテキストアニメ
function set_subanime() {

	//SUBテキストアニメーション
	var text_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;

	//インスタンス配列取得
	//サイズ,フォント,色,虹色,スペース,文字
	textChip2=createMoveText("16px","Arial","#CCCCCC",false,text_spc,substring);
	var textlen=substring.length;

	//移動
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		subtextcontainer.addChild(textChip2[i]);
		//ポジション取得
		textPosx2[i]=textChip2[i].x;
		textPosy2[i]=textChip2[i].y;

		//全幅
		text_W +=textChip2[i].width;
		if(i < textlen) {text_W +=text_spc;}

		//移動
		textChip2[i].x=canvasWidth*flag;
		k ++;
		flag *=-1;
	}

	//コンテナ中央
	if (center) {subtextcontainer.x=(canvasWidth-text_W)/2;}
	subtextcontainer.y=180;

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn2=createjs.Tween.get(textChip2[i])
		.wait(200*i)
		.to({x:textPosx2[i]},1000)
		.call(finshmove2);//現在何もしない
	}

}

//MOVEテキストインスタンスを作る
function createMoveText(size,font,color,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();
		//原点中央
		t.regX=w/2;
		t.regY=h/2;
		//虹色
		if (rainbow) {
			t.color=rainbowColor(i,len,100,50);//rainbow
			//t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}
		//位置
		tpos_x +=w/2;//half
		t.x=tpos_x;
		t.y=tpos_y;//0
		//位置加算
		tpos_x +=(w/2+space);//half+space
		//大きさ重要
		t.width=w;
		t.height=h;
		//
		chip[i]=t;
	}
	//戻り配列
	return chip;
}
//終了
function finshmove () {
	//
}
//終了2
function finshmove2 () {
	//
}

//reset_text
function reset_text() {

	set_text("クリア");
	myhitBtn.visible=false;

	//コンテナの中を削除
	maintextcontainer.removeAllChildren();
	subtextcontainer.removeAllChildren();
	stage.update();

	//調整
	setTimeout(function() {
		set_text("ランダムアニメ実行中");
		set_prologue();
	},1000);

}

//tickステージ
function tick() {
	stage.update();
}
//VIEWTEXT
function set_text(t) {
	viewtext.text=t;
}

//quadraticCurveToこちら使用
function operaRoundRect(s,x,y,w,h,r) {

	s.graphics.moveTo(x+r,y)
	.lineTo(x+w-r,y)
	.quadraticCurveTo(x+w,y,x+w,y+r)
	.lineTo(x+w,y+h-r)
	.quadraticCurveTo(x+w,y+h,x+w-r,y+h)
	.lineTo(x+r,y+h)
	.quadraticCurveTo(x,y+h,x,y+h-r)
	.lineTo(x,y+r)
	.quadraticCurveTo(x,y,x+r,y);
}

//rainbow-Color2
var rainbowColor=function(v,cv,saturation,lightness) {
	var no=v/cv*360;
	var color=createjs.Graphics.getHSL(no,saturation,lightness);
	return color;
}

//create-text未使用
function create_text(size,font,color,string) {

	var fontdata=size + " " + font;
	var t=new createjs.Text("",fontdata,color);
	t.text=string;
	var w=t.getMeasuredWidth();
	var h=t.getMeasuredHeight();
	//大きさ設定、受け渡しに重要
	t.width=w;
	t.height=h;
	//原点中央
	t.regX=w/2;
	t.regY=h/2;
	return t;

}
//Create-Bottunボタンを作る
function set_btn() {

	//ラベル文字生成
	var label="CLICK";
	//x,y,w,h,r,c,label,lc,overc,outc
	myhitBtn=createbtn (0,0,60,20,5,"#FFFFFF",label,"#FF0000","#48D1CC","#FFFFFF");
	myhitBtn.cursor="pointer";
	myhitBtn.x=(canvasWidth-60)/2;
	myhitBtn.y=0;
	//クリック
	myhitBtn.addEventListener("click",reset_text);
	//addChild
	btncontainer.addChild(myhitBtn);

}

//create-bottunベタ塗り
function createbtn (x,y,w,h,r,c,label,lc,overc,outc) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	var s=new createjs.Shape();
	//角丸
	s.graphics.s(0).beginFill(outc);
	operaRoundRect(s,x,y,w,h,r);
	btn.addChild(s);
	//myBtn shadow onMouseOverでupdate()すると濃くなる
	//テキスト以外で使用は注意
	btn.shadow=shadow;
	var tx=new createjs.Text(label,"12px Arial",lc);
	tx.x=w/2;
	tx.y=3;
	tx.maxWidth=w;
	//tx.lineWidth=w;
	tx.textAlign="center";
	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	tx.mask=s;

	//rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		//角丸
		s.graphics.s(0).beginFill(overc);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		//角丸
		s.graphics.s(0).beginFill(outc);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	return btn;
}

//START
init();

注釈文を削除すれば、幾分早くなります。

easeljs-0.7より イベント関連処理が変更になりましたので修正しました。


CSS

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


/*日本語 createJS024.css*/

#demo-wrap {
position:relative;
width:auto;
height:320px;
text-align:center;
}

#image-box {
/*position:absolute;*/
position:relative;
top:0;left:0;
width:640px;
height:300px;
padding:0;
margin:0 auto;
box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;
background-color:#000000;
}

#image-box #mainCanvas {
border-radius:10px;
}

.radius {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-box-border-radius:10px;
-ms-border-radius:10px;
}

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


簡単な説明


[説明図]

 

テキスト文字の分解組み立ては、前回も説明しましたが以下同様の説明です。1文字ずつ取り出しTextクラスのインスタンスを作り、中心補正して並べて行く作業になります。但し並べ方に「コツ」が有ります。


テキスト文字の分解組み立て概略

以下の方法はワタシの MX AS3 でのテキストアニメ手法をCreateJS形式に移植したものである。上の説明図は概略的なものです。今回は文字のインスタンスを作ると所を 別関数化 して。複数の文字列を扱えるようにしました。


1. 1文字ずつ取り出しTextクラスのインスタンスを作ります。文字は左寄せ(初期は左寄せ)です。絶対に中央配置にしないこと(正確に揃わなくなる)。文字種は Arial が良いようです(IE9対応のため)
2. インスタンスの大きさは、getMeasuredWidth()、getMeasuredHeight()、で取得出来ます。
3. インスタンスの原点を regX、regY、で中心に補正します。
4. インスタンスをコンテナに並べて行きますが、インスタンスのX方向、半分の値づつ2回ずらし、中にスペースを入れます。Y方向は0になっています(値を入れても良い)。
1文字ずつの「位置情報を保存」します。これがアニメの「戻り位置」になります。スペースで文字の間隔の調整が可能です。後は、好きな所に移動させて「戻り位置」までTweenさせるだけです。
5. 全ての文字を並べた場合の「全体の横幅」を計算しておきます。これでコンテナ位置を調整して「中央配置」などに利用します。(原則1行です、改行させる方法もありますが、、)
6. Tweenでアニメーションさせますが、wait()を旨く使用すると自由に動かせます。(画像分解アニメと同じですからそちらの処理を参考すると簡単だ)
7. 必要であればグラフィック(Shape)を入れても良いでしょうがその分重く成ります。テキストだけで十分です。
8. 文字間のスペースを設定出来ますので便利です。文字の雰囲気が変わる。(テキストスペース text_spc)。
9. 文字の描画品質はブラウザにより違いがあります。


テキスト文字を分解インスタンス化して配列で返す

この辺の処理は色んな方法、考え方が有ると思いますが、「デモ」では以下の様になります。
問題は、CreateJSのTextクラスに .width .height が無いので工夫しました。

文字インスタンスを作る、createMoveText()関数 を実行して文字インスタンスの配列を取得して、Tweenさせますが、利点として複数の文字列をアニメ出来る事です。ライブラリではないので、「文字列」ごとに処理しなければならない繁雑さは有りますが一応は動きます。他の階層のコンテンツなどと組み合わせれば大変な作業になります。


以下の処理は「MAINテキス」トの処理であるが「画像分解」アニメの処理と全く同じである。テキトウに移動してTweenさせるだけである。処理は「INタイプ」であるが「OUTタイプ」にも出来る。


1.配列textChipに、createMoveText()の結果を取得するので、複数文字列を扱うのに便利。
2.配列textChipに「大きさ情報」が無い(CreateJSのTextクラスに .width .height が無い)ので下記の様に工夫した。現時点では問題は無いようである。
3.文字種は、IE9を考慮して「Arial」にしています。(日本語表示可能)
4.文字を並べた場合の「全幅」を先に計算するために「標準形」を改造したが、色々な方法は有ると思います。
(ランダム配置で globalToLocal を利用しているために「テキストコンテナ」位置を先に確定する必要があった)


「多目的判定用フラグ」「逆転フラグ」等で位置をテキトウに移動させているだけで、処理とは言えない「トテモイイカゲン」である。アニメーションしているのが不思議!。




var mainstring="ViVa POPS WEB KOUBOU";

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

//MAINテキストアニメ/現在使用
function set_mainanime() {

	//MAINテキストアニメーション
	var maintext_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;

	//インスタンス配列取得
	//サイズ,フォント,色,虹色,スペース,文字
	textChip=createMoveText("32px","Arial","#FFFFFF",true,text_spc,mainstring);
	var textlen=mainstring.length;


	//ランダム配置のため全幅の計算を先に
	for (var i=0; i < textlen; i++) {
		maintext_W +=textChip[i].width;
		if(i < textlen) {maintext_W +=text_spc;}
	}
	//コンテナ中央ランダムのため速く決めた
	if (center) {maintextcontainer.x=(canvasWidth-maintext_W)/2;}

	//移動
	var delay_st=[];
	//パターン番号
	var pattern_no=Math.floor(Math.random()*6);
	//多目的判定用フラグ
	var chgxyflag=Math.floor(Math.random()*5);
	//多目的用2
	var chgflag=Math.floor(Math.random()*3);
	var chgflag2=Math.floor(Math.random()*3);
	//逆転フラグ
	var chg_v=Math.floor(Math.random()*2);
	if (chg_v < 1) {chg_v=-1;}

	//回転
	var rotate_no=chgflag*chg_v;
	//スケール
	var sclsdata=[1,1,1,.5,4,8];
	var scls=sclsdata[Math.floor(Math.random()*sclsdata.length)];
	//delay番号
	var delay_no=Math.floor(Math.random()*3);

	var sh=textlen-1;
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		maintextcontainer.addChild(textChip[i]);
		//ポジション取得
		textPosx[i]=textChip[i].x;
		textPosy[i]=textChip[i].y;

		//全幅計算は上で行っている
		//maintext_W +=textChip[i].width;
		//if(i < textlen) {maintext_W +=text_spc;}

		//移動左右1、X方向のみ
		if (pattern_no == 0) {
			textChip[i].x=canvasWidth*chg_v;
			textChip[i].y=textPosy[i];
		}
		//移動左右2、Y方向ズレ
		if (pattern_no == 1) {
			textChip[i].x=canvasWidth/2*chg_v;
			textChip[i].y +=100*flag*chg_v*(chgflag2-1);
		}
		//移動上下
		if (pattern_no == 2) {
			textChip[i].x=textPosx[i];//その場
			textChip[i].y=canvasHeight/2*chg_v*(chgflag+1);
			if (chgflag == 1) {
				textChip[i].y *=flag;//上下交互
			}
		}
		//ランダム
		if (pattern_no == 3) {
			//globalToLocal
			var point=maintextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip[i].x=point.x;
			textChip[i].y=point.y;
		}
		//文字列の中心から
		if (pattern_no == 4) {
			textChip[i].x=maintext_W/2;
			textChip[i].y=textPosy[i];//その場
		}
		//その場所から
		if (pattern_no == 5) {
			textChip[i].x=textPosx[i]+20*(chgflag-1);//その場少しずらす
			textChip[i].y=textPosy[i];//その場
		}

		textChip[i].rotation=rotate_no*180*(chgflag2-1);
		textChip[i].alpha=0;
		textChip[i].scaleX=scls;
		textChip[i].scaleY=scls;

		//delay
		delay_st[i]=100*i;//標準
		if (delay_no == 1) {delay_st[i]=20*i*i;}
		if (delay_no > 1) {delay_st[i]=Math.abs(i-sh/2)*150;}//150-200

		//交互遅延
		if (chgflag2 == 1) {
			if (flag == 1) {delay_st[i] +=1500;}
		}

		k ++;
		flag *=-1;
	}
	//delay逆転
	if (chgflag == 0) {
		delay_st.reverse();
	}

	//コンテナ中央補正は上で行っている
	//if (center) {maintextcontainer.x=(canvasWidth-maintext_W)/2;}

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn=createjs.Tween.get(textChip[i])
		.wait(delay_st[i])
		.to({x:textPosx[i],y:textPosy[i],scaleX:1,scaleY:1,alpha:1,rotation:0},1000)
		.wait(100).to({scaleX:2,scaleY:2},50)
		.wait(100).to({scaleX:1,scaleY:1},200)
		.call(finshmove);//現在何もしない
	}

}

文字を長くしてテストする場合は、JS先頭の prologue_time を長くしてください。(現在12秒)


Textクラスに .width .height が無いので以下の様にしたが問題はないようである。
ここで配置した時の「全幅」を計算しても良いのだが、してはいない。


//MOVEテキストインスタンスを作る
function createMoveText(size,font,color,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();
		//原点中央
		t.regX=w/2;
		t.regY=h/2;
		//虹色
		if (rainbow) {
			t.color=rainbowColor(i,len,100,50);//rainbow
		}
		//位置
		tpos_x +=w/2;//half
		t.x=tpos_x;
		t.y=tpos_y;//0
		//位置加算
		tpos_x +=(w/2+space);//half+space
		//大きさ重要
		t.width=w;
		t.height=h;
		//
		chip[i]=t;
	}
	//戻り配列
	return chip;
}

処理することにより後で、大きさを取得出来るようになる。


textChip[i].width;

Tween

アニメーションはTweenで行っています。最初のwait()が時間差を与えて文字の出現を制御しています。
最初の.to()の時間が1文字移動する速度になります。(移動位置から文字の位置に戻る)
その後の wait() to() は文字の動きにニュアンスを与えています。この辺は各自工夫すれば良い。
スケールの変更、skewX skewY の設定でも変化が生まれますので文字の変化は各自のアイデア次第です。


標準形

処理の「標準形」である。「文字インスタンス配列」「位置保存配列」を変えれば複数の文字列に対応できる。「SUBテキスト」処理のset_subanime()関数と同じである。

「デモ」のためゴチャゴチャ書き換えているので別途掲載した。


//MAINテキストアニメ、スタンダード、未使用
function set_mainanime_st() {

	//MAINテキストアニメーション
	var text_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;

	//インスタンス配列取得
	//サイズ,フォント,色,虹色,スペース,文字
	textChip=createMoveText("32px","Arial","#FFFFFF",false,text_spc,mainstring);
	var textlen=mainstring.length;

	//移動
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		maintextcontainer.addChild(textChip[i]);
		//ポジション取得
		textPosx[i]=textChip[i].x;
		textPosy[i]=textChip[i].y;

		//全幅
		text_W +=textChip[i].width;
		if(i < textlen) {text_W +=text_spc;}

		//移動
		textChip[i].x=canvasWidth;
		k ++;
		flag *=-1;
	}

	//コンテナ中央
	if (center) {maintextcontainer.x=(canvasWidth-text_W)/2;}

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn=createjs.Tween.get(textChip[i])
		.wait(200*i)
		.to({x:textPosx[i]},1000)
		.call(finshmove);//現在何もしない
	}

}

SUBテキストアニメ

単に複数の文字列も操作出来ますの例である。文字を左右に移動しているだけ。説明などは省略します。


使用画像

340x50 陰影付き、png画像

 

 

レインボー色(虹色)に染める


レインボー色に染める(色相環)

イワユル虹色に配色するのですが、Graphicsクラスの getHSL() を利用します。


色データ=createjs.Graphics.getHSL(設定データ)

1. CSSが対応しているので、テキストクラス、text.color="色データ"
2. グラフィック塗りの色を設定できます、graphics.beginFill("色データ")
3. グラフィック線の色を設定できます、graphics.beginStroke("色データ")


「色相」が 360 有りますので、順次割り当てて行き、「彩度」「輝度」を決めるだけです。
単純にいえば、最大を360として、色相のどの位置に有るか計算して割り振ると言うことです(最初は0で赤)。
下記では、rainbowColor関数を作り利用しています。別途説明の様に、直接に実行しても良い。


//レインボー色に染める
t.color=rainbowColor(i,textlen,100,50);//rainbow

//rainbow-Color2
var rainbowColor=function(v,cv,saturation,lightness) {
	var no=v/cv*360;
	var color=createjs.Graphics.getHSL(no,saturation,lightness);
	return color;
}

直接レインボー色に染める、*360処理している事に注意。


//虹色
if (rainbow) {
	//t.color=rainbowColor(i,len,100,50);//rainbow
	t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
}

[説明図]

 

「彩度」「輝度」を変化させた時の「色の具合」の様子である。パラメータ変化の色感覚を認識する事が大事!。
「輝度」100 は「白」になる。(図では、見えるように陰影をつけた)
「輝度」0 は「黒」になる。

DEMOでは文字の間に空白(半角)を入れている。文字の間の「空白」にも色は割り振られているが、実際には「空白」だから見えない。(忍者修行でもすれば見える様になるかも知れない、パチンコ修行は尚良い)


その外


文字種と文字サイズとIE9

IE9の振る舞いが少し変だ。キャンバスに、通常の文字は余り使用したくないのでテキトウで有った。単に表示されれば良いと言う具合である。(策定が完全ではなく、ブラウザで差異があるので文字は余り触りたくない)

しかし、文字を動かすと成ると問題がある。IE9では「_ゴシック」が効かない「ゴシック」でもブラウザにより違う。

そこで、「Arial」を設定して見たら、ほぼブラウザに差異無く表示される。日本語もそれなり表示する。(文字の大きさに若干違いが出るかも知れないが、、当方では全て調べて確認する方法が無い)


調べるのも大変なので、応急的に「Arial」を設定にするが、問題が有れば各自調べて設定下さい。特にMACについては不明ですし、IE10はナントカ成るんじゃないかと期待します。


//Textクラスインスタンスを作る
var t=new createjs.Text("","32px Arial","#000000");

文字サイズは直接変更ください。日本語の表示もできます。


TextクラスのFont設定変更

今までDEMOでのTextクラスのFont設定では、単に表示できれば良いだけの目的で「_ゴシック」を使用して来ましたが、今後は「IE9」を考慮して「Arial」に変更します。
このキャンバス表示の文字は重要なものでは有りませんので問題は出ません。しいて言えば必要性の無いものです。

 

その他

DEMO専用です。使用する事は可能ですが、あくまでもテストですので個人の判断で使用下さい。画像などは各自ご用意下さい。JSの先頭部分をお読み下さい。
但し、効率的な方法があれば、予告無くスクリプトなど修正する場合があります、ご了承下さい。


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]