Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Animation#1

Angular Animation#1

Presentation in ng-fukuoka#2
Angular Animation.

Kotaro Okuya

January 20, 2018
Tweet

More Decks by Kotaro Okuya

Other Decks in Technology

Transcript

  1. 下準備 //app.module.ts import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations:

    [...], imports: [ ... BrowserAnimationsModule ... ], providers: [...], bootstrap: [...] }) app.module.tsにアニメーションに必要なモジュールを追加
  2. アニメーションで使う関数 //example.component.ts import { trigger, // 状態を管理するバインディングを監視する transition, // 状態が遷移する時のアニメーション定義

    group, // 複数のアニメーションを実行できる。タイミングは”秒”で指定する。 query, // querySelectorAllと同じく要素を指定出来る。擬似クラスがある(:enter, :leave, :animating, @triggerName, @*, :self) style, // ある状態でのスタイルを定義します。 animate, // アニメーションを行う関数です。 stagger, //複数の要素に次々に同じアニメーションを実行できる ※今日は触れません。 keyframes //cssっぽく途中のスタイル定義を細かく出来る。 ※今日は触れません。 } from '@angular/animations'
  3. 画面遷移をしないアニメーション。 要素へのインタラクション追加。 //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
  4. 画面遷移するアニメーション Demo2 //app-routing.module.ts ... const routes: Routes = [ {

    path: 'articles', component: ArticlesComponent, data:{depth: 1} }, { path: 'article', component: ArticleComponent, data:{depth: 2}} ]; ... ルーターにdetaで値を渡す事で、ページ遷移のルートでアニメーションを分ける事 ができる。
  5. 画面遷移するアニメーション 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)' })))        ...続く
  6. 画面遷移するアニメーション 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)' }))), ]), ]), ]) ]
  7. 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