ばうあーろぐ TOP へ戻る

位置を変えずに、斜めにエフェクトをかける方法

この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります

昔使った、tips的な内容のメモです。

斜めにさらっと流れるエフェクトをかけたい

何かの写真を、ちょっと上品な感じで魅せたいときに、斜めにさらっと流れるエフェクトをかけたい時があったとします。

画像のフェードインの際に、そのままふわっと全体を表示するのではなく、左上から徐々に表示されるようにするにはどうしたらいいでしょう?

仮に作ってみたのが1つ目のコンテンツです。

※今回は、あくまでこの記事用にサンプルとして作っているので、クオリティうんぬんは一旦忘れてください。(ごめんなさい)

200px x 200px のねこ画像に対して、400px x 400px のマスク画像を用意してみました。

左上から徐々に表示されるようにしたいので、マスク画像は右下が白の濃い目、左上が透明、というグラデーションになっており、これを左上から右下に動かすことで、斜めにさらっと流れるエフェクトを表現しています。

JavaScript(jQueryを使用)のポイントだけかいつまんでおくと、以下のような感じです。

sampleMask.stop(true, true).css({
  left: '-200px',
  top: '-200px'
});
sampleMask.animate({
  left: '200px',
  top: '200px'
}, {
  easing: 'swing',
  duration: 2000
});

マスク画像の右下部分が一番最初に表示されるようにして(left: -200px, top: -200px)、最後にはマスクが消える位置まで移動させています(left: 200px, top: 200px)。そこまで難しいことはしていませんね。

大きなオブジェクトをあまり画面内で動かしたくない

200px x 200px のねこ画像だったため、サイズはそれほど大きくないのですが、対象の画像がもっと大きかった場合はどうでしょうか?

大きなオブジェクトをあまり画面内でいろいろ動かすと、場合によってはレンダリングが追いつかず、画面がかくついてしまう可能性もあるかもしれません。

次に作ってみたのが2つ目のコンテンツです。

先ほどの違いを挙げるとすると、マスク画像が 200px x 200px になっていて、その場から動かさず、マスク画像が時間差でフェードアウトするようになっています。

こちらもポイントだけかいつまむとこんな感じです。

sampleMask.stop(true, true).show();
sampleMask.delay(500).fadeOut(1500);

変化する時間は2秒(2000ミリ秒)なのですが、最初の0.5秒(500ミリ秒)待ってから、マスク画像をフェードアウトさせてます。

このマスク画像の変化と、通常のねこ画像のフェードインを時間差で組み合わせることで、あたかも斜めにさらっと流れているかのように見えるエフェクトが実現できました。

まずゴールを決めて、どんな手法が取りうるか考える

時間差で組み合わせることで、動かさずにエフェクトかけられるんだぜ、ということが結論として言いたいわけではないのです。

もし、『斜めにエフェクトをかける』というところから、『マスク画像を斜めに動かす』というゴールを設定してしまうと、2つ目のコンテンツの発想は出てきません。

最初の段階で「マスク画像を斜めに動かすにはどうしたらいいだろう?」と考えてしまうと、動かさないという選択肢が無くなり、選べる手法もがくっと少なくなってしまいます。

これは、相手側の立場に立って考えると分かるように、実際に斜めに動いているのか、それっぽく見えているだけなのかは、ぶっちゃけどうでもいい話です。それどころか、それっぽく見せる方を選べるようになるだけで、この場合はより快適に見られるコンテンツになっています。(※もちろんこれはサンプルコンテンツなので、そこまでの違いはありません)

ゴールをきちんと『体験として落とし込む』ところまで吟味したうえで設定できれば、チームとして各自得意分野での手法の提案が出来るので、自分だけでは気づかなかった提案の余地が出て来て、チームで考える意味が出て来るのではないかなーと思います。こういった動き方を常々意識していきたいなーと思います。

この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります

もし記事内に誤りなどございましたら、 @girigiribauer までご一報いただけると助かります。