POPSブログ

jQuery transit.jsの使用方法を調べてみました

361

  Category:  jquery2015/07/20 pops 

jquery.transit.js、jQueryプラグインで簡単にCSS3 transitionの記述が、カスタムアニメーション animate() ライクに書けますので、通常の画像を回転させたり拡大させたりと便利です。通常のアニメーションより軽快に動作します。

 

ご注意、IE10以上のモダンブラウザでご覧ください(Chrome推奨)。IE9およびそれ以前のブラウザではご覧になれません。


jQuery transit.jsの使用方法を調べてみました

最近はモダンブラウザにほぼ移行されましたので、少々必要性があり、使用方法を調べて試してみました。まだ主要ブラウザのCSS3対応が完全では有りませんが、表現が多彩に成ります。以下テストおよびサンプルです。
また、Android系の動作は不明です。


1. 最大の特徴は、jquery.transit.jsは実に使い易い。
2. CSS3処理はアニメが軽くスムーズです。(全てでは無いが...)
3. CSS3 transition で回転、3D処理、アニメーションなどが可能に成った。
(今後のブラウザ側の対応次第で、処理できる事が増えて来ると思います)


zu

 

 

[ 目次 ]

 

1. jQuery Transitアニメーション
書式/ 具体的な書き方/ 位置、伸縮、回転/ 回転の原点/ Easing
2. transition()のテスト
基本テスト/ 左右のスライドテスト/ 色々な transition処理
3. rotate3d()処理
3-1 rotate3d変形 1
3-2 rotate3d変形 2 重要
4. 画像分割アニメーションに応用する デモのみ

 

 

jquery.transit.jsの簡単な説明


jQuery Transitアニメーション

▲[ 目次 ]

jquery.transit.jsを利用したアニメーションです。従来のanimate()ではCSS3を扱うのは困難な場合も有りますが、このプラグインを利用しますとコンテンツ画像等を簡単にアニメーション(CSS3 transition)出来ます。


 

jQuery Transitプラグイン、jquery.transit.jsの使用方法

少々必要性があったので、試してみました。以下テストおよびサンプルです。
JSは配布元または、githubから取得できます。各ページに説明などの記載が有りますので読まれるのが良いでしょう。


● 配布元、Web Site: Transit / jquery.transit.min.jsダウンロード可

● githubでのJSのダウンロード : jQuery Transit / jquery.transit.jsダウンロード可

 

書式

書式はanimate()ライクですから判り易い。
但し、XY方向移動の際、position設定のleft top が、CSS3 transitionの x y に成ります。
easingはCSS3のeasingでjQueryとは異なります。transit.jsに内包されています。
新たに、伸縮の scale 回転の rotate 等が利用できます。
他にCSS3の値が数値であって、記述がCSS3規定に合法的であれば有る程度動作するようです。



.transition(options,[duration],[easing],[complete])

animate()の書式と同じです。
jQueryオブジェクト.animate(属性, [,速度] [,イージング] [,コールバック])

速度、イージング、コールバックは省略できます

jQueryオブジェクトに設定するだけ
$('#ID名など')
jQueryオブジェクト.transition(options,[duration],[easing],[complete])

具体的な書き方

具体的には下記の様に書く場合が多いと思います。この辺は自由です。



こちらが記述し易い、functionは下記の様に書く場合が多い

$('#box').transition({translate:[0,0],scale:[1,1]},800,'linear',function(){
	alert("END");
});

------------------------------------------------------------
これでも良い

$('#box').transition({translate:[0,0],scale:[1,1],duration:800,easing:'linear',complete:complete});

function complete(){
	alert("END");
}

例えば「遅延500ミリ秒」後、現在の値より、右60px、下30pxに移動、スケールを2倍に、360度回転、透明度を1に、イージング等率、速度400ミリ秒で変化させます。



コールバックは下記の様にかくのが一般的とおもいますが

$('#box').transition({delay:500,opacity:1,translate:[60,30],scale:[2,2],rotate:360},400,'linear',function(){
	//
});

遅延はjQueryの .delay() を下記の様に記述しても動作しました

$('#box').delay(500).transition({.....})

位置、伸縮、回転

● 位置はpositionでは無く、translateの x y で設定します。



絶対位置、 [ 数値, 数値]、は数値専用
{translate:[60,30]}
または
{x:620,y:30}

