Help us understand the problem. What is going on with this article?

フロントエンド演出:ふわふわ浮遊する動きの作り方

More than 3 years have passed since last update.

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

僕は元々Flash使いで、よくバナーやフルFlashサイトの制作をやっていました。最近は時代の流れでJSでUIの演出やその他もろもろのエフェクトを作っています。

昔に比べて「フロントエンド」という領域も広くなり、あまり演出の制作を担当しない方もいると思います。中には動きを作るのは苦手という方もいらっしゃるかもしれません。

あまりQiita向きじゃないかもしれませんが、いままでやってきた演出作りのコツ? のようなものを少しずつ公開していきたいなと考えています:grinning:

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

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

ふわふわ浮遊する動き

本記事のゴールは次のような動きです。ふわふわと浮遊している感じです。

anime1.gif

大切なのはイージング

イージングとは、アニメーションのスタートからゴールまでをどのくらいの変化量・スピード感(だんだんはやくなる、だんだん遅くなるなど)のことです。イージングにはさまざまなパターンがあるので、Easing Function 早見表が参考になります。

イージングを設定しない(等速で変化する)と動きに引っかかりがでてしまいます。

anime2.gif

つくりかた

このふわふわの動きのつくりかたです。まず、この動きを4つに分けます。

  1. 中心から上へ移動
  2. 上から中心へ移動
  3. 中心から下へ移動
  4. 下から中心へ移動

それぞれにイージングを設定します。イージングは基本的にイーズイン(だんだん速く)とイーズアウト(だんだん遅く)の2パターンです。上の4つの段階にそれぞれイージングを設定します。

  1. 中心から上へ移動:だんだん遅く(イーズアウト)
  2. 上から中心へ移動:だんだん速く(イーズイン)
  3. 中心から下へ移動:だんだん遅く(イーズアウト)
  4. 下から中心へ移動:だんだん速く(イーズイン)

次のように設定します(解説のためにスローモーションにしています)。

anime3.gif

演出づくりはイージングの使いかたに慣れること

僕は「演出づくりはイージングの使いかたに慣れること」と考えています。この記事の反応が良ければ別パターンも紹介できればと思います:grin:

umi_kappa
週4で阿佐ヶ谷の飲み屋で芋飲んでます。いつもいるねって言われるけど、ちゃんと仕事してますよ。JSとかアプリとかでIoTなコンテンツを作るお仕事やってます。
http://umikappa.main.jp/
iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com
https://iotlt.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away