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
anime.jsを導入した話
Search
yutakam80
July 26, 2018
Programming
1
2.2k
anime.jsを導入した話
yutakam80
July 26, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
雑に思考を整理する技術と効能
konifar
60
29k
GitHub Copilotのススメ
marcy731
1
200
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4.1k
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
330
エンターテイメント業界で利用されるAWS
demuyan
0
210
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
350
Git Lint
bkuhlmann
4
750
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
250
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
331
56k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Designing for Performance
lara
601
67k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Adopting Sorbet at Scale
ufuk
68
8.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Making Projects Easy
brettharned
108
5.5k
Transcript
Copyright (C) 2013 DeNA Co.,Ltd. All Rights Reserved. Copyright (C)
DeNA Co.,Ltd. All Rights Reserved. July 25, 2018 守⾕ 豊 デザイン本部デザイン戦略部 UI/UXデザイン第⼀グループ anime.jsを導⼊した話
Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 守⾕ 豊 @yutakam80
株式会社ディー・エヌ・エー フロントエンドエンジニア
Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 最近関わったプロダクト ਓੜΛͬͱϙδςΟϒʹ
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Copyright (C) DeNA Co.,Ltd. All Rights Reserved. サービス上で実現したかったこと •ミニマムで実装できること •使いやすいこと
•SVGに対応していること •イケてること
Copyright (C) DeNA Co.,Ltd. All Rights Reserved. anime.jsの採⽤理由 •ファイルサイズが軽い(14KB) •公式のドキュメントがサンプル集になっていてわかりやすい
•アニメーション設定を直感的に書ける •イージングが⼀通り⽤意されている •SVGに対応している
Copyright (C) DeNA Co.,Ltd. All Rights Reserved. アニメーション設定:基本形 anime({ targets:
‘.class’, duration: 1000, left: ‘100px’, easing: ‘easeOutBack’ }) ཁૉ(ཁૉ໊, Ϋϥε໊, ID໊) Ξχϝʔγϣϯʹֻ͚Δ࣌ؒ ΞχϝʔγϣϯରͷϓϩύςΟ Πʔδϯά
Copyright (C) DeNA Co.,Ltd. All Rights Reserved. アニメーション設定:応⽤形 anime({ targets:
[‘.class1’, ‘.class2’], opacity: { duration: 1000, value: 1 easing: 'easeOutExpo' }, rotate: { duration: 1200, value: [180, 360] } }) ྻͰෳͷཁૉΛࢦఆՄೳ ϓϩύςΟ୯ҐͰݸผʹઃఆ͕Մೳ ։࢝ɺऴ͕ྃઃఆՄೳ
Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 導⼊例1 : 連続アニメーション
timeline()を⽤いて、add()で要 素別にアニメーションを指定。 delayで時差を付けた動きを表現 example: https://codepen.io/yutakam80/pen/RBGBOK
Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 導⼊例2 : SVGアニメーション
+ カウントアップ 円グラフをアニメーション update()でカウントアップ example: https://codepen.io/yutakam80/pen/zLZLyj
Copyright (C) DeNA Co.,Ltd. All Rights Reserved. anime.jsまとめ •軽量ライブラリながら機能は多め •多少複雑なアニメーションも実現可能
•細かな部分のアニメーションを実装したいプロジェクト向け (演出ゴリゴリしたいなら他のライブラリがおすすめ)