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
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
370
N=1から解き明かすAWS ソリューションアーキテクトの魅力
kiiwami
0
110
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
410
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
16
6.3k
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
10
1.5k
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.5k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
1.1k
OpenID Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
160
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
160
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
370
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
790
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Invisible Side of Design
smashingmag
299
50k
Documentation Writing (for coders)
carmenintech
67
4.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
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
ありがとうございました!