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
fumink7
January 30, 2017
Technology
1
730
anime.jsがいいらしい
We Are JavaScripters! @3rd 発表資料
fumink7
January 30, 2017
Tweet
Share
More Decks by fumink7
See All by fumink7
「デザインは反復である」ということをメンバーに理解してもらっておこう - 具体と抽象 -
fumink7
1
6k
デザイナーとエンジニアの垣根を超えたフロントエンド開発
fumink7
4
600
Rails開発の中でデザイナーの私はどこまで担当しているのか
fumink7
0
320
(非)デザイナーがUIデザインで困ったらどうするか?
fumink7
1
190
Other Decks in Technology
See All in Technology
The Rise of LLMOps
asei
5
1.2k
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
380
The Role of Developer Relations in AI Product Success.
giftojabu1
0
120
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
170
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.6k
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
180
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
5
540
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
120
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
290
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
150
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
243
12k
GitHub's CSS Performance
jonrohan
1030
460k
4 Signs Your Business is Dying
shpigford
180
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Agile that works and the tools we love
rasmusluckow
327
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
730
Happy Clients
brianwarren
98
6.7k
It's Worth the Effort
3n
183
27k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Statistics for Hackers
jakevdp
796
220k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
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 !