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.3k
anime.jsを導入した話
yutakam80
July 26, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
VS Code Update for GitHub Copilot
74th
2
640
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
890
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
Goで作る、開発・CI環境
sin392
0
230
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.2k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Side Projects
sachag
455
42k
Producing Creativity
orderedlist
PRO
346
40k
Facilitating Awesome Meetings
lara
54
6.4k
Optimizing for Happiness
mojombo
379
70k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
A Tale of Four Properties
chriscoyier
160
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Become a Pro
speakerdeck
PRO
29
5.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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まとめ •軽量ライブラリながら機能は多め •多少複雑なアニメーションも実現可能
•細かな部分のアニメーションを実装したいプロジェクト向け (演出ゴリゴリしたいなら他のライブラリがおすすめ)