文字型で記述するなら px がつきます、角度はdeg
{translate:'620px 30px'}
または
{x:'620px',y:'30px'}

[ 数値, 数値]の形式で書いたほうが式も使えて便利です。translateに限らず、scaleでも使える。



var x=620;
var y=30;
var v=-1;
translate:[x,y]

translate:[x*v,y*v]

translate:[620/2,60/2]

相対位置指定は文字形で記述します。



{translate:'+=620px +=30px'}
または
{x:'+=620px',y:'+=30px'}

● 角度はrotateで設定します。



{rotate:30}
または
{rotate:'30deg'}

● 伸縮はscaleで設定します。



scaleX.scaleYを同時に設定
{scale:[1,1]}
または
{scaleX:1,scaleY:1}

● 値を文字型で記述するなら、単位がつきます



translate:'60px 30px'
rotate:'360deg'
duration:'fast'

easing:'ease'、他'ease-in' 'ease-out' 'ease-in-out' は 'in' 'out' 'in-out'に省略可能
他、'snap' 'linear'、および、カスタム形が利用可能、初期値は'ease'です

● 同一オブジェクトに複数のtransition()処理をする場合
同一オブジェクトなら次の場合、順次 transition()を実行します。


順次実行
$('#box').transition({translate:[60,30]},400)
.transition({scale:[2,2]},400)
.transition({rotate:360},400);

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

これは同時に実行です
$('#box').transition({translate:[60,30],scale:[2,2],rotate:360},400);

● 違うオブジェクトで複数のtransition()処理をする場合
次は同時に transition()を実行します。


違うオブジェクトなので同時実行
$('#box').transition({translate:[60,30]},400);
$('#box2').transition({scale:[2,2]},400);

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

animate()とtransition()の同時実行
$('#box3').animate({'left':100,'top':10},400);
$('#box').transition({scale:[2,2]},400);

animate実行が遅いので、後の処理などで時間調整が必要な場合も有ります

回転の原点など

● 原点

つまり、回転などの中心点になりますが、初期は自動的に中央に設定されます。修正可能です。



指定オブジェクトに % px などで指定します。
$('#box').css({transformOrigin:'50% 50%'});
$('#box').css({transformOrigin:'50px 50px'});

● 3Dの場合の奥行きの深さ

3D変形の場合、奥行きの深さ(消失点の距離)を指定します。
原則では「親要素」に指定する事になっていますが、状況に応じてはアニメーションするそのものに設定も可能です。当然振る舞いも違ってきます。



perspective …… 3D変形の奥行きの深さを指定する(親要素に指定) Google Chrome6(-webkit-) Safari5(-webkit-) ※Google Chromeについては、どのバージョンから対応しているのか調べていません。いずれきちんとブラウザ調査します。
指定オブジェクトに px で指定します

$('#box').css({perspective:'500px'});
$('#box').css({perspective:500});

リファレンス記事などで perspective は「親要素」に指定となっていますが、複数のインスタンスを配置して中心を同一に transform:matrix3d() 処理する場合と思います。
本記事内、rotate3d()処理では「要素」そのものに perspective 設定が多い。


CSS3 transform対応

現在のCSS3 transform対応ブラウザは以下の通りで、Android系は含まれていません。
ブラウザのCSS3対応次第で増えてくるとおもいますが、2015/07 現在は下記のようです。



Here are some CSS3 transformations supported by Transit.
Translate. Rotate. Scale. Skew X. Skew Y. Rotate X. Rotate Y. Rotate 3D.
その他
delay. transform

CSS設定で値が数値のものは、有る程度transformに対応するようです
width. height.など

対応ブラウザ

Android系はアニメーションにバグが多く正式には対応していないそうです。確認は出来ませんがそこそこ動くのでは無いでしょうか...

CSS3 Transitions対応状況はcaniuse.com : CSS3 Transitions



Supported browsers
See caniuse.com's report on CSS transitions. To support iOS4 and below, Transit uses translate3d and scale3d.

IE 10+ Firefox 4+ Safari 5+ Chrome 10+ Opera 11+ Mobile Safari

Easing

jqueryのanmate()ではアニメーション時間を長く取れない事情から、Easingは完全無視してきました。
反して、transition.jsでは処理の違いでアニメーション時間を長く取れますのでEasingを考慮することも可能です。


利用できるEasingの種類は以下の通りです。Easingの「3次ベジェ曲線」はtransition.jsに内包されていますのでそのまま名前を記述すれば利用できます。
実際に動作させても以外と判らないものですから、変化量と時間の関係を図示化しました。これなら多少違いが判るかも知れません。具体的なデモはこちらのサイトが判り易い。[ こうめの"これから使える"jQueryプラグイン デモページ ]


尚、transition()に指定できるEasingは「3次ベジェ曲線」で指定しますので、jQueryのEasingとは異なります。
easeOutBack、easeOutBounceの違いは「SAMPLE 014」「SAMPLE 015」で比較できます。

初期値は ease 、設定なき場合も ease を使用されることになります。



linear		ease		ease-in
ease-out	ease-in-out	snap

easeInCubic	easeOutCubic	easeInOutCubic
easeInCirc	easeOutCirc	easeInOutCirc
easeInExpo	easeOutExpo	easeInOutExpo
easeInQuad	easeOutQuad	easeInOutQuad
easeInQuart	easeOutQuart	easeOutQuart
easeInQuint	easeOutQuint	easeInOutQuint
easeInSine	easeOutSine	easeInOutSine
easeInBack	easeOutBack	easeInOutBack

下記の図はtransition.jsの「ベジェ曲線」を図示化したものです。(見易いように横を長くしています)

easeing

 

Easingの追加

「3次ベジェ曲線」で指定しますから簡単に追加はできますが、作る波形が限られますので上記のものと余り相違は有りません。
「3次ベジェ曲線」は下記のジェネレーターで作れます。カスタムも作れますのでこちらを利用したほうが良い。

【参考】ジェネレーター: CSS EASING ANIMATION TOOL


仮に下記の様な線形を得られたとすれば、カスタムEasingとして使用できます。

keaseing

out
cubic-bezier(.855,.18,.725,1.65)
in
cubic-bezier(.3,-.585,.22,.865)

直接使う
$('#test-elm01').transition({...},800,"cubic-bezier(.855,.18,.725,1.65)",function(){
	//
});

その場で transition.js に追加して使う
$.cssEase.bounceOut='cubic-bezier(0.855,0.18,0.725,1.65)';
$('#test-elm01').transition({...},800,"bounceOut",function(){
	//
});

● タイミング関数 timing-function

【参考】easings.netの記事: timing-function

Easingのことですが、以下、MDN記事の抜粋引用です。


cubic-bezier(x1, y1, x2, y2)
x1, y1, x2, y2
3 次ベジェ曲線を定義する P1 および P2 点の横座標および縦座標の値を示す 数量 です。
x1 および x2 は [0, 1] の範囲にある必要があり、さもないと不正な値になります。


これらの 3 次ベジェ曲線は CSS での使用について正当です。
cubic-bezier(0.1, 0.7, 1.0, 0.1) 4 つの値が [0, 1] の範囲に含まれる、標準的なベジェ曲線。
cubic-bezier(0, 0, 1, 1) 「整数値」は「数量」でもあるので「整数値」を用いても有効です。
cubic-bezier(0.1, -0.6, 0.2, 0) 横軸で負数を用いるのは有効であり、はずむ効果をもたらします。
cubic-bezier(0, 1.1, 0.8, 4) 横軸において 1.0 を超える値も有効です。


カスタムEasingテスト

単にDIV要素(20x20)がある場合です。移動のみ。cubic-bezier(.855,.18,.725,1.65)

● Easeing-Test、下の灰色BOXをクリックください。「右移動」後「遅延」して元に戻ります。


HTML JS CSS


<div id="click-box-item00" class="test-wrap-item">
	<div id="test-elm00" class="test-elm"></div>
</div>

//easeingテスト
$('#test-elm00').css({translate:[0,0],rotate:0,scale:[1,1],'opacity':1});
//easeing登録
$.cssEase.bounceOut='cubic-bezier(.855,.18,.725,1.65)';

$('#click-box-item00').click(function(){
	//移動/easeing直接使用
	$('#test-elm00').transition({translate:[620,0]},800,"cubic-bezier(.855,.18,.725,1.65)",function(){
		//easeing登録を使用
		$('#test-elm00').delay(500).transition({translate:[0,0]},800,"bounceOut",function(){
			//
		});
	});
});

