Web上でアニメーションを描くのはとても面倒です。一度表示するだけであればこだわったリッチな描画も可能ですが、アニメーションとなると話が変わってきます。Canvasで描画している場合は、その内容を消す操作が必要です。 文字が揺れるようなアニメーションを実現したかったらcurvejsを使ってみると良さそうです。

curvejsの使い方

利用例です。

さらに揺れる例。

デモを見る限り、シンプルに実装できる訳ではなさそうです。それなりにコーディングしなければならないのですが、それでも一から実装するのに比べるとコーディング量は減らせるでしょう。特にCanvas操作はDOMとは全く異なるのでcurvejsのようなライブラリを使う価値がありそうです。

curvejsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

curvejs AlloyTeam/curvejs: Made curve a dancer in HTML5 canvas - 魔幻线条