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
AIともっと楽するE2Eテスト
myohei
8
3k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
効率的な開発手段として VRTを活用する
ishkawa
0
160
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
470
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.1k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1.1k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
200
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Facilitating Awesome Meetings
lara
54
6.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
For a Future-Friendly Web
brad_frost
179
9.8k
Thoughts on Productivity
jonyablonski
69
4.7k
Gamification - CAS2011
davidbonilla
81
5.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Applications with DynamoDB
mza
95
6.5k
Why Our Code Smells
bkeepers
PRO
337
57k
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まとめ •軽量ライブラリながら機能は多め •多少複雑なアニメーションも実現可能
•細かな部分のアニメーションを実装したいプロジェクト向け (演出ゴリゴリしたいなら他のライブラリがおすすめ)