Reactアニメーション事始め

by takanorip

Slide 1

Slide 1 text

React アニメーション事始め Takanori Oki 第1回 React.js 導入事例 @ 弥生

Slide 2

Slide 2 text

目次 • 自己紹介 • 導入 • 主要な実装方とポイント • まとめ

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

自己紹介 • 大木尊紀（ @takanorip ） • フロントエンドエンジニア  （ウェブサイト制作とか） • 株式会社スマートドライブ（2017.06.01~） • 最近の悩み：体重の増加

Slide 5

Slide 5 text

Reactでアニメーション

Slide 6

Slide 6 text

要件・きもち

Slide 7

Slide 7 text

要件・きもち • 実装したいもの • リスト追加、削除時のアニメーション • メニューの開閉など • きもち • シンプルに実装したい

Slide 8

Slide 8 text

普通のアニメーション • CSSアニメーション  （transition、keyframesなど） • jQuery、velocity.jsなどのライブラリを使用 • DOMをゴリゴリいじる感じのやつ

Slide 9

Slide 9 text

Reactのつらみ

Slide 10

Slide 10 text

つらみ • jQuery使えない • DOM参照つらい • DOMをいじるのはVirtualDOM経由

Slide 11

Slide 11 text

実装方法 1. stateを更新する方法 2. react-transition-group 3. ライブラリを使用

Slide 12

Slide 12 text

stateを更新する方法

Slide 13

Slide 13 text

stateを更新する方法 • stateを更新してマルチクラスの付け替え • メニューの開閉などウェブサイトでよくある動きを実装する時使える • React v15.0からDOMのCSSAnimationEvent をトリガーできるようになった

Slide 14

Slide 14 text

Actionを検知 state更新アニメーション classを付け替え Actionを検知 class付け替えアニメーション jQueryとか React

Slide 15

Slide 15 text

要素の追加、削除は苦手 • アニメーションが終わってから要素を削除しないといけない • 自前で実装するのは難しい

Slide 16

Slide 16 text

削除イベント発火アニメーション開始アニメーション終了 DOM削除 DOM追加アニメーション開始アニメーション終了この間DOMは残しておく必要あり

Slide 17

Slide 17 text

react-transition-group

Slide 18

Slide 18 text

react-transition-group • 公式のアドオン • CSSTransitionGroupとTransitionGroup • 以前はReactTransitionGroupと ReactCSSTransitionGroupがあったが、 React v15.5.0で非推奨になってしまった　（使い方などは特に変わらない）

Slide 19

Slide 19 text

CSSTransitionGroup {items}

Slide 20

Slide 20 text

CSSTransitionGroup • CSSアニメーションさせるときに使う • コンポーネントの追加、削除時にclassを  付与する • 簡単にアニメーションできる • ロジック管理できない

Slide 21

Slide 21 text

ライブラリを使用

Slide 22

Slide 22 text

ライブラリを使用 • CSSより複雑な動き表現できる • アニメーションのロジックを管理できる • シンプルに使うことができる

Slide 23

Slide 23 text

主なライブラリ • react-motion • velocity-react • react-animations • react-tween-state

Slide 24

Slide 24 text

ライブラリについて詳しくはこちらの記事を参照！ Reactのアニメーションを  攻略する

Slide 25

Slide 25 text

応用編

Slide 26

Slide 26 text

応用編 • Reduxを使ってアニメーションのロジックを管理する • 複雑なアニメーションもできる • アニメーションをDOMから分離できるので、 TweenMaxなど通常使用しているライブラリを使うこともできるようになる

Slide 27

Slide 27 text

まとめ • Reactとアニメーションは相性悪いけどやりようはたくさんある • ライブラリはそれぞれできることが違うので確認必要 • もっと複雑なアニメーションを実装する時は Redux使って実装する