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
5.9k
デザイナーとエンジニアの垣根を超えたフロントエンド開発
fumink7
4
600
Rails開発の中でデザイナーの私はどこまで担当しているのか
fumink7
0
320
(非)デザイナーがUIデザインで困ったらどうするか?
fumink7
1
190
Other Decks in Technology
See All in Technology
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
150
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
660
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
120
APIテスト自動化の勘所
yokawasa
7
4.2k
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
180
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
270
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
130
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Six Lessons from altMBA
skipperchong
26
3.5k
Building an army of robots
kneath
302
42k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Statistics for Hackers
jakevdp
796
220k
Gamification - CAS2011
davidbonilla
80
5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Automating Front-end Workflow
addyosmani
1365
200k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
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 !