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
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
アジャイル開発とスクラム
araihara
0
160
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
SCSAから学ぶセキュリティ管理
masakamayama
0
140
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
現場で役立つAPIデザイン
nagix
29
10k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
KATA
mclloyd
29
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
A better future with KSS
kneath
238
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The Cult of Friendly URLs
andyhume
78
6.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
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
ありがとうございました!