Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular Animation#1
Search
Kotaro Okuya
January 20, 2018
Technology
0
290
Angular Animation#1
Presentation in ng-fukuoka#2
Angular Animation.
Kotaro Okuya
January 20, 2018
Tweet
Share
More Decks by Kotaro Okuya
See All by Kotaro Okuya
そんな機能あったのかChrome DevTool -Web制作に役立ってほしい-
kotar0
3
490
Project Houdini 将来実装される素敵なAPIたち(Webの話)
kotar0
0
430
Angular + Firebase アプリを作ってみた(途中)
kotar0
0
290
Other Decks in Technology
See All in Technology
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
4k
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
150
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
240
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
0
110
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
270
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
130
JEDAI Databricks Free Editionもくもく会
taka_aki
1
110
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
920
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
990
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
240
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Adopting Sorbet at Scale
ufuk
77
9.4k
The Language of Interfaces
destraynor
158
25k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Navigating Team Friction
lara
187
15k
Docker and Python
trallard
44
3.4k
Become a Pro
speakerdeck
PRO
28
5.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Transcript
Angular Animation #1
奥屋 孝太郎 Kotaro Okuya kotar0
奥屋 孝太郎 Kotaro Okuya kotar0
奥屋 孝太郎 Kotaro Okuya kotar0 H W
こんなアニメーション(インタラクション)いったい どうやってつくるのだ?
None
ぬるぬるしてやがる。。
AngularでのAnimation
AngularのAnimationライブラリ @angular/animations https://github.com/yuyang041060120/ng2-animate
AngularでAnimationする時の注意点 WebAnimation API使ってる(前提にしているので) ポリフィルを 使う。SafariさんとIEさんがお困りになられる。 DSL言語としてAngularで規定された記述法に準拠して、Domを 直接触らないようにするほうが良い。
Demo 今日お見せしてご説明させていただくアニメーション。 1.AngularAnimationライブラリの基本機能について (前編) 2.ルーティング時のアニメーションについて
下準備 //app.module.ts import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations:
[...], imports: [ ... BrowserAnimationsModule ... ], providers: [...], bootstrap: [...] }) app.module.tsにアニメーションに必要なモジュールを追加
アニメーションで使う関数 //example.component.ts import { trigger, // 状態を管理するバインディングを監視する transition, // 状態が遷移する時のアニメーション定義
group, // 複数のアニメーションを実行できる。タイミングは”秒”で指定する。 query, // querySelectorAllと同じく要素を指定出来る。擬似クラスがある(:enter, :leave, :animating, @triggerName, @*, :self) style, // ある状態でのスタイルを定義します。 animate, // アニメーションを行う関数です。 stagger, //複数の要素に次々に同じアニメーションを実行できる ※今日は触れません。 keyframes //cssっぽく途中のスタイル定義を細かく出来る。 ※今日は触れません。 } from '@angular/animations'
画面遷移をしないアニメーション。 要素へのインタラクション追加。 //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
画面遷移するアニメーション //app.component.html <div class="route-container" [@routeAnimation]="getDepth(myOutlet)"> <router-outlet #myOutlet="outlet"></router-outlet> </div> Demo2 articles
article
画面遷移するアニメーション Demo2 //app-routing.module.ts ... const routes: Routes = [ {
path: 'articles', component: ArticlesComponent, data:{depth: 1} }, { path: 'article', component: ArticleComponent, data:{depth: 2}} ]; ... ルーターにdetaで値を渡す事で、ページ遷移のルートでアニメーションを分ける事 ができる。
画面遷移するアニメーション 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)' }))) ...続く
画面遷移するアニメーション 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)' }))), ]), ]), ]) ]
アニメーションに関連するイベント <div (@animationName.start)="animationStarted($event)" (@animationName.done)="animationDone($event)" [@animationName]="state"> Animation element inner contents </div>
コールバックを指定出来る
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
ありがとうございました!