Posted at

フロントエンド演出:板をキラっと光らせる

More than 1 year has passed since last update.


演出の雰囲気を紹介する記事です

前回の記事「フロントエンド演出:物体に弾力をあたえる」から時間がたってしまいましたが、また1つ演出ネタをまとめました:bow_tone1:

特にソースコードなどは紹介しません。JSでもCSSでも使えるように雰囲気をお伝えできればと思います。演出づくりはその雰囲気で作っていくものなので(ここはビビビッと出てきてサッと消える感じなどなど)。

因みに、今回掲載する素材はAnimate CCで作成しました。


板をキラっと光らせる

今回のゴールはこちらです。青い板がキラっと光る表現です。

mov1.gif


複数の演出を重ねてそれっぽく

キラっと光らせる演出はいろいろな演出が重なっています。単体の演出だけでは単調でリッチに見えません。今回は次のような演出を重ねています。


面全体の光り

面の光りを表現します。光が当たると全体が明るくなり、外れると暗くなるというイメージです。

mov2.gif


光源となる光り

面が光るということは、光源がそこにあるということです。光源が存在し続けては変化が出ないので、移動させます。

move3.gif

こういう画像を移動させてマスクをかけています。

line.png


キラン:star2:

これは演出をリッチに見せるアクセントです。現実世界ではあまり見られませんが、アニメや映画でよく見ますね。現実世界には存在しないオーバーな表現をつけてあげると、ユーザーにもわかりやすくなります。

move4.gif


動きのきっかけを意識して

板がキラッと光る流れを考えます。

光源が出現 → 面が明るくなりはじめる → 光源が端まで到達 → キラン:star2: → 光源が通り過ぎていく → 面が暗くなる

この動きのきっかけをもとに、各演出の始まりと終わりを決めます。

演出のスタート位置

step1.png

光源が出現 & 面が明るくなりはじめる

step2.png

光源が端まで到達 & キラン:star2:

step3.png

光源が通り過ぎていく & 面が暗くなる

step4.png

演出づくりは、各演出が影響しあって深みがでます!

やっぱり演出づくりは楽しいな〜次回も乞うご期待!:relaxed: