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
740
anime.jsがいいらしい
We Are JavaScripters! @3rd 発表資料
fumink
January 30, 2017
Tweet
Share
More Decks by fumink
See All by fumink
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
チームを前に進めるデザイン 〜あなたがやること、すべてはデザイン〜
fumink7
0
24
「デザインは反復である」ということをメンバーに理解してもらっておこう - 具体と抽象 -
fumink7
1
6.1k
デザイナーとエンジニアの垣根を超えたフロントエンド開発
fumink7
4
600
Rails開発の中でデザイナーの私はどこまで担当しているのか
fumink7
0
330
(非)デザイナーがUIデザインで困ったらどうするか?
fumink7
1
190
Other Decks in Technology
See All in Technology
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
2k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
1.3k
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
140
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
190
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
270
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
13
3.3k
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
700
速くて安いWebサイトを作る
nishiharatsubasa
10
12k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.4k
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
350
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Six Lessons from altMBA
skipperchong
27
3.6k
Designing for Performance
lara
604
68k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
For a Future-Friendly Web
brad_frost
176
9.5k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Optimizing for Happiness
mojombo
376
70k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
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 !