/* test1 */
.test-wrap-item{
position:relative;
display:block;
width:640px;
height:40px;
margin:0;
padding:0;
background-color:#EEEEEE;
cursor:pointer;
}
.test-elm{
position:absolute;
top:10px;
display:block;
width:20px;
height:20px;
background-color:#6496ED;
}

 

CSS3のEasingでは有りませんが、jQueryのEasingのグラフは下記「Easing function」に有ります。参考になさってください。

【参考】easings.netの記事: Easing function


 

transition()処理とanimate()処理の混合

/// transition()処理対象オブジェクトは「GPU処理」で乗っ取られているので、animate()は原則使用しない。///


仮に、下記のHTML構造があり、画像にtransition()処理しているならば、
画像にanimate()処理はダメであり、animate()処理の必要があればラップのDIVならOKなので構造を変えるなりの処置が必要になります。

animate()処理以外ならOKです。「animate()、transition()の混合テスト」参照


<div id="gazou-box" class="papipupepo">
	<div id="gazou-wrap"><img id="gazou" src="pyapyupyo" /></div>
</div>


$('#gazou-wrap').animate({.......},600);
$('#gazou').transition({.......},600);

ラップのDIVの position left をanimate()で移動、中の画像を transition()で scale rotate 伸縮回転します。

下のBOX(画像)をクリックください。(ネエチャンが転げ回ります。ナンかあったのでショウか...)



JS CSS


//wrap-da
$('#gazou-box').click(function(){

	$('#gazou').css({translate:[0,0],scale:[1,1],rotate:0});

	//BOX移動
	$('#gazou').transition({translate:[0,0],scale:[0.5,0.5],rotate:360},600);
	$('#gazou-wrap').animate({'left':400},600,function(){

		$('#gazou').delay(500).transition({translate:[0,0],scale:[1,1],rotate:0},600);
		$('#gazou-wrap').delay(500).animate({'left':0},600,function(){
			//
		});

	});
});

/* wrap-da */
#gazou-box.papipupepo{
position:relative;
display:block;
width:100px;
height:100px;
margin:0;
padding:0;
background-color:#000000;
cursor:pointer;
}
#gazou-wrap{
position:relative;
top:0;left:0;
display:block;
width:100px;
height:100px;
margin:0;
padding:0;
}
#gazou{
margin:0;
padding:0;
}

 

 

animate()、transition()の混合テスト

transition()の使用で、階層によりanimate()等が機能しない場合も有ります。エラーにならない場合が多いですから注意が必要です。
transition()処理する要素、animate()処理する要素と明確に分離したほうが間違いが少ないと思います。
テストで何をしているかはJSを見てください。


右ボタンclickでテストを実行します。テスト実行

あばれる君です。よろしくお願いします。

 

HTML JS


<p>右ボタンclickでテストを実行します。<span id="reset-btn-sum3" class="reset-btn">テスト実行</span></p>
<p class="red" id="slide-text3">あばれる君です。よろしくお願いします。</p>
<div id="slideboxWrap2" class="slide-box-wrap">
	<div id="slideBox2" class="slide-box">
		<div id="slideBox3" class="slide-back"><img src="/main/images/abarerukun.jpg" /></div>
	</div>
</div>
-----------------------------------------------------
var click=false;
var slide_text3=$('#slide-text3');

$('#reset-btn-sum3').click(function(){

	if(click) {return false}
	click=true;

	slide_text3.text("画像取替え、外側が移動します。");
	$('#slideBox3').children('img').attr({'src':"/main/images/lady01.png"});//機能する
	$('#slideboxWrap2').animate({'left':100},400);//機能する

	//css3
	$('#slideBox3').children('img').css({translate:[0,0],rotate:-360,scale:1,opacity:1},400);

	slide_text3.text("transition、delay、画像回転。");
	//transition
	$('#slideBox3').children('img').transition({delay:1000,translate:[0,0],rotate:0,scale:1,opacity:0.5},2000,function(){

		//機能する
		$('#slideBox3').children('img').attr({'src':"/main/images/ana.jpg"});
		//機能する
		$('#slideboxWrap2').animate({'left':300},600,function(){

			slide_text3.text("fadeTo()を実行します。");
			//機能する
			$('#slideBox3').children('img').delay(800).fadeTo(600,1,function(){

				$('#slideboxWrap2').delay(800).animate({'left':0},800,function(){

					slide_text3.text("再度、実行出来ます。あばれる君早退。");
					click=false;
				});
			});
		});

	});

});
-----------------------------------------------------


 

 

