はじめに

Framerでウェーブ効果を作成するために最初に行うことは、フレームを描くことです。Fキーを押すとフレームツールが開き、希望のサイズでフレームを配置できます。この効果ではフレームのサイズはそれほど重要ではありません。

次に、フレームに線形(Linear)塗りを設定します。フレームを選択した後、プロパティパネルのFillでLinearを選択し、色を#09Fと#0DFに指定します。すると爽やかなグラデーションが適用されます。

最後にフレームの角を丸くする必要があります。半径(Radius)を40%に設定すると、円に近い「スクァークル(Squircle)」の形になり、波のアニメーションに適した基本形が完成します。

レイヤー作成

ウェーブ効果は合計で3つのレイヤーで構成されます。まずはフレームの位置をAbsoluteに変更してください。プロパティパネルのPositionでAbsoluteを選択します。その後、波効果を大きく見せるためにレイヤーの横幅・縦幅を4000ピクセルに拡大します。

次にこのレイヤーを2回複製して合計3つのレイヤーを準備します。（Command + Dショートカットを使用）これでLayersパネルに3つのレイヤーが並んでいるのを確認できます。

最後に、この3つのレイヤーが自然に混ざるようにMultiplyブレンディングモードを適用します。スタイルパネルでMultiplyを選択すると、レイヤーが重なり合って波のような重複効果が現れます。

アニメーション追加

次にレイヤーに動きを加えましょう。3つのレイヤーをすべて選択し、プロパティパネルのEffectsでLoopアニメーションを適用します。基本的にレイヤーが360度回転しますが、これをLinearカーブに設定すると速度が一定に保たれ、波が途切れることなく滑らかに流れる感覚を得られます。もう一つ重要な設定はPinningです。3つのレイヤーをすべて選択した後、左右下のピンを解除することで、ページのサイズが変わっても波がその場所にとどまります。

Appearエフェクト追加

ここで登場アニメーションを追加すると、さらにダイナミックな場面を演出できます。ウェーブコンテナを選択した後Appearエフェクトを適用します。このときOpacityを1に、Y値を-400に設定すると、波が画面上部から下に降りてくるように見えます。トランジションはEase Out、時間を5秒に指定すると、波が滑らかに現れ始める効果を得られます。

さまざまなスタイルの実験

ウェーブアニメーションの最大の利点は、多様な変形が可能である点です。例えば、レイヤーの色を変えたり反転させると、まったく異なる雰囲気の波が生まれます。また波の位置を上部ではなく下部に配置することで、ページのフッタ背景として活用することもできます。つまり、ウェーブ効果は単なる装飾ではなく、デザイナーがブランドのトーンに合わせて自由に変形できる強力な表現ツールです。

効果を見てフォローしよう→

この文章はFramer公式ブログの「Create a stunning wave animation in Framer with just three layers and zero code」を翻訳・アレンジしたコンテンツです。