drawTrianglesであそぼ3 モーフィングぽい表現 | _level0 - KAYAC Front Engineer Blog

さて、drawTrianglesであそぼの第３回。 今回は、drawTrianglesを使ってモーフィングっぽいアニメーションをさせます。 モーフィングとは絵と絵の間を補間して、スムーズに変化させる映像手法の１つです。 映像の分野では色々な場面で使われているおなじみの手法ですが、 前回、前々回で使ったクラスを応用して、モーフィング「っぽい」動きをさせることができます。 このような感じ。 画像と画像の間がつながっているわけではありませんが、左上を向いた猫がフクロウになる時に こちらに振り返っているような微妙なつながり感があります。 方法 手法を解説しましょう。 モーフィングは、ようするに補間なので「前の画像から今の画像へスムーズに移動しましたよー」ということが わかるようにアニメーションさせればよいということになります。 上記のサンプルで言うと、「猫が梟になる時に、猫がこっちに向き直って変化

[yasu-log]

drawTriangleを使ってモーフィング