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
740
anime.jsがいいらしい
We Are JavaScripters! @3rd 発表資料
fumink7
January 30, 2017
Tweet
Share
More Decks by fumink7
See All by fumink7
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
770
チームを前に進めるデザイン 〜あなたがやること、すべてはデザイン〜
fumink7
0
22
「デザインは反復である」ということをメンバーに理解してもらっておこう - 具体と抽象 -
fumink7
1
6k
デザイナーとエンジニアの垣根を超えたフロントエンド開発
fumink7
4
600
Rails開発の中でデザイナーの私はどこまで担当しているのか
fumink7
0
330
(非)デザイナーがUIデザインで困ったらどうするか?
fumink7
1
190
Other Decks in Technology
See All in Technology
DeepSeek on AWS
hariby
1
200
Larkご案内資料
customercloud
PRO
0
530
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
450
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
120
20250130_『SUUMO』の裏側!第2弾 ~機械学習エンジニアリング編
recruitengineers
PRO
1
810
Ask! NIKKEI RAG検索技術の深層
hotchpotch
12
2.6k
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
840
All you need to know about InnoDB Primary Keys
lefred
0
100
Kubernetesでメールの大量配信をしている話/k8sjp-20250205
hfukamachi
0
340
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
120
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
100
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
1
650
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
For a Future-Friendly Web
brad_frost
176
9.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
KATA
mclloyd
29
14k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Making Projects Easy
brettharned
116
6k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
What's in a price? How to price your products and services
michaelherold
244
12k
Designing for Performance
lara
604
68k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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 !