POPSブログ

CreateJS 3D風画像Carousel表示(easeljs-0.8)

340

  Category:  javascript2015/03/04 pops 

円周上に配置したインスタンスを回転させる 3D Carousel もどきですが「2D」で作成し中に画像を挿入しています。
easeljs-0.8でMatrix2Dクラスに変更がありましたので修正します。

 

CreateJS 3D風画像Carousel表示テスト


これは、3D風Carouselであり、実際は2Dです。基本的な構造などは「前ページ」のものに画像を挿入したものです。Reflection (鏡面効果)を付ける事も可能です。
実際の3Dには及びませんがマアマア3Dに近い効果は出ています。Matrix処理のため結構軽く回転するようです。下記シミュレーションを参照ください。


zu

 

DEMO (easeljs-0.8)


CreateJS 3D風画像Carousel表示テスト、(createJS122.js)

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


demo


シミュレーション

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>
<script type="text/javascript" src="js/preloadjs-0.6.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

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



//日本語
//createJS122.js
//画像Carousel/position2追加
//easeljs-0.8.0 デモ用

//------------------------------------------------------
//初期設定

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

//画像の大きさ
var imageWidth=100;
var imageHeight=100;
//carouselの色
var carouselbackcolor="#FFFFFF";
//base枠の幅/ラインは1以上の場合
var base_W=4;
//陰影を付ける true false
var shadow_use=false;

//スタイル
//standerd/xscale1/xscale2/xyscale/position/position2
var scaleType="position";
//後を透過する false true
var fadeflag=false;

//split分割数自動修正 3-12
var carouselsplit=12;

//半径
var radiusX=240;//X方向
var radiusY=80;//Y方向

//回転速度 デグリー値1-5
var angle=2;//DEG
//正転逆転フラグ 右正転=1 左逆転=-1
var carouselflag=1;
//マウスイベントの使用 true false
var eventUse=true;
//コンテナ角 度デグリー値
var containerAngle=0;
//パーツ角度 デグリー値
var partsAngle=0;
//虹色にする不透明 true false
var rainbowColor=true;
//基本スケール
var stScale=0.75;
//始点の角度
var startAngle=-Math.PI/2;

//text
var text_use="use";

//画像リスト100x100
var manifest=[
{id:0,src:"/main/images/testImage101.jpg"},
{id:1,src:"/main/images/testImage102.jpg"},
{id:2,src:"/main/images/testImage103.jpg"},
{id:3,src:"/main/images/testImage104.jpg"},
{id:4,src:"/main/images/testImage105.jpg"},
{id:5,src:"/main/images/testImage106.jpg"},
{id:6,src:"/main/images/testImage107.jpg"},
{id:7,src:"/main/images/testImage108.jpg"},
{id:8,src:"/main/images/testImage109.jpg"},
{id:9,src:"/main/images/testImage110.jpg"}
];


//------------------------------------------------------
//回転正逆補正
angle *=carouselflag;
//to-RAD
var rotate_angle=angle*createjs.Matrix2D.DEG_TO_RAD;
var plusAngle=-Math.PI/2;
//------------------------------------------------------

//最初の画像0のこと
var image_no=0;
//画像数
var image_max;

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

//ステージ
var stage;
//Loader
var loader;
//コンテナ
var container,loadingcontainer,progresscontainer;
//画像/コンテナ
var welcomeImage,backimage;
var carouselContainer;
var progresscontainer;
//Loading関連
var loadingShape,progressbar,progtext,bar_v;
//TEXT
var viewtext;

//読み込み画像result保存容器
var assets=[];

