Weitere ähnliche Inhalte
Ähnlich wie Sencha study (20)
Mehr von Shinsuke Sugita (8)
Sencha study
- 1. Sencha Animatorによる
ゲームアニメーション作成
@shinriyo
【即日満員/増員400名】ザッカーバーグ絶賛ゲーム紹介!【第2回】渋谷
HTML5+CSS3+JS de ゲーム勉強会
2012/05/16 19:30 to 19:50
1
- 3. What is Sencha Animator
Sencha Touchの会社の製品
URL(日本語):http://www.extjs.co.jp/products/animator/
CSS3アニメーションが作成可能(Canvasではない)
Windows、MacOS、iPhone、 Android(本当?)に対応
3
- 9. How to use?
サーバ側/クライアント間でのパラメータ
などを決める
SenchaAnimatorでアニメーションを作る
SenchaAnimatorでHTML(HTML, CSS3, JS)を
吐き出す
吐き出したコードに、Python/Ruby/PHPや
JS/CSSの埋め込み作業
9
- 10. 注意点 19:35
Androidの標準ブラウザでは正しく動かない
SenchaAnimatorのバージョンによって微妙に違うの
でバージョン固定すること
→最新版はHTMLやJavaScriptがコード整形されて
ます
Firefox対応をしたくないときは、オプションのメ
ニューからチェック外すこと。
10
- 12. How to read JavaScript code?(1)
大きくわけて2つ
1.毎回必ず吐き出されるコード
2.毎回違うコード
12
- 13. 1.毎回必ず吐き出されるコード
if (typeof(AN) === 'undefined') {
AN = {};
} 毎回同じコードなので、外部ファイル等にして使いまわすのが良い。
AN.Controller = {
SenchaAnimator上で主に使われる変数や関数などを定義している。
scenes: {}, YUI(Yahoo! User Interface Library)で難読化圧縮できる。
scenesArray: [], ただし、Sencha Animatorのバージョンが変わると微妙に違う。
currentSceneID: -1,
olElement: null,
events: {},
useOrmma: false,
∼∼∼∼∼略∼∼∼∼∼∼∼∼∼∼∼
if (currentState === 'expanded') {
ormma.close();
}
ormma.resize(nextScene.dimensions.width,nextScene.dimensions.height);
}
}
};
13
- 15. 2-1.シーン系
window.addEventListener('load', function(){
var configData = {
parentId: 'AN-sObj-parentOl',
ormma: false,
scenes: [{id: 5,animationCount: 1, duration: 487, dimensions: {height: 320, width: 320, expanded: false, fit: false},
startAction: function(controller,event) {
},
endAction: function(controller) {
controller.goToNextScene();
}
},
赤字が1シーン分の塊
15
- 16. 2-1.シーン系
window.addEventListener('load', function(){
var configData = {
parentId: 'AN-sObj-parentOl',
ormma: false,
scenes: [{id: 5,animationCount: 1, duration: 487, dimensions: {height: 320, width: 320, expanded: false, fit: false},
startAction: function(controller,event) {
},
endAction: function(controller) { id:シーンのidです。
controller.goToNextScene();
}
※ただし、Sencha Animator上でのシーン番号と"数字
}, が同じではない"ことに注意が必要です
16
- 17. 2-1.シーン系
window.addEventListener('load', function(){
var configData = {
parentId: 'AN-sObj-parentOl',
ormma: false,
scenes: [{id: 5,animationCount: 1, duration: 487, dimensions: {height: 320, width: 320, expanded: false, fit: false},
startAction: function(controller,event) {
},
endAction: function(controller) {
animationCount:実際にアニメーションするCSS3の再生数を示しま
controller.goToNextScene();
す。
}
この数分の再生が終えたら次のシーンへ移ります。
},
17
- 18. 2-1.シーン系
window.addEventListener('load', function(){
var configData = {
parentId: 'AN-sObj-parentOl',
ormma: false,
scenes: [{id: 5,animationCount: 1, duration: 487, dimensions: {height: 320, width: 320, expanded: false, fit: false},
startAction: function(controller,event) {
},
endAction: function(controller) {
controller.goToNextScene();
duration:そのシーンでの全体のミリ秒数を示します。
}
},
18
- 19. 2-1.シーン系
window.addEventListener('load', function(){
var configData = {
parentId: 'AN-sObj-parentOl',
ormma: false,
scenes: [{id: 5,animationCount: 1, duration: 487, dimensions: {height: 320, width: 320, expanded: false, fit: false},
startAction: function(controller,event) {
},
endAction: function(controller) {
controller.goToNextScene();
} startActionメソッド:
}, そのシーンの"開始"時に実行されるメソッドです。
Sencha Animatorでの編集の際に上の右の項目にある「Action」の
「End」を「None」にした場合はこのstartActionメソッドがありませ
んが、忘れてしまっても自分で書いても大丈夫です。
引数は2つ。
19
- 20. 2-1.シーン系 19:40
window.addEventListener('load', function(){
var configData = {
parentId: 'AN-sObj-parentOl',
ormma: false,
scenes: [{id: 5,animationCount: 1, duration: 487, dimensions: {height: 320, width: 320, expanded: false, fit: false},
startAction: function(controller,event) {
},
endAction: function(controller) {
controller.goToNextScene();
}
},
endActionメソッド:
そのシーンの"終了"時に実行されるメソッドです。Sencha Animator
での編集の際に「Action」の「End」を「None」にした場合はこの
endActionメソッドがありませんが、 忘れてしまっても自分で書いて
も大丈夫です。引数は1つ。
20
- 21. 2-1.シーン系
endAction: function(controller) {
controller.goToNextScene();
}
controller.goToNextScene()
次のシーンへ移動します。
※「次のシーン」は、現在のidが2の場合、単純に"数字的に次であるidが3のシーンではない"ことに注意してくだ
さい。単純に真下にあるシーンへ移動します。
すべてのシーンを内包したscenesArrayという配列内のインデックス的に次です。
21
- 22. 2-1.シーン系
endAction: function(controller) {
controller.startSceneByID(2);
}
controller.startSceneByID(2)
指定したIDの割り振られたシーンに遷移します。この例ではIDが2のシーンへ遷移します。
※Sencha Animator上でのシーンのIDではないことに注意。
22
- 23. 2-1.シーン系
endAction: function(controller) {
controller.replayScene();
}
controller.replayScene()
現在のシーンを再び再生します。
23
- 25. 2-2.タッチ系
{id: "hoge-5", handler: function(controller) {
// 処理を書く
}
先ほどのシーン系のコードよりも下のあたりに記載されています。
HTMLのdivタグのidに対応しており、今回の場合hoge-5というidに記載されてます。
hoge-5がタッチされると{}中の処理が実行されます。
25
- 26. How to read css3 code?(1)
大きく分けると2種類
1.アニメーションのないCSS
2.アニメーションのあるCSS
26
- 27. アニメーションのないCSS
#AN-sObj-15180 {
-webkit-transform: translate3d(45px, -28px, 0px) rotateX(0deg) rotateY(0deg)
rotateZ(180deg) scale3d(1.3, 0.75, 1);
width: 274px;
height: 258px;
top: 0;
translate、scale ではなく、
left: 0;
translate3d『位置』, scale3d『大きさ』を使ってく
}
れます。
2DなのでZ軸は必要ないが、GPUを使うために
残しましょう。
27
- 28. アニメーションのあるCSS
#AN-sObj-3 {
-webkit-transform: translate3d(206px, 894px, 0px);
divタグ1つにつき5つ作成される
width: 114px;
height: 92px;
border-top: 1px solid rgba(1,14,13,1);
border-right: 1px solid rgba(1,14,13,1);
border-bottom: 1px solid rgba(1,14,13,1);
border-left: 1px solid rgba(1,14,13,1);
-webkit-border-top-left-radius: 500px;
-webkit-border-top-right-radius: 500px;
-webkit-border-bottom-right-radius: 500px;
① ①、④・・・基本的なCSS。最近のバージョンで
-webkit-border-bottom-left-radius: 500px;
background-color: rgba(194,194,194,1);
はなぜか2つに分割さてた。
top: 0;
left: 0; ②・・・実際のアニメーション。①④よりも優先
②
}
@-webkit-keyframes ani-AN-sObj-3 {
0% { 順位が高いので位置を調整したい場合は、こち
-webkit-transform: translate3d(206px, 894px, 0px);
}
らも動かす必要がある。③から呼び出される。
100% {
}
-webkit-transform: translate3d(526px, 929px, 0px); 名前は『ani-AN-sObje-数字』だが、昔のバー
}
.run #AN-sObj-3 {
ジョンは違った。
-webkit-animation-name: ani-AN-sObj-3;
-webkit-animation-duration: 1.188s;
-webkit-animation-delay: 0s;
-webkit-animation-fill-mode: both;
③ ③・・・シーンが表示された時に実行される
}
⑤・・・シーンとシーンの間でのチラツキ防止
#AN-sObj-3 {
}
-webkit-transform: translate3d(526px, 929px, 0px);
④ 用。シーン感で一瞬表示変なのがされてしまう
.restart #AN-sObj-3 {
場合はここを疑う!opacity:0で消す。
⑤
-webkit-transform: translate3d(206px, 894px, 0px);
} 28
- 29. 先ほどの③についてより細かく
.run #AN-sObj-3 {
-webkit-animation-name: ani-AN-sObj-3;
-webkit-animation-duration: 1.188s;
-webkit-animation-delay: 0s;
-webkit-animation-fill-mode: both;
}
-webkit-animation-duration
実際のアニメーションの実行時間(全体の時間)です。
※0の場合を除いて、単位の「s」は必ず忘れないようにしてください。
-webkit-animation-delay
実際のアニメーションの待ち時間です。
※delayは信頼できないので0になるようにアニメーションを作ります。
後述します。
29
- 31. CSSのハマりどころ
.restart #AN-sObj-15180 {
-webkit-transform: translate3d(45px, -28px, 0px) rotateX(0deg) rotateY(0deg)
rotateZ(180deg) scale3d(1.3, 0.75, 1);
opacity: 0;
}
一瞬表示されてしまう場合は、.restartを疑う!
opacityを0にして消す。
31
- 32. CSSのハマりどころ
delayは実行の時間がまちまちなので、信頼しない!特にパラパラア
ニメを作成するときに目立つ
delay:1s; duration:1s;
× 1秒待って、全体1秒
のアニメ
0% 100%
delay:0; duration:2s; 待ち時間0!
⃝ この間,opacityを0
代わりに、全体2秒のアニメ
で透明時間を1秒にする
0% 50% 100%
32
- 33. で、実際どうやるの?
×
SenchaAnimator上でこのように作っておく
1sはopacityを100%に
⃝
0sにも●をうつ! 0s∼0.99sはopacityを0%に
33
- 35. How to read HTML code?(1)
<ol>タグがシーン全体を取り囲んでいる。
<li>タグが1シーンの単位。
<ol id="AN-sObj-parentOl">
<li id="AN-sObj-scene-id-0" >
<div class="AN-sObj-stage">
<div id="AN-sObj-3"></div>
</div>
</li>
</ol>
OL・・・Ordered Listの略で、順序あるリストを表示する際に使用
LI・・・List Itemの略で、リストの項目を記述する際に使用
35
- 36. How to read HTML code?(2)
基本的に「AN-sObj-数字」のIDが付く。
画像の場合、「AN-sObj-val-数字」が親タグに付くこともある。
<div class="AN-Object" id="AN-sObj-15180">
<div id="AN-sObj-val-15180">
<img src="assets/bg_scroll2.png" />
</div>
</div>
OL・・・Ordered Listの略で、順序あるリストを表示する際に使用
LI・・・List Itemの略で、リストの項目を記述する際に使用
36
- 37. HTMLのハマりどころ
<div id="AN-sObj-3"></div>
CSSアニメーションに関連づいたHTMLタグをうっかり消すと動かなくなる!
どうしても消したいときは、 AN-sObj-3のCSSを同時に削除する。
「.run AN-sObj-3」、「.restart AN-sObj-3」は必ず消し。「# AN-sObj-3」も消
して良い。
scenes: [{id: 5,animationCount: 10-1, duration: 487, dimensions: {height: 320,
width: 320, expanded: false, fit: false},
さらに、対応するJSのシーンからanimationCountを1減らす。
37
- 38. 学習やQ&A
公式フォーラム(Sencha Animator Help & Discussion)
http://www.sencha.com/forum/forumdisplay.php?64-Sencha-Animator-Help-amp-
Discussion
↑ここに聞けばarnebechさんが答えてくれます。(英語)
「Sencha Animator Feature Requests」で欲しい機能リクエストも。
CSS3でFlash並みアニメが作れるSencha Animator
http://ascii.jp/elem/000/000/646/646400/
38
Hinweis der Redaktion
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n