transition()のテスト

▲[ 目次 ]

基本的に、簡単なtransition()処理だけになります。animate()がtransition()に変わっただけです。rotate3d()処理は別途下記「rotate3d()処理」にあります。
新しいものに取り組むと色々と泣かされてきましたので、少々徹底的に調べてみます。


1. ページの都合で、多くはデモページに記載しています。
2. 確認のため通常の利用されるだろうHTML構造でサンプルを処理しました。
3. このページの構成上、サンプルがマスクされる部分がありますが、デモページでは正常です。
4. DIV要素の場合、Chromeで最初描画がよくない場合あり。ここでは画像は問題ない。
5. 色々とこれから利用するに何らかの問題が出ないかの複数のテストを行いました。


基本テスト (2-1)

スライド、回転伸縮などを、色々な条件でテストしました。実際のHTML構造の中で利用して問題が無いかなどの確認をかねるものです。基本テストより1つ抜粋表示しています。


単にDIV要素(20x20)がある場合です。初期に translate:[0,0] 設定をしている場合。

● TEST-2、下の灰色BOXをクリックください。「右移動」後「遅延」して元に戻ります。

必要な初期のCSSは設定すべきでしょう。(このデモでは初期CSS設定無しでも正常に動作します)


HTML JS CSS


<div id="click-box-item02" class="test-wrap-item">
	<div id="test-elm02" class="test-elm"></div>
</div>

//2
//css3
$('#test-elm02').css({translate:[0,0],rotate:0,scale:[1,1]});

$('#click-box-item02').click(function(){
	//移動回転
	$('#test-elm02').transition({translate:[620,0],rotate:360,scale:[2,2]},800,function(){

		$('#test-elm02').delay(500).transition({translate:[0,0],rotate:0,scale:[1,1]},800,function(){
			//
		});
	});
});

.test-wrap-item{
position:relative;
display:block;
width:640px;
height:40px;
margin:0;
padding:0;
background-color:#EEEEEE;
cursor:pointer;
}
.test-elm{
position:absolute;
top:10px;
display:block;
width:20px;
height:20px;
background-color:#6496ED;
}

左右のスライドテスト

配置を中央に移動させてテストしました。実際のHTML構造の中で利用して問題が無いかなどの確認を兼ねるものです。左右のスライドテストより1つ抜粋表示しています。


左右のスライド画像 6 (画像に合わせて2重ラップ ) ラップを動かす

ラップが有る場合は、位置指定が楽になります。重要、回転の場合は初期値translate:[0,0]を設定すること。

DIVでは無く画像を入れました。初期のCSS設定が重要なため上とは別にした。(画像100%x100%)

● TEST6、下の灰色BOXをクリックください。左右移動、伸縮、回転、後中央に戻ります。


HTML JS CSS


6
<div id="click-item06" class="click-test-item2">
	<div class="slide-test-wrap3"><div id="slide-elm06" class="slide-test-elm3"><img src="/main/images/lady01s.png" /></div></div>
</div>

//6画像/CSSは別途記載
//重要、回転の場合は初期値translate:[0,0]を設定すること
$('#slide-elm06').css({translate:[0,0],rotate:0,scale:0.2});

$('#click-item06').click(function(){

	//移動
	$('#slide-elm06').transition({translate:[300,0],scale:1},400,function(){

		$('#slide-elm06').css({rotate:0});

		$('#slide-elm06').transition({delay:500,translate:[-300,0],rotate:360},800,function(){

			$('#slide-elm06').transition({delay:500,translate:[0,0],scale:0.2,rotate:0},400,function(){
				//

			});
		});
	});
});

.slide-test-elm2{
display:block;
width:20px;
height:20px;
background-color:#FF1493;
}
.slide-test-wrap3{
position:absolute;
top:-30px;left:270px;
display:block;
width:100px;
height:100px;
}
.slide-test-elm3{
display:block;
width:100px;
height:100px;
background-color:#FF1493;
}
.slide-test-elm3 img{
width:100%;
height:100%;
}

