Web画面のエフェクトについて

CBPosted by

最近のデザインフレームワークを見ると、エフェクトを多用しているものが多くなってきている。エフェクトなしとエフェクトありを比較した場合、ほぼ間違いなくエフェクトありの方が印象がよいし、手間をかけて作りこんでいる印象となる。それを考えるとエフェクトがかかるデザインフレームワークを使ったほうが利用者に好印象を与えるものが手軽に作れる。

デザインフレームワークにないエフェクトを作るのは大変であろうと考えるエンジニアは多いと思われるが意外と簡単にエフェクトが自作でも作れる。もちろん一から作るわけではない。

自作で作る場合適しているツールはCSSアニメーション、Jqueryアニメーション、Velocity.jsの3つがある。デザインフレームワークを使用している場合は内部エンジンとして使用されているものを選択すると手軽にエフェクトを作れる。materializecssなどをフレームワークとして使っている場合はvelocityを使うなど。

エフェクトの基本はCSSで表される状態のFrom、Toを指定すること(現状をFromとする場合はToのみ)、完了するまでに掛ける時間、開始までに待つ時間、そして効果のベジェ曲線の4項目、アニメーションの肝は現実の現象はいきなり動き出して一定速度で動いていきなり止まるといったことはない。例えばエレベーターのように、ゆっくりスタートして速度を上げ速度を落としてゆっくり止まる。これらの動きをパターン化したものがあってこれらのパターンから選んで指定するのがベジェ曲線で、慣れると意外なほど簡単にエフェクトがかけられるようになる。皆さんもぜひ試してみてください。利用者がすごいと思ってくれること間違いなし。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA