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
720
anime.jsがいいらしい
We Are JavaScripters! @3rd 発表資料
fumink7
January 30, 2017
Tweet
Share
More Decks by fumink7
See All by fumink7
「デザインは反復である」ということをメンバーに理解してもらっておこう - 具体と抽象 -
fumink7
1
5.8k
デザイナーとエンジニアの垣根を超えたフロントエンド開発
fumink7
4
590
Rails開発の中でデザイナーの私はどこまで担当しているのか
fumink7
0
320
(非)デザイナーがUIデザインで困ったらどうするか?
fumink7
1
180
Other Decks in Technology
See All in Technology
「知的単純作業」を自動化する、地に足の着いた大規模言語モデル (LLM) の活用
nrryuya
8
5.8k
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
4
1.3k
AWSやJAWS-UGとの出会いを振り返る
yoyoyopg
1
180
止まらないLinuxシステムを構築する_高信頼性クラスタ入門
koedoyoshida
3
2.3k
Cloud Service Mesh に触れ合う
phaya72
1
300
個人のAWSアカウントをマルチ運用してみた
miura55
2
250
今さら聞けないDocker入門 〜 Dockerfileのベストプラクティス編
devops_vtj
21
6.2k
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
2
410
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
7
1.4k
【基本】データベース設計
oracle4engineer
PRO
2
260
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
3
3.4k
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
1
710
Featured
See All Featured
How to name files
jennybc
65
93k
Code Reviewing Like a Champion
maltzj
515
39k
Embracing the Ebb and Flow
colly
80
4.2k
Adopting Sorbet at Scale
ufuk
69
8.6k
Building Adaptive Systems
keathley
32
1.9k
Being A Developer After 40
akosma
67
580k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
GitHub's CSS Performance
jonrohan
1025
450k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
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 !