Dribbble にありがちなスライムのような何かぽよぽよした Animation をどう実現するか
ちなみに特に何かイベントに反応する必要がなければ Lottie で良いと思います
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 ではないので、
以下のような曲線を引く時
x1, y1 は前の point の右側の control point を指します。
作ってみる
これだけだと cubicTo の説明にしかなっていないので、作るときに楽だった方法だけ書いておきます。
まず Sketch や Figma などまぁそのへんの色々を使用して Animation のあたりをつけておきます。
先にあった gif の一番目だとこのような感じで作っていました。
こうするとだいたい progress 0.0 ~ 1.0 までどのように control point を動かしていけば想定どおりの動きとなるかが見えてきます。
まず progress 0.0 と 1.0 の状態 (もっと状態が複雑ならそれら) を作って、大体出来たらそれを補完するように point を動かします。
やることはこれだけです。
なお、作るときには control point も同じく描画しておくと良いでしょう。今は Android Studio 上で View の preview が見られるので調整作業がかなり楽になります。
終わりに
完全な円は書けないので、円から何かするというのは難しいかもしれません。
あと、Animation の見え方が device によってかなり変わると思うので、お仕事でやるなら相当苦しむことになると思います。パフォーマンス的にもとてもおすすめできない。
作るだけならまぁまぁ楽しいので、一回やってみると良いかもしれません。
上の Animation の実装は以下の Repository にあります。とても参考にできない実装ですが興味があれば。