anime.jsがいいらしい

Slide 1

Slide 1 text

Anime.jsがいいらしい 2017/01/30 We Are JavaScripters! @3rd Fumihiro Nakahara

Slide 2

Slide 2 text

株式会社groovesのデザイナー。中原扶見大 @711fumi 現在はエンジニア向け求人サイト「Forkwell Jobs」の開発に携わる。

Slide 3

Slide 3 text

緊張＼(^o^)／社外で発表するのははじめて

Slide 4

Slide 4 text

Webサイトでのアニメーションはもう当たり前 Interface, Information, Story, Decoration, Ad…

Slide 5

Slide 5 text

でも実装するとなると…めんどい It's a bother

Slide 6

Slide 6 text

なので試してみた Lightweight JavaScript animation library https://github.com/juliangarnier/anime

Slide 7

Slide 7 text

できること API

Slide 8

Slide 8 text

・CSSプロパティの変更・transform ・SVG属性・DOM属性・JSオブジェクトのプロパティ Anime.jsで操作できるもの

Slide 9

Slide 9 text

・変更後の値・遅延時間・継続時間・イージング（緩急）パラメータ毎に動きを指定できる

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

・開始時/完了時の値の設定・stop/startなどのアニメーションの操作・SVGのパスに沿ってターゲットを動かすなどなど他にも  いろいろできる

Slide 12

Slide 12 text

うーんでも簡単な(単発の)動きしかできなさそうだしな…別の使うか… Oh, no keyframe function…

Slide 13

Slide 13 text

はやまるな、V2がでそうだぞ https://github.com/juliangarnier/anime/tree/v2.0

Slide 14

Slide 14 text

・Keyframeの定義・TImelineでの順次実行・プロパティの値に functionを渡せるなどなど V2でできそうなこと・SVGのアニメーション・自分でカスタマイズしたイージングを使える

Slide 15

Slide 15 text

便利じゃないか! Feel so nice!

Slide 16

Slide 16 text

というわけでの紹介でした。

Slide 17

Slide 17 text

おまけ：どんな動きにするか考える What kind of animation is good?

Slide 18

Slide 18 text

あえてズレを入れるのがミソ！ウェブのアニメーションを「いい感じ」に魅せるズルいテクニックイケてるアニメーション例はたくさんある https://ics.media/entry/14346 ディズニー社に学ぶ！ HTML/CSSで12個のアニメーション基本原則を完全再現！ https://cssanimation.rocks/jp/principles/

Slide 19

Slide 19 text

見た人に「何を感じてもらいたいのか」を常に頭において考える Is it really necessary? 最後に大事なこと

Slide 20

Slide 20 text

ご静聴ありがとうございました！ Thank you !