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
1k
チームを前に進めるデザイン 〜あなたがやること、すべてはデザイン〜
fumink7
0
51
「デザインは反復である」ということをメンバーに理解してもらっておこう - 具体と抽象 -
fumink7
1
6.3k
デザイナーとエンジニアの垣根を超えたフロントエンド開発
fumink7
4
620
Rails開発の中でデザイナーの私はどこまで担当しているのか
fumink7
0
340
(非)デザイナーがUIデザインで困ったらどうするか?
fumink7
1
200
Other Decks in Technology
See All in Technology
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.9k
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
440
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
390
サンドボックス技術でAI利活用を促進する
koh_naga
0
200
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
Practical Agentic AI in Software Engineering
uzyn
0
110
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
400
「Linux」という言葉が指すもの
sat
PRO
4
130
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.8k
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Balancing Empowerment & Direction
lara
3
620
Become a Pro
speakerdeck
PRO
29
5.5k
Making Projects Easy
brettharned
117
6.4k
Designing for humans not robots
tammielis
253
25k
How to train your dragon (web standard)
notwaldorf
96
6.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
How STYLIGHT went responsive
nonsquared
100
5.8k
Navigating Team Friction
lara
189
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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 !