anime.jsがいいらしい

We Are JavaScripters! @3rd 発表資料

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 !