anime.js(9):transformを利用した変形

●3D transformアニメ

css3のtransformプロパティを操作して立体的な(以前学んだkete.jsのような)アニメを作成できるか確認してみました。
→参考:CSS3リファレンス- transform
→参考:perspectiveプロパティとtransform:perspective関数の違い
 

・パース

 
cssの対応だけでパースをかけられるか試行錯誤していたのですが、予想以上に難航しました。しかし以下のサンプルを発見してなんとか実現できました。ポイントだったのはperspectiveの設定を回転させる要素ではなくコンテナ側に設定することでした。
→参考:3d perspective & anime.js

.container {
	height: 200px;
	width: 250px;
	perspective: 500px;
}
.box {
	height: 200px;
	width: 250px;
	background-color:#fca;
}

ちなみにコンテナと回転させる要素のwidthの値を揃えないとパースが歪みます。

.container {
	height: 200px;
	width:1000px;
	perspective: 500px;
}
.box {
	height: 200px;
	width: 250px;
	background-color:#fca;
}

しかし親要素の設定なしに実現したいので、さらに試行錯誤しました。perspectiveの初期値と最終地を揃えて以下のように記述することで実現できました。

パースのある回転(2)
http://jquerystudy.info/anime/2_etc/07_pers.html/
var animeObj = anime({
	targets: '.box',
	perspective:[500,500],
	rotateX: 360,
	duration: 6000,
	elasticity: 800,
	autoplay:false
});

 

・基準点

基準点はcssの設定だけで簡単にできました。値には100%以上も設定でき、200%に設定するとサンプルのように要素外を基準点に変形できます。

.box {
	height: 200px;
	width: 250px;
	background-color:#fca;
	transform-origin:50% 200%;
}

 

・skew

skewは問題なく利用できました。

anime({
	targets: '.box',
	skewY: '45deg',
	duration: 1000,
	elasticity: 800,
});

 
おしまい。
次回も続く予定
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


− 3 = 五


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>