//matrix
var matrix=new createjs.Matrix2D();
var chip=[];
var innerchip=[];
var imgchip=[];

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

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

	//ステージ
	stage=new createjs.Stage('mainCanvas');
	//MouseOver重要
	//stage.enableMouseOver(20);

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

	//welcome画像空
	welcomeImage=new createjs.Bitmap();
	stage.addChild(welcomeImage);

	//空コンテナを作る/未使用
	container=new createjs.Container();
	stage.addChild(container);

	//空コンテナインスタンス配置
	carouselContainer=new createjs.Container();
	carouselContainer.x=canvasWidth/2;
	carouselContainer.y=canvasHeight/2;
	stage.addChild(carouselContainer);

	//loadingコンテナを作る
	loadingcontainer=new createjs.Container();
	stage.addChild(loadingcontainer);
	//LOADINGを作る
	loadingShape=loadingIndicator3();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;

	//loading addEventListenerを設定
	createjs.Ticker.addEventListener('tick',loadingShape_tick);

	//コンテナに貼り付け
	loadingcontainer.addChild(loadingShape);
	loadingcontainer.visible=false;//非表示

	//ProgressBar
	progresscontainer=new createjs.Container();
	progressbar=new createjs.Shape();
	progtext=new createjs.Text("0","12px Arial","#FFFFFF");
	progtext.x=0;
	progtext.y=15;
	progtext.maxWidth=80;
	progtext.textAlign="center";
	progtext.shadow=shadow;//shadow
	//alpha
	progressbar.alpha=0.5;
	//addChild
	progresscontainer.x=canvasWidth/2;
	progresscontainer.y=canvasHeight/2;
	progresscontainer.addChild(progressbar,progtext);
	stage.addChild(progresscontainer);
	progresscontainer.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);
	//一旦ステージ表示
	stage.update();

	//MAIN-Ticker設定
	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',tick);

	//delay_speed調整
	setTimeout(function() {
		//画像ロードに進む
		bulkload();
	},1000);

}

//bulk-load、画像一括ロード
function bulkload() {

	set_text("Loading Now!");

	//ProgressBar-Listener設定
	createjs.Ticker.addEventListener('tick',progressBar_tick);
	//ProgressBar
	bar_v=0;
	progresscontainer.visible=true;//表示
	loadingcontainer.visible=true;//表示

	//Loaderを作る/エラー対処ならtrue設定
	loader=new createjs.LoadQueue(true,"","");
	//progress
	loader.on("progress",progress);
	//loader EventListener設定
	loader.on("fileload",fileload);
	loader.on("error",error);
	loader.on("complete",complete);
	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

}

//各画像読み込み完了
function fileload (event) {
	var id=event.item.id;
	assets.push(event.result);
}
//エラーerror
function error (event) {
	//var id=event.item.id;
	//エラー画像をassets容器に保存
	assets.push(createColorCanvas(canvasWidth,canvasHeight,"#333333"));
}

//全ての画像読み込み完了
function complete (event) {

	//画像数確認、再計算
	image_max=assets.length;
	carouselsplit=image_max;

	//簡易TEXT
	set_text("Loading End!")
	//loader Listener停止
	loader.off("fileload",fileload);
	//loader.off("error",error);
	loader.off("complete",complete);

	//loading EventListener削除
	createjs.Ticker.removeEventListener('tick',loadingShape_tick);

	//非表示でも良い
	loadingcontainer.visible=false;

	//画像があれば、最初の画像表示
	if (image_max) {

		//調整
		setTimeout(function() {

			//遅延progressbar最後の前にcompleteが反応する
			loader.off("progress",progress);
			//progressTicker停止
			createjs.Ticker.removeEventListener('tick',progressBar_tick);
			//progress非表示
			progresscontainer.visible=false;

			//簡易TEXTクリア
			set_text("");

			//画像表示に進む
			draw();

		},1000);
	}
}

//DRAW、アニメ
function draw() {

	//MAIN-Ticker-off
	createjs.Ticker.removeEventListener('tick',tick);
	//carousel
	carousel_set();
}

//carousel/パーツを配置してBaseを作る
function carousel_set() {

	//TEXT
	set_text("Carousel");

	///BitmapFill画像
	set_baseCircle();

	//Bitmap画像のみ
	//set_base_image();

	//reflection/OK
	//set_base_reflection();

	//コンテナを傾ける
	carouselContainer.rotation=containerAngle;

	//Listener
	createjs.Ticker.setFPS(40);
	createjs.Ticker.addEventListener("tick",carousel_rotate);

	//マウスイベントの使用
	if (eventUse) {
		stage.addEventListener("stagemousemove",setAngle);
	}

}

