お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

錯視?!を利用したかんたんアニメーション ①

どーも、okokです。クリアな見た目と使い勝手を共存させるマテリアルデザイン!このマテリアル(物質)としての「アニメーション」はどんどん普及してきそうですねぇ。そんなアニメーションをつくるためのヒントを映像制作のノウハウから披露させてもらいますね。

 

あくまでヒントです・・・。さて、なんとか効果とか現象名とかは説明できないけど「これって錯視っぽくない?」というなんとも曖昧なところでこんなタイトルをつけてしまいましたので、まずは、ホンモノです!ホンモノの錯視ってやつです!やっぱ度肝を抜かれるくらいガツン!ときますね。

回って見えるけど

こちらのGIFはたった2枚の画像を交互に表示しただけで回転はしてません。そう見えるだけです。なので人によっては時計回りだったり、反時計回りします。

 

今回紹介する方法は、これよりもだいぶマイルドになりますよ。どちらかというと作画上の演出である「コマ抜き」に近いテクニックで、その完全なる手抜き版になります。

 

◆ ○の動きは同じなのに、少しの工夫でモーションが変化してるようにみえる!!・・・かもしれない。

 

錯視1_1

①.上から下へ小さくなりながら移動しています。動き方は全て等間隔になっています。

 

さて、この①をもとに説明していきますね。○の動きはベタばりと言ったりしますが、この動きの設定は変えずに、モーションを変化させてみましょう。

 

錯視1_2

②.①の○の動きに残像効果が残る(瞬きをするとわかりやすいかも)色で塗りつぶし、○の連続した動きを一瞬遮断する。

 

本当は色を反転させるくらいしないと残像効果も薄いのですが、現実的には「反転」はあまり受け入れられないと思いましたので、このようにしました。それでも①と同じはずの動き方が、なんか、はじかれたような動きに見えませんか?この気のせいが「これって錯視っぽくない?」って思ったのですが・・・。

 

錯視1_3

③.①の○の連続した動きを遮断するものを移動させています。

 

たしかに②の方法はなかなか使う場面がないとは思います。ので、一瞬遮断するものを動かしてみました。たぶん、②よりはスムーズに、①よりはスピードにも変化があらわれたように感じられると思いますが、どうでしょうか?

 

複雑な設定はしたくないし、なんとなくそんな風にみえるからいいじゃないか!と思っていただけたら幸いです。次回はもうちょっとがんばってみますので、お楽しみに!

コメントをどうぞ

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


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00