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
fumink
January 30, 2017
Technology
1
750
anime.jsがいいらしい
We Are JavaScripters! @3rd 発表資料
fumink
January 30, 2017
Tweet
Share
More Decks by fumink
See All by fumink
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
960
チームを前に進めるデザイン 〜あなたがやること、すべてはデザイン〜
fumink7
0
41
「デザインは反復である」ということをメンバーに理解してもらっておこう - 具体と抽象 -
fumink7
1
6.2k
デザイナーとエンジニアの垣根を超えたフロントエンド開発
fumink7
4
620
Rails開発の中でデザイナーの私はどこまで担当しているのか
fumink7
0
340
(非)デザイナーがUIデザインで困ったらどうするか?
fumink7
1
190
Other Decks in Technology
See All in Technology
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
MobileActOsaka_250704.pdf
akaitadaaki
0
130
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
240
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
17k
OPENLOGI Company Profile for engineer
hr01
1
34k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing Experiences People Love
moore
142
24k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
The Language of Interfaces
destraynor
158
25k
Building an army of robots
kneath
306
45k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
It's Worth the Effort
3n
185
28k
Music & Morning Musume
bryan
46
6.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Transcript
Anime.jsがいいらしい 2017/01/30 We Are JavaScripters! @3rd Fumihiro Nakahara
株式会社groovesのデザイナー。 中原 扶見大 @711fumi 現在はエンジニア向け求人サイト 「Forkwell Jobs」の開発に携わる。
緊張 \(^o^)/ 社外で発表するのは はじめて
Webサイトでのアニメーションは もう当たり前 Interface, Information, Story, Decoration, Ad…
でも実装するとなると…めんどい It's a bother
なので試してみた Lightweight JavaScript animation library https://github.com/juliangarnier/anime
できること API
・CSSプロパティの変更 ・transform ・SVG属性 ・DOM属性 ・JSオブジェクトのプロパティ Anime.jsで 操作できるもの
・変更後の値 ・遅延時間 ・継続時間 ・イージング(緩急) パラメータ毎に 動きを指定できる
anime({ targets: 'div', translateX: '13rem', rotate: { value: 180, duration:
1500, easing: 'easeInOutQuad' }, scale: { value: 2, delay: 150, duration: 850, easing: 'easeInOutExpo', }, direction: 'alternate', loop: true }); サンプル http://codepen.io/juliangarnier/pen/MebKJp
・開始時/完了時の値の設定 ・stop/startなどの アニメーションの操作 ・SVGのパスに沿って ターゲットを動かす などなど 他にも いろいろできる
うーんでも簡単な(単発の)動きしか できなさそうだしな…別の使うか… Oh, no keyframe function…
はやまるな、V2がでそうだぞ https://github.com/juliangarnier/anime/tree/v2.0
・Keyframeの定義 ・TImelineでの順次実行 ・プロパティの値に functionを渡せる などなど V2で できそうなこと ・SVGのアニメーション ・自分でカスタマイズした イージングを使える
便利じゃないか! Feel so nice!
というわけで の紹介でした。
おまけ : どんな動きにするか考える What kind of animation is good?
あえてズレを入れるのがミソ! ウェブのアニメーションを「いい感じ」 に魅せるズルいテクニック イケてる アニメーション例は たくさんある https://ics.media/entry/14346 ディズニー社に学ぶ! HTML/CSSで12個のアニメーション 基本原則を完全再現!
https://cssanimation.rocks/jp/principles/
見た人に「何を感じてもらいたいのか」を 常に頭において考える Is it really necessary? 最後に大事なこと
ご静聴ありがとうございました! Thank you !