//マウスアクション
function setAngle(event) {
	var mouseX=event.stageX;
	angle=(mouseX-canvasWidth/2)*1/50;
}

//Ticker
function carousel_rotate(event) {

	var count=carouselsplit;

	//加算
	plusAngle +=(angle*createjs.Matrix2D.DEG_TO_RAD);

	//描画データ
	var cx,cy;
	var cAngle=startAngle;
	var nAngle=0;

	//描画位置
	nAngle=Math.PI*2/count;
	var chipflag=1;
	var parts_angle=0;

	//保存POSITION配列
	var posArr=[];
	//SORT用POSITION配列
	var zArr=[];
	//透明度用配列
	var alphaArr=[];
	//scale用配列
	var sclArr=[];
	var sclArr2=[];

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

		//回転
		cAngle +=nAngle;

		cx=Math.cos(cAngle+plusAngle)*radiusX;
		cy=Math.sin(cAngle+plusAngle)*radiusY;

		//alpha-Data計算
		alphaArr[i]=(1+cy/radiusY)/2;

		//配置角度取得
		parts_angle=Math.atan2(cy,cx);
		//スケール、ポジション位置で計算 0-1
		sclArr[i]=(Math.abs(cy)/radiusY);
		sclArr2[i]=(cy/radiusY);
		//伸縮1 Xスケールで向きを変える
		if(scaleType == 'xscale1') {
			var scl=sclArr[i];//Xスケール
		}
		if(scaleType == 'xscale2') {
			var scl=sclArr2[i];//Xスケール2
		}
		//伸縮2 遠近感を付ける
		if(scaleType == 'xyscale') {
			var sclxy=(Math.abs(Math.cos(parts_angle/2-Math.PI/4)/Math.cos(Math.PI))+1)/2;
		}
		//position段階計算
		if(scaleType == 'position') {
			var a_v=1+(cy*0.25)/radiusY;
			posArr[i]=a_v;
		}
		//position段階反転計算
		if(scaleType == 'position2') {
			var a_v=1+(cy*0.25)/radiusY;//position段階
			var scl=sclArr2[i]*a_v;//Xスケール反転

		}
		//sort-DATAを保存
		var id=chip[i].id;
		//オブジェクトで保存
		zArr.push({'id':id, 'position':cy});

		//matrix
		matrix.identity();
		//順序重要
		//位置をずらす
		matrix.translate(cx,cy);

		//伸縮1実行
		if(scaleType == 'xscale1') {
			matrix.scale(scl*stScale,stScale);
		}
		//伸縮1実行B
		if(scaleType == 'xscale2') {
			matrix.scale(scl*stScale,stScale);
		}
		//伸縮2実行
		if(scaleType == 'xyscale') {
			matrix.scale(sclxy*stScale,sclxy*stScale);
		}
		//position段階スケール実行
		if(scaleType == 'position') {
			matrix.scale(posArr[i]*stScale,posArr[i]*stScale);
		}
		//position段階スケール伸縮反転
		if(scaleType == 'position2') {
			matrix.scale(scl*stScale,a_v*stScale);
		}
		//基本スケール実行
		if(scaleType == 'standerd') {
			matrix.scale(stScale,stScale);
		}

		//実行
		matrix.decompose(chip[i]);
		//インナーコンテナ回転デグリー
		innerchip[i].rotation=partsAngle;

	}

	//配列をソート/positionの昇順にsort
	zArr.sort(function(a,b) {
		var x=a.position;
		var y=b.position;
		return x > y ? 1 : -1;}
	);
	//INDEX alpha修正
	for (var i=0; i < zArr.length; i++){
		var idno=zArr[i].id;
		//Index
		carouselContainer.setChildIndex(chip[idno],i);
		//alpha
		if(fadeflag) {
			chip[idno].alpha=alphaArr[idno]+0.2;
		}
		if(!fadeflag) {
			chip[idno].alpha=1;
		}
	}

	//その他の処理 update
	draw_carousel();

}

