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.4k
anime.jsを導入した話
yutakam80
July 26, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
CSC305 Summer Lecture 12
javiergs
PRO
0
130
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
1
310
ProxyによるWindow間RPC機構の構築
syumai
1
260
Kiroで始めるAI-DLC
kaonash
2
500
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
110
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
2
990
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
0
110
パスタの技術
yusukebe
1
550
Improving my own Ruby thereafter
sisshiki1969
1
140
私の後悔をAWS DMSで解決した話
hiramax
4
180
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
230
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
4 Signs Your Business is Dying
shpigford
184
22k
Docker and Python
trallard
45
3.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Scaling GitHub
holman
463
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Balancing Empowerment & Direction
lara
3
610
Site-Speed That Sticks
csswizardry
10
800
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まとめ •軽量ライブラリながら機能は多め •多少複雑なアニメーションも実現可能
•細かな部分のアニメーションを実装したいプロジェクト向け (演出ゴリゴリしたいなら他のライブラリがおすすめ)