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
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
510
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
9.3k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
630
AIともっと楽するE2Eテスト
myohei
4
1.5k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5k
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
Goで作る、開発・CI環境
sin392
0
230
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
110
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
680
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
160
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Making Projects Easy
brettharned
116
6.3k
Faster Mobile Websites
deanohume
307
31k
Balancing Empowerment & Direction
lara
1
430
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Designing for humans not robots
tammielis
253
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Typedesign – Prime Four
hannesfritz
42
2.7k
Embracing the Ebb and Flow
colly
86
4.7k
A designer walks into a library…
pauljervisheath
207
24k
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まとめ •軽量ライブラリながら機能は多め •多少複雑なアニメーションも実現可能
•細かな部分のアニメーションを実装したいプロジェクト向け (演出ゴリゴリしたいなら他のライブラリがおすすめ)