//base/BitmapFill
function set_baseCircle() {

	//パーツの大きさ
	var parts_w=imageWidth+base_W*2;
	var parts_h=imageHeight+base_W*2;
	//数
	var count=carouselsplit;

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

		//図形用インスタンス配置
		chip[i]=new createjs.Container();
		chip[i].id=i;
		//インナーコンテナ
		innerchip[i]=new createjs.Container();
		//shape
		var shape=new createjs.Shape();
		//ライン処理
		if(base_W > 1) {
			shape.graphics.ss(base_W).s(carouselbackcolor);
		}
		//BitmapFill
		shape.graphics.beginBitmapFill(assets[i]).drawRoundRect(0,0,imageWidth,imageHeight,5);
		shape.regX=imageWidth/2;
		shape.regY=imageHeight/2;
		//陰影
		if(shadow_use) {
			shape.shadow=shadow;//shadow重い
		}
		imgchip[i]=shape;

		//add
		chip[i].addChild(innerchip[i]);
		innerchip[i].addChild(imgchip[i]);
		carouselContainer.addChild(chip[i]);

	}

}

//画像のみ
function set_base_image() {

	//パーツの大きさ
	var parts_w=imageWidth+base_W*2;
	var parts_h=imageHeight+base_W*2;
	//数
	var count=carouselsplit;

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

		//図形用インスタンス配置
		chip[i]=new createjs.Container();
		chip[i].id=i;
		//インナーコンテナ
		innerchip[i]=new createjs.Container();

		/*
		//Rect/あるとちらつく
		var shape=new createjs.Shape();
		//Rect
		shape.graphics.beginFill(carouselbackcolor).drawRect(0,0,parts_w,parts_h);
		shape.regX=parts_w/2;
		shape.regY=parts_h/2;
		*/

		//画像
		var bmp=new createjs.Bitmap(assets[i]);
		bmp.regX=imageWidth/2;
		bmp.regY=imageHeight/2;
		//陰影
		if(shadow_use) {
			bmp.shadow=shadow;
		}
		imgchip[i]=bmp;
		//add
		chip[i].addChild(innerchip[i]);
		innerchip[i].addChild(imgchip[i]);
		carouselContainer.addChild(chip[i]);

	}

}

//reflection画像
function set_base_reflection() {

	//パーツの大きさ
	var parts_w=imageWidth;
	var parts_h=imageHeight;
	//比率
	var ratio=0.5;
	//数
	var count=carouselsplit;

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

		//図形用インスタンス配置
		chip[i]=new createjs.Container();
		chip[i].id=i;
		//インナーコンテナ
		innerchip[i]=new createjs.Container();
		//通常画像
		var bmp=new createjs.Bitmap(assets[i]);
		bmp.regX=imageWidth/2;
		bmp.regY=imageHeight/2;
		imgchip[i]=bmp

		//reflectionコンテナ
		var shadowbox=new createjs.Container();
		//縮尺エレメント画像挿入
		var shadowchips=new createjs.Bitmap(createImgCanvas(imageWidth,imageHeight*ratio,assets[i]));
		//グラフイックグラデ
		var bg=new createjs.Shape();
		bg.graphics.beginLinearGradientFill(["rgba(0,0,0,0)","rgba(0,0,0,1)"],[0,1],0,0,0,imageHeight*ratio).drawRect(0,0,imageWidth,imageHeight*ratio);
		bg.cache(0,0,imageWidth,imageHeight*ratio);
		bg.visible=false;
		//AlphaMaskFilter
		var amf=new createjs.AlphaMaskFilter(bg.cacheCanvas);
		shadowchips.filters=[amf];
		shadowchips.cache(0,0,imageWidth,imageHeight*ratio);
		//配置
		shadowbox.addChild(bg,shadowchips);
		shadowbox.regX=imageWidth/2;
		shadowbox.regY=imageHeight*ratio/2;
		shadowbox.y=imageHeight*(1+ratio)/2;
		shadowbox.scaleY=-1;//上下反転

		//add
		chip[i].addChild(innerchip[i]);
		innerchip[i].addChild(shadowbox,imgchip[i]);
		carouselContainer.addChild(chip[i]);

	}

}

//update
function draw_carousel() {
	stage.update();
}

