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 !