Help us understand the problem. What is going on with this article?

Reactのアニメーションを攻略する

More than 1 year has passed since last update.

Reactのアニメーションを攻略する

仕事でReactのアニメーションをするにあたり、
やりたいことを満たすために旅立った冒険記。

やりたいこと

要件

  • 要素の追加・削除時にアニメーション
  • リストではない複数要素を別々に動かす

きもち

  • カジュアルに使いたい
    要件満たすために余計な記述はしたくない。可能な限りシンプルに保ちたい。  

  • DOMに依存したくない
    Universalにしたいので、style弄りはVirtualDOM経由が原則。

  • ロジックで制御したい
    複雑化への対応や保守性を考えると、絶対JSで全てコントロールできた方がよい。

  • 汎用性の高さが欲しい
    適材適所でライブラリを使うのは嫌なので、できるだけシンプルかつ柔軟にしたい。

  • Redux、MobXは使いたくない
    Redux作者もローカルのstateでいいみたいなこと言ってるし、
    わざわざ依存するライブラリを増やしたくない。

  • CSSアニメーションは使いたくない
    CSSだとDOM依存する、ロジック制御できない、のコンボで死亡。

  • 自作したくない
    メンテしたくないので。

先行ライブラリを調査

Reactのアニメーション系ライブラリを調査。

  • react-addons-css-transition-group
    React標準のaddon。
    CSSで簡単なアニメーションをさせるときに使う。
    コンポーネントのマウント・アンマウント時にclassをつけることでアニメーションできる。
    CSSだとロジックで制御できなくてつらい。

  • react-addons-transition-group
    React標準のaddon。
    Reactのライフサイクルイベントを利用して、より自由にアニメーションを制御できる。
    コンポーネントのマウント・アンマウントをフックしてアニメーション処理を書ける。
    ローレベルAPIなのでロジックが冗長になる。

  • react-tween-state
    https://github.com/chenglou/react-tween-state
    簡単にTweenアニメーションができるが、簡単なことしかできない。
    README.mdにリンクされてるLive demoが動かない。
    動かす対象のコンポーネントにmixinでメソッドを追加して使う。
    汎用性は高くないが、その割にカジュアルさがあまりない気がする。
    mixinなので、使うには新しくコンポーネントを作る必要がある。

  • react-animate
    https://github.com/elierotenberg/react-animate
    簡単にTweenアニメーションができるが、簡単なことしかできない。
    onTickでどうにでも出来そうだけど、それでどうにかするとスメルを放ちそう。
    HoCなので、使うには新しくコンポーネントを作る必要がある。

  • react-tweenable
    https://github.com/MandarinConLaBarba/react-tweenable
    react-tween-stateをラップして、もっとカジュアルに使えるようにしたもの。
    react-tween-stateをそのまま使うよりは良いかもしれない。

  • react-imation
    https://github.com/gilbox/react-imation
    アニメーションと、それを制御する機能を提供するライブラリ。
    Timelineコンポーネントで時間を制御できるようになっており、
    それによって複雑なアニメーションにも対応できる。
    READMEを見た感じだとかなりよく出来ているのだが、機能の割に詳細に書かれていない。
    ただ資料不足を差し引いてもスターが少ないのが不思議。

  • react-motion
    https://github.com/chenglou/react-motion
    react-tween-stateと同じ作者で、もっともスターが多い。
    簡単にTweenアニメーションができ、関連ライブラリやDemoが豊富。
    API自体はシンプルながらもリストに動きを付けるのが簡単。
    しかしeasingの種類、delay、durationの指定はできない。
    強力だが、複雑なものを作るには特性を理解して工夫する必要がある。
    また「何秒でアニメーションさせてください」と細かい秒数や
    easingのさせ方が指定される場面では完全に無力。

  • react-gsap-enhancer
    https://github.com/azazdeaz/react-gsap-enhancer
    あのGreenSockをReactで使えるようにしたコンポーネント。
    ReactだとUpdateでDOM壊れるのでそれに対応するために作った(意訳)と書いてある。
    が、TweenMax自体はElementではなくただのobjectでも引数に取れるので、
    GreenSockをそのまま使えば良いのでは感がある。

  • velocity-react
    https://github.com/twitter-fabric/velocity-react
    あのVelocity.jsをReactで使えるようにしたコンポーネント。
    Twitterがメンテしていてスターも多い。
    使い方は直感的で、記述もシンプル。人気の理由がわかる気がする。

  • react-web-animation
    https://github.com/bringking/react-web-animation
    ReactでWeb Animations APIを使えるようラップしたコンポーネント。
    Web Animations APIの仕様自体は良いと思っているので使いたいが、
    VirtualDOMで作ってるのに、仕様をRealDOMに寄せるのはイケてない。

  • react-tween
    https://github.com/clari/react-tween
    簡単にTweenアニメーションができるが、簡単なことしかできない。
    I/Fがreact-motionに寄せてあり、物理的な自然な動きをさせたい場合はreact-motionを使い、
    durationやeasingを設定したい場合はreact-tweenを使ってね、ということらしい。
    が、oapcityとheightでeasingを別々に指定する、ということができない。
    またTween.TransitionGroupが要素削除時にアニメーションをつけられるが、
    削除アニメーションが終了後に要素が削除されてないといったイケてない部分が見られる。