//progressBar
function progress(event) {
	//loadedのみ効く
	bar_v=event.loaded;
}
//progressbar-tick
//bar_v判定tickを設定(butt round)/90度是正-Math.PI/2
function progressBar_tick(){
	if(bar_v > 0) {
		progressbar.graphics.clear();
		progressbar.graphics.setStrokeStyle(8,"butt").beginStroke("#FF69B4");
		progressbar.graphics.arc(0,0,40,-Math.PI/2,Math.PI*2*bar_v-Math.PI/2);
		progtext.text=Math.floor(bar_v*100);
		stage.update();
	}
}

//loadingShape-tick
function loadingShape_tick(){
	loadingShape.rotation +=5;
}

//tickステージ
function tick(event) {
	stage.update();
}

//VIEWTEXT
function set_text(t) {
	if (text_use=='use') {
		viewtext.text=t;
	}
}

//幅、高さ、画像
function createImgCanvas(w,h,patternimg) {
	//Box
	var canvas=document.createElement("canvas");
	//指定の大きさになる
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.drawImage(patternimg,0,0,w,h);

	return canvas;
}

//色付きcanvasを作る
function createColorCanvas (w,h,c) {
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);
	return canvas;
}

//簡単なLOADING3
function loadingIndicator3 () {

	//graphicのスタイル
	var graphics=new createjs.Graphics();
	graphics.setStrokeStyle(2,"round");//round

	//描画データ
	var alpha_v=1;//透明度
	var alphaback;

	var cx,cy;
	var numNeedles=12;
	var innerR=15;
	var outerR=10;
	var cAngle=-Math.PI/2;
	var nAngle;

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){

		//回転補正
		rotateflag=cAngle -=nAngle;
		//透明度を描画毎に変更
		if (i > 0) {alpha_v -=0.05;}

		//#CCCCCC
		alphaback=createjs.Graphics.getRGB(204,204,204,alpha_v);
		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.beginStroke(alphaback).moveTo(cx,cy);
		cx=Math.cos(cAngle)*outerR;
		cy=Math.sin(cAngle)*outerR;
		graphics.lineTo(cx,cy);

	}
	//Shapeに格納
	var s=new createjs.Shape(graphics);
	return s;
}

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

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

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


CSS

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



