こんにちは、広報の坂井です。

10月26日（金）、VASILY DEVELOPERS BLOGが公開されました。
今回のタイトルは“Spring Animationの動きを理解して使いこなす”、担当はフロントエンドエンジニアの茨木です。

f:id:vasilyjp:20171026161751j:plain

さっそくインタビューです

ー今回はどういった記事でしょうか？

Spring Animationというアニメーションの実装方法を紹介した記事です。
Spring Animationとは、Googleが公式に出しているライブラリで、名前の通りバネのように動くアニメーションのことです。これを使うことで、わずか数行のコードで、美しいバウンドのアニメーションを実装することができます。
ただ、この設定には少しコツがなので、そのコツを紹介しています。

ーコツとは、どのようなものですか？

バネは、引っ張って手を離すと振動を始め、だんだん減衰していきますよね。Spring Animationの設定には、実際のバネと同じようにバネの固さや減衰のしやすさを調整する必要があります。
例えば、アニメーションの振動を細かくしたい時は、バネを固くします。しかし物理的に、ただ固さを2倍にしても、振動は2倍にはならないんです。もし速度を2倍にしたければ、2✕2の4倍にしなくてはなりません。
このように、物理を加味した設定方法を紹介しています。

ーなるほど。

次に、振動の減衰についてです。
例えば減衰比を「0」に設定した時、アニメーションは減衰せず、ずっと同じ幅で振動を続けます。この値が大きくなるにつれて減衰していくのですが、「1」になると振動がなくなってしまいます（落ちたきりハネない状態のこと）。
作りたいアニメーションに応じて、適切なものを選んでいく必要があります。

ー面白いですね！！実際に使ってみていかがでしたか？

なめらかで美しいアニメーションになったので、使ってみて良かったと思います。また、動き自体は決して単純ではないのに、わずかなコードで済むため、導入が簡単なのも魅力でした。

ーありがとうございます！