STUDIOで基本となる2種類のアニメーション。実装・設定方法を公式動画から解説

STUDIOアニメーションの実装方法については、1. アニメーションの紹介 | STUDIOアニメーションで遊ぼう！ | YouTubeから3本の動画に分けてSTUDIO公式から解説動画が出されています。

動画での講師はSTUDIO PARTNERSの"いっちゃ"さん。Maayaさんがいっちゃさんから習う形でのチュートリアル動画となっています。

本記事では、上記STUDIO公式によるアニメーション解説動画をまとめる形で、アニメーション実装に必要な概念やTipsをご紹介していきます。

講師: STUDIO PARTNERS いっちゃさんについて

動画での講師"いっちゃ"さんですが、STUDIO DESIGN AWARD 2020 のアニメーション実装をご担当されています。 (現在では会期中のアニメーションとは若干挙動が変わっている)

上記キャプチャ: STUDIO DESIGN AWARD 2020 | STUDIO アニメーションコース より

このSTUDIO DESIGN AWARDトップページのアニメーション実装方法は、3. 上級者編 | STUDIOアニメーションで遊ぼう！ | YouTubeで解説されています。

制作事例 いっちゃ | ZELKOVA STUDIO    | STUDIO Partnersのうち、個人的には株式会社まつもとコーポレーション　採用情報サイト2022 がアニメーション含めて素敵だなと思いました…！ イラストとアニメーションによる遊びゴコロが素敵です。

STUDIOアニメーション機能の実装には、まずイージングについて知ること

イージングとは、時間と速度の関係の概念を表したもの。

カーブが水平に近い部分ほど緩やかに、垂直に近い部分ほど高速に再生されます。

イージング | STUDIO アニメーションコース

初速が速い、"イージーイーズイン"がよく使われるとのこと。

イージングカーブ含め、アニメーション設定はサイト全体で統一させたほうがオススメ。サイト全体での統一感を出すことができるためです。

STUDIOでの基本かつ頻出のアニメーション。フェードとスライドイン

上の動画、2. 機能解説＆初心者編 | STUDIOアニメーションで遊ぼう！ YouTube でSTUDIOアニメーションについてハンズオン形式で必要十分を学ぶことができます。

フェードアニメーション

いわゆる、"ふわっと" 表示させるアニメーション。

上品な雰囲気、柔らかい雰囲気をもたせることができます。

明るい印象のサイトや、写真などのコンテンツに使用でき、割と万能。

黒背景上の要素にフェードアニメーションをもたせると、ホラーな印象をもたせることも。

ホバーアニメーションの場合は、時間が短くするほうがおすすめ。 ボタン等に対して素早く反応が返ってくるほうがユーザーとしては気持ちのいい体験になります。

たとえば、hover状態のモーションでは時間を200ミリ秒で設定。

他方、デフォルト状態のモーションでは時間は600ミリ秒として長めに設定。hover部分からマウスが外れた時に余韻を残すことができます。

"ふわっと現れる"ようなアニメーションの実装では、デフォルト状態のモーションで透明度を0、hover状態の透明度を1としてhover時に表示されるように実装することができます。

スライドインアニメーション

スライドインアニメーションとは、たとえば、スクロールした時に要素が横や縦からスライドインしてくる形で表示される効果。

スライドインは演出効果が高いので、"情報を見せたい" 要素に対しては不向き。

たとえばテキストに使用すると認識しづらくなるため、多用は控えること。画像などの要素には向いています。

横スライド表示の場合、コンディションをappear状態にして、表示領域にはいった最初の状態を定義します。

appear = 画面に現れた初期状態、というイメージです。このappear状態から、デフォルト状態へ移動していきます。

右からスライドさせる場合は、"移動"項目のXの値をプラスに。左からスライドインさせたい場合はXをマイナスの値で入力します。 時間は1000ミリ秒程度がおすすめ。

また、appear状態の要素の透明度を0とするようにしましょう。待機している要素を隠すことができます。

透明度を0にしていないと、スクロール領域に入ったときに待機しているコンテンツがそのまま見えた形で表示されてしまいますので御注意。