Flutterのアニメーションにおけるlerpメソッド

はじめに

Flutterのアニメーションについて勉強しようと「“The Boring Flutter Development Show” で取り上げられたアニメーションを様々な方法で書きながら解説」という記事を読んでいました。

その中でこのようなコードが書かれていたのですがよくわからなかったので調べてみました。

@override
Color lerp(double t) {
    if (t < 0.5) {
      return Color.lerp(begin, middle, t * 2);
    } else {
      return Color.lerp(middle, end, (t - 0.5) * 2);
    }
}

lerpとは

lerpという単語をGoogleで調べてみると、「Linear interpolation」の略だということが判明しました。

Unityにもlarp関数というものがあるらしく、線形補間で2つのものの間を補完するときに使うみたいです。

Tweenにbeginとendを渡してアニメーションするといい感じになってくれるのはこのlerpメソッドがよしなにやってくれてるようです。

実際に使ってみる

lerpメソッドを使ったデモを用意しました。

ボタンをクリックするたびに色が変化していきます。

See the Pen JjYzOzy by うぃむ@謳って⤴謳って⤴雲の上ぇぇええ☁🥰 (@wim_web) on CodePen.

色が変化するコードはボタンの onPressed のなかにあります。

ここで重要なのがlerpメソッドで、lerpメソッドは3つの引数をとります。

lerp(start, end, t);

startとendを使用して線形補間をしており、tで取得する値を決めています。

t = 0 だとstartの値が取得でき、t = 1 だとendの値がとれます。
なので、t = 0.5 だとstartとendの中間の値を取得することができます。

デモではボタンを押すことでtに値を0.1ずつ足していくことで Colors.blue から Colors.red まで少しずつ変化させています。

10回ボタンを押せば t = 1 になってend(Colors.red)と全く一緒になるかというとデモの通りなりません。
ここは推測なのですが小数点による丸め誤差などが影響していると思われます。

なので、 t += 0.1 の箇所を t++ を変えて実行してみると一緒の値になることが確認できるかと思います。

上のデモではColorクラスのlerpメソッドを使用しましたが、アニメーションに指定できる型（EdgeInsetsなど）のそれぞれにlerpメソッドが定義されていて、それぞれにあった補完をしてくれるようになっています。

コードの解説

最初にわからなかったコードを読み解いていきます。

@override
Color lerp(double t) {
    if (t < 0.5) {
      return Color.lerp(begin, middle, t * 2);
    } else {
      return Color.lerp(middle, end, (t - 0.5) * 2);
    }
}

ここでとりあげたlerpメソッドは Tween<T> のlerpメソッドなので引数はtしかとりません。（begin, endはすでにコンストラクタで渡されているため）

tの値によって返す値を変化させればアニメーションをカスタムすることができます。

ここではbeginからendに変化させるときに、真ん中でmiddle(Colors.white)を経由させます。

tの値は0〜1になります。

begin -> middle -> end

  0   ->  0.5   ->  1

まずbeginからmiddleに変化させるコードが Color.lerp(begin, middle, t * 2) になります。

tを2倍にしないとColor.lerpの第三引数にわたる値が0〜1にならなくなるためです。

middleからendに変化させるコードが Color.lerp(middle, end, (t - 0.5) * 2) です。

こうすることでbegin, end間をそのままアニメーションさせるのでなく、middleを挟んだアニメーションにすることができます。