要件を満たせるライブラリ

まず「要素の削除時にアニメーション」でだいぶ絞られてしまった。
以下の5つの方法が対応していた。

  • ReactCSSTransitionGroup
    要素の削除時にclassが与えられるので、CSSでアニメーションさせられる。
    カジュアルに使えるが、CSSなのでロジックで制御しにくくDOM依存になる。

  • ReactTransitionGroup
    要素の削除をフックして、callbackで削除処理を終了させる。
    callbackを呼ぶまで自由にDOMを変更できる。
    汎用性は高いが、ローレベルAPIなのでカジュアルに使えない。

  • react-motion
    Motion、StaggeredMotion、TransitionMotionの3つのコンポーネントがある。
    削除時アニメーションに対応しているのはTransitinMotionのみ。
    しかしリストを扱うことを対象としたコンポーネントなので、
    「リストではない複数要素を別々に動かす」という目的にハマらない。

  • react-tween
    Tween、Tween.TransitionGroupの2つのコンポーネントがある。
    削除時アニメーションに対応しているのはTween.TransitionGroupのみ。
    こちらもリストを扱うコンポーネントなので、うまくハマらない。

  • velocity-react
    VelocityComponent、VelocityTransitionGroupの2つのコンポーネントがある。
    削除時アニメーションに対応しているのはVelocityTransitionGroupのみ。
    react-motion、react-tweenと違ってリストを扱うコンポーネントではないので使いやすい。
    ※追記 ソース読んだらVelocity.jsそのままラップしてるので、DOM依存していた。

結論

velocity-reactが求めるものに一番近かったが、DOM依存なのが痛い。
しかし何かを諦めなければいけないので、今回はDOM依存を諦めた。
velocity-reactはよくできてるし、他の人にもオススメ。
ただ要件によって採用するものは変わってくるかなとは思うが、
要件が変わったとしても以下の3つのみ検討すれば良さそう。

  • react-motion
  • velocity-react
  • GreenSockをDOM依存しないように使う

この3つがおすすめ。

react-imatio も結構良さそうなのだが、それならGreenSockで済むという感じもある。
一度、試してみたいライブラリではある。

おまけ: 要素の削除時にアニメーション

結局長いものに巻かれる結果となり、つまらない感じになってしまった。
ただ各コンポーネントがどうやって削除するタイミングをフックしてアニメーションさせているのか気になっていたので調査した。

  • ReactCSSTransitionGroup、ReactTransitionGroup
    ReactTransitionGroupのソースを読むと、componentWillReceivePropsでpropsを乗っ取って前後のchildren状態をマージしている。このとき比較も行い、削除された要素に対してcomponentWillLeaveを実行し、callbackが呼ばれたらchildrenから削除している。

  • react-motion
    TransitionMotionのソースを読むと、削除されないようにする方法は同じくcomponentWillReceivePropsでpropsを乗っ取っている。実際に削除を行う処理は、アニメーションが終了したタイミングをよしなに判断して削除している。

  • react-tween
    Tween.TransitionGroupのソースを読むと、こちらもcomponentWillReceivePropsによるprops乗っ取り。削除はどうやっているのか確認すると、なんと削除を行っていなかった。そのためずっと要素が残り続けてしまう。おまけにアニメーション終了イベントも用意されていないので、こちらで終了をフックして削除することもできない。詰んでる。ひどい。

  • velocity-react
    VelocityTransitionGroupのソースを読むと、ReactTransitionGroupをラップしていた。

つまり、componentWillReceivePropsでpropsを乗っ取る役割を持ったコンポーネントで囲い、
中の要素にアニメーション処理をしている。
したがって、以下のように必ずコンテナを必要とするTreeをとる。

<PropsHackComponent>
  <AnimationComponent/>
  <AnimationComponent/>
  <AnimationComponent/>
<PropsHackComponent>

原理がわかってしまえばあたり前だけど、親要素をはずすのは無理ということが判明。
ということでその辺りは用法を理解して使った方が良い。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away