[基本テスト、スライドテスト 関連デモ]

このページに収容できませんので、下記「デモページ」を参照ください。

DEMO-020

 

 

色々な transition処理

頒布サイトなどにあるサンプルとほぼ同様のものであるが、実際のHTML構造の中で利用して問題が無いかなどの確認を兼ねるものです。他で扱っていないサンプルも有ります。


[色々な transition サンプル]

このページに収容できませんので、下記「デモページ」を参照ください。

DEMO-020b

 


 

 

rotate3d()処理

▲[ 目次 ]

現在、ブラウザが全てのCSS3に対処している訳では有りませんので、transit.jsで処理できるものは限定されます。今後ブラウザの対応状況で色々と機能が増えると思います。
rotateX rotateY は上記「色々な transition サンプル」に有りますので、ここでは rotate3d() に付いてテストしてみます。

 

3d

 

rotate3d

matrix3d()を簡略化して角度を与えれば3Dに成る仕組みのようです。簡略されている分処理は粗雑だが、簡単に利用できる利便性があるようです。基本的な概念などは、下記サイトなど参考にして下さい。


【参考】unformedbuilding.comの記事: CSS Transforms についてのメモ 説明図が多く理解し易い

【参考】CSS3リファレンスの記事: CSS3リファレンスtransform:rotate()


unformedbuilding.comの記事より引用

要素を 3D 回転させます。
x, y, z で方向ベクトルを指定し、a で回転の角度を指定します。回転は時計回りに行われます。
回転は transform-origin で指定したポイントを基準に行われまれ、角度の指定は angle 形式で記述します。


rotate3d(数値, 数値, 数値, 回転角度)
つまり
rotate3d(x, y, z, a)

CSS3リファレンスの記事より引用

rotate3d()関数では、最初の3つの数値で[x,y,z]の方向ベクトルを決め、最後に指定する回転角度で時計回りの3D回転を指定します。もし、方向ベクトルが単位長さとなっていない場合には正規化されます。方向ベクトルが正規化できない数値の場合には、回転が適用されません。rotate3d関数による指定は、matrix3d()関数で以下の指定をしたのと同じになるとこのことです。

数値は 1 0 -1 のいずれか、回転角度は 0から360 または-360 の値を設定すれば良いことになる。
XY軸で捻くり回された物体が、Z軸に突き刺さったような状態で回転させた場合に投影された形という事です。Z軸が回転するのではありません。
Z値が1であれば大きく、-1であれば小さくなります。その形状は「奥行きの深さ」perspectiveによって決まります。奥行きが長いということは遠くから見るのと同様に変化が少ない。逆に近づけば変化が大きく、且つ形状も変わります。


とりあえず作ってみます

上の説明では、誰でもマア判りません。理屈は抜きにして実際に実行処理して見ましょう。
0degでは変化はありませんが、回転を与えますと図の様に変化します。

3d-da

 


rotate3d(-1,1,1,-30)

 

何も考えずtransition実行

画像を配置して、その画像に処理します。(表示のみです)

これはまだ動きませんが、画像が余りにも簡単に3D化されました。(思わずシェーしたい心境です)
「連続して」アニメーションする場合に「IEが1回転できない」だけで、指定の角度で表示は出来ますのでこの点は理解ください。

 

 

 

 

 

perspectiveを設定してtransitionを実行する。ただの表示ならCSSでも可能です。

画像の3Dを強調するように設定しています。仮にperspectiveを800-1000にすれば効果は半減します。
0degではナンノ変化もありません。rotate3dは捻くりまわしてナンボのものです。

これは「rotate3d」デモページで「シミュレーション」出来ますのでそちらで確認できます。


//perspective
$('#rotate3d-test-image').css({perspective:'500px'});
//transition
$('#rotate3d-test-image').transition({rotate3d:'-1,1,1,-30deg'});

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

CSSで表示
$('#rotate3d-test-image').css({rotate3d:'-1,1,1,-30deg'});

HTML JS CSS


<div id="rotate3d-test-wrap"><img id="rotate3d-test-image" src="/main/images/pops_lady.jpg" /></div>

