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
280
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
2
480
Project Houdini 将来実装される素敵なAPIたち(Webの話)
kotar0
0
400
Angular + Firebase アプリを作ってみた(途中)
kotar0
0
270
Other Decks in Technology
See All in Technology
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
現場で役立つAPIデザイン
nagix
29
10k
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
2
390
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
It's Worth the Effort
3n
184
28k
Designing for humans not robots
tammielis
250
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Code Reviewing Like a Champion
maltzj
521
39k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Fireside Chat
paigeccino
34
3.2k
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
ありがとうございました!