こんにちは！
Wixパートナーレベル最上位 レジェンドと、Velo Developer certificationを取得しています
合同会社アクトワン代表 和田英也です！
今回はWix Studioのアニメーション機能について解説致します！
Wixのアニメーションをデザインに取り入れることで、デザインを更にレベルアップさせることができます！
Wix Studioでは、表示させたいタイミングに基づいて 5種類のアニメーションを提供しています。
この記事ではそれぞれのアニメーションについてカンタンに紹介いたします。
また、最近発表された訪問者のカーソルの動きで自動的にトリガーされる「マウスエフェクト」も紹介したいと思います！
マウスエフェクトを使ったサイトの例
それでは早速始めましょう！
▼ 目次
エントランスアニメーション
エントランスアニメーションとは要素が初めに表示された時に起動するアニメーションのことです。
ユーザーの操作が不要で、要素が表示されたときに起動するので、視覚的な注意を引くことができます。
セクションの中で上図のようにセルを選択した状態で要素設定パネルを開きます。
そして要素設定パネルのアニメーションとエフェクトを選択するとエントランスが表示されます。
「要素が表示されると、アニメーション化されます」と説明されていますね。
追加ボタンでエントランスアニメーションを追加していきましょう。
赤枠にある数種類のアニメーションから設定できます。
Wix Studioのアニメーションは、通常のWixエディタよりもバリエーションが豊富です。
それぞれの要素を選択すると、どのようなアニメーションかを見ることができるので、色々試してみてください。
また、これらのアニメーションは細かな調整をすることもできます。
要素を選択した状態でアニメーションを調整をクリックすると
赤枠のようにアニメーション設定の編集画面が表示されます。
こちらからアニメーションの表示方向や表示時間、遅延時間(要素が表示されてから何秒後にアニメーションが起動するかの設定)、イージング(アニメーションの速度にどのような緩急がつくか)など、細かな設定ができます。
またエントランスアニメーションを設定した状態で要素設定パネルに戻ると、
エントランスの箇所にリヴィールが設定されていると表示されます。
こちらから設定したアニメーションを編集・削除できます。
ホバーアニメーション
ホバーアニメーションは訪問者が要素にマウスオーバーまたはクリックしたときに表示されるエフェクトのことです。
ホバー / クリックで、要素を変形させたり、移動させたり、新しいコンテンツを表示させたりすることができます。
Wix Studioではデザイン済みのエフェクトから選択するか、正確な仕様でカスタムエフェクトを作成します。
タイミング、順序、イージングを管理してすべてを結び付け、エディタから直接プレビューできます。
要素間のインタラクションを作成することもできるため、ある要素にマウスオーバーまたはクリックすると、別の要素がアニメーション化される、といった設定を施すことも可能です。
ホバーをクリックすると
先ほどのエントランスアニメーション同様様々なホバーアニメーションが表示されます。
ここでポイントなのが、このようにユーザーのアクションによってアニメーションを起動させる設定をする場合、起動の対象は同一の要素でなくてもいいんです。
というのも、上図のように赤枠の要素が今はアニメーション設定を選択された箇所なのですが、この状態で展開のアニメーション設定を行うと、赤枠の部分が展開のアニメーションで動きますね。
この状態で新たに左側のような要素を追加して、こちらにもホバーアニメーション設定を追加、展開のアニメーション設定を行うと、左の要素にも展開のアニメーションを表示することができるんです。
アニメーションの種類によりますが、アニメーションを調整の箇所で設定できる内容は異なりますが、このようにアニメーションがかかる箇所とアニメーションの起動になる箇所は分けることができます。
また、ホバーアニメーションの設定はプリセットに用意されている内容とは別にカスタムを使って自身で作ることもできます。
カスタムをクリックすると、カスタムアニメーション作成画面が表示されるので
こちらから不透明度・回転・角度・スケーリング・傾斜・平行移動などを組み合わせてアニメーションをかけることも可能です。
なのでオリジナルのアニメーションをかけたい場合はこちらから作成してみてください。
クリックアニメーション
クリックアニメーションとはアニメーションの起動(トリガー)となるものがクリックであり、ユーザーがクリックをした時にアニメーションが開始したり、トグルのオンオフ、アニメーションのリセットができる設定です。
例えば、トグルのオンオフとは一度クリックしたらオンになって、もう一度クリックするとオフになる、といったもので、クリックすることでアニメーションをリセットします。
他にもアニメーションの調整ではクリック時のアニメーションを作成することができます。
スクロールアニメーション
スクロールアニメーションは、ユーザーがページをスクロールすることで起こるアニメーションです。
例えば、要素のフェードインやスライド、パララックス効果（背景と前景でスクロール速度が異なる）などがあります。
スクロールによるアニメーションでエンゲージメントを高め、面白いエフェクトを作成しましょう。
ちなみに、アニメーションの進行状況は、訪問者が上下にスクロールすると前後に移動するスクロール位置に直接関連しています。
要素を選択した状態でスクロールをクリックすると
訪問者がスクロールした時にどのようにどのようなアニメーションがかかるのか、一覧で見ることができます。
スクロールアニメーションならではのものが沢山ありますので色々試してみてください。
ループアニメーション
ループアニメーションとは、繰り返し再生されるアニメーションのことです。
何も操作しなくても動き続けるアニメーションです。
例えば、歩く動きや回転する動きなど、一定のパターンを繰り返す動きを作りたい場合に便利です。
を与えましょう。
訪問者に注目してもらいたい要素にループアニメーションを追加することでデザインに躍動感が生まれます。
アニメーションをつけたい要素を選択して要素設定パネルを開きます。
そしてループを追加すると、先程までのアニメーション同様に様々なループアニメーションを一覧で見ることができます。
ループアニメーションを上手に使いこなしてサイト訪問者の注目を集めましょう。
マウスエフェクト
マウスエフェクトはWix Studioの最新機能で、サイト訪問者のマウスのカーソルの動きに応じて要素が動くアニメーションです。
マウスエフェクトを追加します。
マウスエフェクトはアイコンからクリックするだけでは、実際のアニメーションの確認はできないので、プレビューでチェックします。
様々な立体的なアニメーションを取り入れることができ、ユーザー体験的にもかなり面白いと思うので、取り入れてみてはいかがでしょうか。
以上がWixStudioを使ったアニメーション効果についてでした。
動画解説版はコチラ
チャンネル登録・高評価・動画に対するコメントなどよろしくお願いいたします！
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!