anime.jsがいいらしい

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 !

anime.jsがいいらしい

anime.jsがいいらしい

fumink

More Decks by fumink

Other Decks in Technology

Featured

Transcript