//陰影
$('#rotate3d-test-image').css({borderRadius:'10px',boxShadow:'0 0 10px #000'});
//perspective
$('#rotate3d-test-image').css({perspective:'500px'});
//transition
$('#rotate3d-test-image').transition({rotate3d:'-1,1,1,-30deg'});

/*rotate3d-test*/
#rotate3d-test-wrap{
display:block;
width:260px;
height:150px;
margin-left:100px;
padding:0;
}
#rotate3d-test-wrap img{
margin:0;
padding:0;
}

● えらい簡単と思ったら大間違いです。何でも良いなら表示できるが、指定の大きさ角度など「見た目の条件」がついたら、どうアタマを捻くり回そうと傾けようと「思い通りの3D」には成りません。(ここは後で解決します)


● Firefoxの場合厳格ですから、rotate3dの記述ミスなどあれば、途中処理できなく画像消失、エラーが他にも及ぶので危険です。Chrome、IEの場合多少ミスがあっても正常に処理され易い、つまり間違い箇所が判らなくなります。
また、rotate3d() 以前の「文法、記述ミス」なども確認ください。

 

 

rotate3d変形 1

▲[ 目次 ]

3D関連の簡単なサンプルです。その他はデモページに有ります。


● 変形-Test (ClickToggle)
clickでY軸X軸3D回転画像交換します。360はIEダメ

perspectiveの設定位置により違いがあります。状況により結構差があるようですが...
一応、rotate3d処理する要素に perspective を設定をすれば良いようです。


このサンプルは画像にperspective設定
image_elm.css({perspective:'300px'});

画像ラップにperspective設定するとrotateX rotateYは3Dに成りません
rotate3dのY軸傾きも反対になります
$('#photo-box30').css({perspective:'300px'});

rotateX、rotateY、は正常に動作するが、rotate3dがまだ問題である。最後もアニメーションで360度回転させたいが、IEがダメなので

//rotate3d回転180度まで//

「連続して」アニメーションする場合に「IEが1回転できない」だけで、指定の角度で表示は出来ますのでこの点は理解ください。

 

HTML JS CSS


<div id="mtrix-box" class="photo-3d-base3">
	<div id="photo-box30" class="photo-3d3"><img src="/main/images/rotate_image.jpg" /></div>
</div>

var image_elm=$('#photo-box30').children('img');
image_elm.css({perspective:'300px'});

$('#mtrix-box').click(function(){

	image_elm.css({rotateX:0,rotateY:0});

	image_elm.delay(500).transition({rotateY:360},800,function(){

		image_elm.css({rotateY:0});
		image_elm.css({rotateX:0});
		image_elm.delay(200).transition({rotateX:360},800,function(){

			image_elm.css({rotateX:0});

			image_elm.css({rotate3d:'1,1,0,0deg'});
			image_elm.delay(200).transition({rotate3d:'1,1,-1,60deg'},800,function(){
				image_elm.delay(500).transition({rotate3d:'1,1,-1,0deg'},600,function(){
					//
				});
			});

		});
	});
});

/* 変形-Test */
.photo-3d-base3{
display:block;
width:640px;
height:150px;
margin:0;
padding:0;
background-color:#EEEEEE;
overflow:hidden;
cursor:pointer;
}
.photo-3d3{
position:relative;
top:20px;left:50px;
display:block;
width:101px;
height:101px;
margin:0;
padding:0;
}

 

 

● 3D回転変更サンプル click 直接perspectiveを設定。

SAMPLE 020: toggle 問題あり IE.180まで、perspectiveの設定位置により違いは...


このサンプルは親である画像ラップにperspective設定しています
$('#photo-box20').css({perspective:'300px'});//親

画像にperspective設定、このサンプルでは違いが判りません
$('#sample-box20').children('img').css({perspective:'300px'});

clickで3D回転で傾けます。IE、360はダメ。よって180でとめています。

 

HTML JS CSS


<div id="sample-box20" class="sample-box">
	<div id="photo-box20" class="photo-box"><img id="test-3d-image" src="/main/images/testImage101.jpg" /></div>
</div>

//SAMPLE020 3D回転
var item20=$('#sample-box20');
$('#photo-box20').css({perspective:'300px'});//親

//action
item20.click(function(){

	$('#test-3d-image').css({rotate3d:'1,1,1,0deg'});
	$('#test-3d-image').delay(500).transition({rotate3d:'1,1,1,180deg'},1000);
});

