CORDEA blog

Android applications engineer

Android で Liquid-like な animation を Path#cubicTo で実現する

Dribbble にありがちなスライムのような何かぽよぽよした Animation をどう実現するか

ちなみに特に何かイベントに反応する必要がなければ Lottie で良いと思います

https://raw.githubusercontent.com/CORDEA/Poyo/master/images/slime.gif
https://raw.githubusercontent.com/CORDEA/Poyo/master/images/circle.gif

Path#cubicTo

実現する方法として、結論としてはタイトルにある通り Path#cubicTo を使います
これで Bezier curve を描くことができるので、柔らかい曲線や遷移を実現できます。

以下のような感じで引いていきます。

path.moveTo(0f, 0f)
path.cubicTo(0f, 0f, 0f, 0f, 0f, 0f)
path.cubicTo(0f, 0f, 0f, 0f, 0f, 0f)
path.cubicTo(0f, 0f, 0f, 0f, 0f, 0f)
path.close()

一つ注意点として、cubicTo の x1, y1 は point の左側の control point ではないので、
以下のような曲線を引く時

f:id:CORDEA:20200426121908p:plain:w500


x1, y1 は前の point の右側の control point を指します。

f:id:CORDEA:20200426121946p:plain:w500

作ってみる

これだけだと cubicTo の説明にしかなっていないので、作るときに楽だった方法だけ書いておきます。
まず Sketch や Figma などまぁそのへんの色々を使用して Animation のあたりをつけておきます。
先にあった gif の一番目だとこのような感じで作っていました。

f:id:CORDEA:20200426122611p:plain:w500

f:id:CORDEA:20200426122630p:plain:w500

こうするとだいたい progress 0.0 ~ 1.0 までどのように control point を動かしていけば想定どおりの動きとなるかが見えてきます。
まず progress 0.0 と 1.0 の状態 (もっと状態が複雑ならそれら) を作って、大体出来たらそれを補完するように point を動かします。
やることはこれだけです。

なお、作るときには control point も同じく描画しておくと良いでしょう。今は Android Studio 上で View の preview が見られるので調整作業がかなり楽になります。

f:id:CORDEA:20200426123234p:plain:w500

終わりに

完全な円は書けないので、円から何かするというのは難しいかもしれません。
あと、Animation の見え方が device によってかなり変わると思うので、お仕事でやるなら相当苦しむことになると思います。パフォーマンス的にもとてもおすすめできない。
作るだけならまぁまぁ楽しいので、一回やってみると良いかもしれません。

上の Animation の実装は以下の Repository にあります。とても参考にできない実装ですが興味があれば。

github.com