/*日本語 createJS122.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;
}

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


 

簡単な説明


easeljs-0.8用に書き換えました


以前のJSでは、インスタンスのX方向のスケール変更が、easeljs-0.8では壊れて正常に機能しませんのでこの部分を修正します。他はほぼ同じです。
内容などはほぼ同じですが、違いは下記ページのものと比較ください。

easeljs-0.7用の記事です

【参照】当方の記事: CreateJS 3D Carousel もどき、Matrix2Dで円周上に配置したインスタンスを回転させる


 

インスタンスのスケール変更など

zuzu

 

1. Matrixクラスの変更で合わなくなった部分を修正した。
2. スケール変化など、Math.PIで計算して合わない部分は別の計算にした。
3. matrix2D.rotate()の使用を止めてrotationを使用するように修正した。
4. 相違などはシミュレーションを参照ください。


以前は外周配置のインスタンスの回転などもMath.PIで計算して、Matrixで実行していたが、今回のMatrix変更で合わなくなったので、インスタンスの回転を別にして外周配置位置移動のみMatrix処理した。
「デモ」のJSでは画像を入れていないが、画像、文字などを配置出来るように、コンテナを2重にしている。
よってこのままで、画像挿入などの出来る雌型として使用可能である。


スケール変化のスタイル

スケール変化のスタイルを以下の様にセットすれば目的の形に変化する。スタイルは6種類。
標準スケール、伸縮1(標準)、伸縮1(反転)、伸縮2(遠近感)、段階スケール、段階スケール反転、より選定できます。
その他の設定はJSの先頭を参照ください。



//スタイル
//standerd/xscale1/xscale2/xyscale/position/position2
var scaleType="position";

//後を透過する false true
var fadeflag=false;

挿入画像の相違とスタイル

スタイルは3種類のうちから選べます。軽く動くように中は単純にしています。
下記の様に分岐していますので、角丸BitmapFill画像、Bitmap画像、Reflection、のいずれかにします。



function carousel_set() {

	略す

	///BitmapFill画像
	set_baseCircle();

	//Bitmap画像のみ
	//set_base_image();

	//reflection/OK
	//set_base_reflection();

	略す

}

Shape、画像を重ねた構造(参考)

set_baseCircleは下記のようにも出来るが、この場合動かした場合にちらつくので1重の構造にした。環境がよければ問題は無いとは思いますが。



//2重の場合、未使用
function set_baseCircle() {

	//パーツの大きさ
	var parts_w=imageWidth+base_W*2;
	var parts_h=imageHeight+base_W*2;
	//数
	var count=carouselsplit;

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

		//図形用インスタンス配置
		chip[i]=new createjs.Container();
		chip[i].id=i;
		//インナーコンテナ
		innerchip[i]=new createjs.Container();
		//Rect
		var shape=new createjs.Shape();
		//RoundRect
		shape.graphics.beginFill(carouselbackcolor).drawRoundRect(0,0,parts_w,parts_h,5);
		shape.regX=parts_w/2;
		shape.regY=parts_h/2;
		//陰影
		if(shadow_use) {
			shape.shadow=shadow;//shadow重い
		}

		//画像
		imgchip[i]=new createjs.Bitmap(assets[i]);
		imgchip[i].regX=imageWidth/2;
		imgchip[i].regY=imageHeight/2;

		//add
		chip[i].addChild(innerchip[i]);
		innerchip[i].addChild(shape,imgchip[i]);
		carouselContainer.addChild(chip[i]);

	}

}

スケール変化のスタイルの追加

zuzuzu

 

● X軸反転の伸縮1(反転)、は遠近感がないので少し違和感があります。そこで、段階スケールにX軸反転を加えてみましたら結構いい感じです。[ シミュレーション ] を参照ください。(2015/03/05)

● position2 として新たに追加しました。「前ページ」のJSには有りません。(2015/03/05追加)



//段階スケール反転計算
if(scaleType == 'position2') {
	var a_v=1+(cy*0.25)/radiusY;//position段階
	var scl=sclArr2[i]*a_v;//Xスケール反転

}

//段階スケール伸縮反転
if(scaleType == 'position2') {
	matrix.scale(scl*stScale,a_v*stScale);
}

陰影の実行

陰影を付けると結構重くなりますので、実際に確認して動作を確かめます。
尚、この「デモ」等では基本的な縮尺を75%で実行していますので、この辺を加味して陰影の幅などを設定します。



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

画像はサムネール用です

原則、画像はサムネール用の小さなものを使用します。大きな画像でも「基本スケール」で調整はできますが、画像が「ザラ」付いたり動作が重くなります。(ブラウザと環境に左右されます)
尚、この「デモ」等では画面に合わせるために、基本的な縮尺を75%で実行しています。



//基本スケール
var stScale=0.75;

CarouselはTicker処理です

CarouselはTicker処理ですから、常にupdateを行っています。
画像、Loading、ProgressBarもTicker処理ですが、update()は行えません。そこで、ここは別途にstage.update()用のTickerを設定して描画させています。
Carousel処理に移行する前に、前のstage.update()用のTickerを削除しています。

stage.update()用のTickerを削除せず、「Carousel、Ticker」のstage.update()処理を行っても問題はないようです。常にstage.updateのTickerは基本的に1つです。


現在の順序


Loading、ProgressBar描画のためにTicker設定、途中削除

//MAIN-Ticker設定
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener('tick',tick);

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

Carouselの描画は最後のdraw_carousel()で実行

//Ticker
function carousel_rotate(event) {

	略す

	//その他の処理 update
	draw_carousel();
}

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



「前ページ」Carouselの基本形。easeljs-0.8用の記事です

【参照】当方の記事: CreateJS 3D風Carousel円周配置のインスタンスを回転させる(easeljs-0.8)

過去の、easeljs-0.7用の記事です。easeljs-0.8では正常に動作しません。

【参照】当方の記事: CreateJS 3D Carousel もどき、Matrix2Dで画像などを回転させる



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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]