.sample-box{
position:relative;
display:block;
width:100px;
height:100px;
margin:0;
padding:0;
border:#CCCCCC 1px solid;
background-color:#000000;
overflow:hidden;
cursor:pointer;
}
.photo-box{
position:absolute;top:0;left:0;
display:block;
width:100px;
height:100px;
margin:0;
padding:0;
}
.photo-box img{
width:100%;
height:100%;
margin:0;
padding:0;
}

 

 

● 3D回転変更サンプル click、中の画像を回転するため 親要素に perspective rotate3d を設定

SAMPLE 021: toggle、perspectiveの設定位置により違いは...


このサンプルは親である画像ラップにperspective設定しています
$('#photo-box21').css({perspective:'300px'});//親

画像にperspective設定、このサンプルでは違いが判りません
$('#sample-box21').children('img').css({perspective:'300px'});

click 3D回転で傾け、中の画像を360度回転します。通常のrotateですからIEでも360度回転はOK

 

回転速度が1Sですから判り難いと思いますが、中の画像は回転角度に応じて3D状態に描画されながら(変化して)回転しています。この様な回転ならばIEでもOKです。


HTML JS CSS


<div id="sample-box21" class="sample-box">
	<div id="photo-box21" class="photo-box"><img id="test-3d-image2" src="/main/images/testImage101.jpg" /></div>
</div>

//SAMPLE021 3D回転
var item21=$('#sample-box21');
$('#sample-box21').css({perspective:'300px'});

//action
item21.click(function(){

	$('#photo-box21').css({rotate3d:'1,1,-1,0deg'});
	$('#test-3d-image2').css({rotate:0});

	$('#photo-box21').delay(500).transition({rotate3d:'1,1,-1,60deg'},800,function(){

		$('#test-3d-image2').delay(200).transition({rotate:360},1000);

	});
});

.sample-box{
position:relative;
display:block;
width:100px;
height:100px;
margin:0;
padding:0;
border:#CCCCCC 1px solid;
background-color:#000000;
overflow:hidden;
cursor:pointer;
}
.photo-box{
position:absolute;top:0;left:0;
display:block;
width:100px;
height:100px;
margin:0;
padding:0;
}
.photo-box img{
width:100%;
height:100%;
margin:0;
padding:0;
}

 

rotate3d変形 2

▲[ 目次 ]

処理の説明図のみ表示しています。詳細は下の「rotate3d 関連記事とデモ」参照ください。

rotate3d

 

最初の「何も考えずtransition実行」の形態のサンプルを実際に動かしてみます。単に表示するのは簡単ですが、一番の問題は、上の図の様に簡単迅速に「自由な形状傾き」に出来るかです。
ページ容量の都合で「デモページ」で処理しますので、詳細説明、デモなどは下記デモページでご覧ください。


[rotate3d 関連記事とデモ] [重要]

このページに収容できませんので、下記「デモページ」を参照ください。

DEMO-020c

 

 


 

画像分割アニメーションに応用する

▲[ 目次 ]

現在、ほぼモダンブラウザに移行しましたので、画像分割アニメーションに応用して見ます。従来と違って

1. 回転が出来る。
2. アニメーションが軽くなった。


[画像分割アニメーション応用デモ]

回転できるのでこれを応用したいが為のTransitionでしたが、便利さに驚き上記の記事内容になってしまいました。
このページに収容できませんので、下記「デモページ」を参照ください。

DEMO-020d

 


 

本ページを書くに次のサイト記事などを参考にしました。

【参考】ascii.jpの記事: CSS3アニメーションが簡単に書けるjQuery Transit

【参考】yoheim.netの記事: CSS3のTransitionを使ったアニメーションが簡単に実現できるJSライブラリ

【参考】unformedbuilding.comの記事: CSS Transforms についてのメモ

【参考】CSS3リファレンスの記事: CSS3リファレンスtransform:rotate()

【参考】11neko.comの記事: 初心者の為のtransitionについてのまとめ

【CSS3 Generator】ds-overdesign.com : CSS3 rotate3d Generator

 



間違いなどありましたらご容赦ください。以上です。

 


[ この記事のURL ]


タグ:css3 , Transition , jquery

 

ブログ記事一覧

年別アーカイブ一覧



[1]