anime.jsがいいらしい

2106b2453a34c3e73972feb1c1a9d52b?s=47 711fumi
January 30, 2017

 anime.jsがいいらしい

We Are JavaScripters! @3rd 発表資料

2106b2453a34c3e73972feb1c1a9d52b?s=128

711fumi

January 30, 2017
Tweet

Transcript

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

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

  3. 緊張 \(^o^)/ 社外で発表するのは はじめて

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

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

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

  7. できること API

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

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

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

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

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

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

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

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

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

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

    https://cssanimation.rocks/jp/principles/
  19. 見た人に「何を感じてもらいたいのか」を 常に頭において考える Is it really necessary? 最後に大事なこと

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