Angular Animation#1

Presentation in ng-fukuoka#2
Angular Animation.

Transcript

1. Angular Animation #1
2. 奥屋 孝太郎 Kotaro Okuya kotar0
3. 奥屋 孝太郎 Kotaro Okuya kotar0
4. 奥屋 孝太郎 Kotaro Okuya kotar0 H W
5. こんなアニメーション(インタラクション)いったい どうやってつくるのだ？
7. ぬるぬるしてやがる。。
8. AngularでのAnimation
9. AngularのAnimationライブラリ @angular/animations https://github.com/yuyang041060120/ng2-animate
10. AngularでAnimationする時の注意点 WebAnimation API使ってる(前提にしているので) ポリフィルを 使う。SafariさんとIEさんがお困りになられる。 DSL言語としてAngularで規定された記述法に準拠して、Domを 直接触らないようにするほうが良い。
11. Demo 今日お見せしてご説明させていただくアニメーション。 1.AngularAnimationライブラリの基本機能について (前編) 2.ルーティング時のアニメーションについて
12. 下準備 //app.module.ts import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [...], imports: [ ... BrowserAnimationsModule ... ], providers: [...], bootstrap: [...] }) app.module.tsにアニメーションに必要なモジュールを追加
13. アニメーションで使う関数 //example.component.ts import { trigger, // 状態を管理するバインディングを監視する transition, // 状態が遷移する時のアニメーション定義 group, // 複数のアニメーションを実行できる。タイミングは”秒”で指定する。 query, // querySelectorAllと同じく要素を指定出来る。擬似クラスがある(:enter, :leave, :animating, @triggerName, @*, :self) style, // ある状態でのスタイルを定義します。 animate, // アニメーションを行う関数です。 stagger, //複数の要素に次々に同じアニメーションを実行できる ※今日は触れません。 keyframes //cssっぽく途中のスタイル定義を細かく出来る。 ※今日は触れません。 } from '@angular/animations'
14. 画面遷移をしないアニメーション。 要素へのインタラクション追加。 //app.component.ts @Component({ ... 　animations: [ trigger('popFadeIn', [ state('hide', style({ opacity:0, transform: 'translateY(10%) scale(0.98)'})), //hideの状態を定義 state('show', style({ opacity:1, transform: 'translateY(0) scale(1)' })), //showの状態を定義 transition('hide => show' , animate('300ms cubic-bezier(.12,.79,.57,.95)')), //hideからshowへの状態遷移を定義 transition('show => hide' , animate('300ms cubic-bezier(.12,.79,.57,.95)')) //showからhideへの状態遷移を定義 ]) ]}) animate() ease-in, ease-out などでも記述出来る。 Demo1
15. 画面遷移するアニメーション //app.component.html <div class="route-container" [@routeAnimation]="getDepth(myOutlet)"> <router-outlet #myOutlet="outlet"></router-outlet> </div> Demo2 articles article
16. 画面遷移するアニメーション Demo2 //app-routing.module.ts ... const routes: Routes = [ { path: 'articles', component: ArticlesComponent, data:{depth: 1} }, { path: 'article', component: ArticleComponent, data:{depth: 2}} ]; ... ルーターにdetaで値を渡す事で、ページ遷移のルートでアニメーションを分ける事 ができる。
17. 画面遷移するアニメーション Demo2 //app.component.ts ... @Component({ animations: [ trigger('routeAnimation', [ transition('1 => 2', [ style({height: '!'}), query(':enter', style({ transform: 'translateX(100%)'})), query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })), group([ query(':leave', [ animate('0.3s cubic-bezier(.35,0,.25,1)', style({ transform: 'translateX(-100%)' })), ]), query(':enter', animate('0.3s cubic-bezier(.35,0,.25,1)', style({ transform: 'translateX(0)' }))) 　　　　　　　...続く
18. 画面遷移するアニメーション Demo2 ...続き transition('2 => 1', [ style({ height: '!' }), query(':enter', style({ transform: 'translateX(-100%)' })), query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })), group([ query(':leave', [ animate('0.3s cubic-bezier(.35,0,.25,1)', style({ transform: 'translateX(100%)' })), ]), 　query(':enter', animate('0.3s cubic-bezier(.35,0,.25,1)', style({ transform: 'translateX(0)' }))), ]), ]), ]) ]
19. アニメーションに関連するイベント <div (@animationName.start)="animationStarted($event)" (@animationName.done)="animationDone($event)" [@animationName]="state"> Animation element inner contents </div> コールバックを指定出来る
20. AirBnBの アニメーションは 多分これでいける のでは？ img.A txt.A txt.B img.B img.A Potition:absolute; Top:0; left:0; Width:100vw; opacity:0 text.A translateY(400%) img.B Opacity:0 => 1 text.B Opacity:0 => 1 Transform: translateY(-10%) => translateY(0) Animation.done コンポーネント変更(遷移) A.component.ts img.a txt.a B.component.ts img.b txt.b A.component.ts B.component.ts Done Start
21. ありがとうございました！