SVGatorを使用したSVGファイルのアニメーション

公開: 2022-03-10

簡単な要約↬単純なSVGアニメーションを作成するときにプロセスを本当にスピードアップするSVGatorなどのツールに非常に興奮しています。使い方がいかに簡単で、見栄えの良いアニメーションをすぐに作成できるかを次に示します。

（この記事はSVGatorによって提供されています。）アニメーション化されたSVGファイルは非常に人気があります。それらは完全にスケーラブルであり（ベクトルであるため）、小さく、100％コードベースであるため、非常に多くの変換と微調整が可能です。ただし、これには代償が伴います。完全な初心者にとっては急な学習曲線です。

SVGatorはこの問題を解決することを約束し、誰もが使い慣れたインターフェイスを使用して簡単なアニメーションを簡単に作成できるようにします。これは、SVGアニメーションをインポート、アニメーション化、およびエクスポートできるWebベースのアニメーションアプリであり、初心者がコーディングを学ぶ必要がありません。私たちはそれを試しました、そして私たちはそれを本当に愛していました。

アプリの使用を開始します

https://www.svgator.comにアクセスして、アプリの使用を開始してください。サインアッププロセスは非常に簡単です（図1から3）。[今すぐアニメーション化]、[アカウントの作成]の順にクリックし、詳細を入力すると、準備が整います。

サンプルの「ストップウォッチ」プロジェクトに直接移動します。このプロジェクトでは、SVGatorの機能を調べることができます。アプリ内で自分の道が見つからない場合は、使い始める方法を説明する優れたチュートリアル（図4）があります。静的SVGをインポートし、タイムラインに要素を追加し、要素とキーフレームにアニメーターを追加します。現在利用可能な4つのプロパティ（スケール、不透明度、位置、回転）をアニメートします。

アニメーションアプリを使用したことがある場合、SVGatorのユーザーインターフェイスはかなり馴染みがあるはずであり、おそらくすべてが適切な場所にあると感じるでしょう。アニメーション化する要素のみを追加することで、タイムラインをクリーンでスキャンしやすくします。

スターターアニメーション時計プロジェクトは、SVGatorを紹介する素晴らしい仕事をします。いつでも戻ってきて、参照として使用できます。

基本がわからなくなったので、独自のアニメーションの作成に取り掛かりましょう。

私たちが作るもの

Sketchでデザインしたこのシンプルな封筒アイコンを確認してください（図5）。閉じた状態から始まり、開いて、文字がポップアップし、その内容が続きます。次に、文字が封筒から飛び出し、拡大して緑色のチェックボックスが表示されます。

プロセスの概要は次のとおりです。

まず、さまざまな状態のアイコンを視覚化するための簡単なストーリーボードを作成します。その間、常にSVGatorと同期し、アイコンの要素をインポートして、すべてが期待どおりに機能するようにします。
次に、アイコンのマスターコピーを作成します。これには、必要なすべての要素が含まれ、SVGatorにエクスポートされます。このマスターコピーは、プロセス全体で大幅に変更する必要がある場合があります。
次に、アニメーション全体を1つのSVGatorプロジェクトで実行してエクスポートし、期待どおりに機能することを確認します。
最後に、アイコンを簡単な事前にコード化されたニュースレターフォームに含めて、実際のWeb環境でどのように表示されるかを確認します。また、解像度が小さい場合はサイズが変更されます。
ここからすべてをダウンロードできます。

始めましょう！

パート1：スケッチからアイコンを作成してエクスポートする

単純なSVGアイコンのデザインと、後でアニメーション化する予定のSVGアイコンのデザインにはいくつかの違いがあります。手始めに、それはかなり単純な形状で構成されている必要があり、スケール、回転、位置、不透明度のみを操作することに基づいて、単純なトランジションを中心にアニメーションを計画する必要があることに注意することが重要です。これらは、SVGatorが現在アニメートできる4つのプロパティのみであるため、より複雑なものをドラフトした場合、それを行うことはできません。

時間を節約するためのシンプルなストーリーボードを作成する

ストーリーボードを使用すると、実際にSVGatorにインポートする前に、すべてのトランジションを視覚化できます。また、アニメーション全体を作成する前に、変換を簡単にテストできます。 Sketchで別の方法で行われるはずのイラストの問題が見つかることがよくあるため、戻って変更する必要があります。次に、ファイル全体をSVGatorに再インポートし、アニメーションを最初から開始する必要があります。毎回これを行いたくないので、ストーリーボードは事前に計画を立てることを強制することで役立ちます。

たとえば、当初は封筒を画面の下部に近づけるように計画していましたが、SVGatorにインポートして開閉を試してみると、閉じている間は中央に留まり、少し下がっている必要があることは明らかでした。開いた—静止画像で省略された詳細。

ヒント：スケッチファイル→アートボード「ストーリーボード」でストーリーボードを確認してください。

レイヤーの命名と編成

Sketchでレイヤーに名前を付けると、期待どおりに機能し、Sketchで割り当てたすべての名前がSVGatorのプロジェクトに転送されます。ただし、SVGO Compressorまたは同様のプラグインを使用してSVGファイルを小さくすると、名前が消え、SVGatorによってHTMLタグに基づく名前に置き換えられ、図7に示すようなものになります。。

ヒント：すでに他のSVGにSVGO Compressorを使用していて、それを無効にしたくない場合は、Sketchのエクスポートプレビュー領域から目的の場所にファイルをドラッグアンドドロップするだけです（図8）。 これにより、SVGO Compressorが回避され、SVGがそのままエクスポートされます。

図7-SVGOコンプレッサーを使用すると、SVGatorのレイヤーの名前が失われます。（大プレビュー）

図8-Sketchのエクスポートプレビュー領域からファイルをドラッグアンドドロップすると、SVGOCompressorの使用が回避されます。（大プレビュー）

グループを使用することも素晴らしいです。アプリがグループを認識するためです。また、レイヤーとその親グループを同時にアニメーション化して、もう少し複雑にすることもできます。

使用するレイヤーの数に制限はありませんが、アイコンは非常にシンプルです。

アニメーション用のアイコンの準備

ストーリーボードにアイデアがあり、マスターファイルを準備したので、SVGatorで理解できる方法でエクスポートしてみましょう。必ずレイヤー階層を再確認してください。特定のレイヤーが別のレイヤーとどのように相互作用するか、およびレイヤーパネルのどこに配置するかを考えてください。図9では、「top_opened」が選択されていることがわかります。これは、封筒の開いた上部フラップです。白い紙の後ろに立つ必要があります。逆に、「top_closed」は封筒の閉じたフラップであり、すべての上にとどまる必要があります。それが私たちの「コンテンツ」グループの最初のレイヤーである理由です。

ヒント：なぜトップフラップ全体が2層でできているのか不思議に思うかもしれません。 これは、SVGatorを使用して形状を回転したり、3D空間で実際に変換したりできないためです。 これをエミュレートするために、最初のレイヤーを押しつぶしてから2番目のレイヤーをストレッチし、3D変換のような錯覚を作成します。

ストーリーボードを見ると、元々のアイデアは、シートを封筒から飛び出させ、スケールアップして最終的に非表示にすることでした。封筒の前に別の隠しシート（「sheet_top」）を置いて、元のシートを押し上げることでこれを実現します（図10）。最上部で出会った瞬間に切り替わり、フロントシートが封筒の前に落ちます。これも目の錯覚です。シートをz空間で実際に移動することはできないため、これをエミュレートする1つの方法です。

これらすべてを考慮して、アイコンをエクスポートできるようになりました。これは、実際には、必要なすべての要素を含む単一のSVGであり、便利な方法で互いに積み重ねられています。

ヒント：エクスポートする前に、すべての要素を表示（非表示ではない）とマークしてください。 エクスポートとして使用したファイルは、Sketchファイル→Artboardの「エクスポート」で確認できます。

パート2：アイコンのアニメーション

SVGatorを開き、[新規インポート]をクリックして、新しいプロジェクトを開始します（図11）。

すべてを正しく行うと、図12と下の短いクリップ（クリップ1）のようなものが表示されます。すべてのレイヤーが互いに積み重ねられて使用できる状態になっています。万が一、すべてが表示されない場合は、Sketchに戻り、すべてのレイヤーが表示されていることを再確認してください。

封筒の開口部をアニメーション化する

タイムラインにいくつかの要素をインポートすることから始めます。 SVGatorが機能する方法は、空のタイムラインから始めることです。「要素」ドロップダウンから追加する要素を選択します。目のアイコンを使用して手動でチェックし、探しているレイヤーを確認する必要があります。または、画面上の要素を直接クリックすることもできます。これにより、同じことが行われます。

ストーリーボードのステップ1と2、特にフラップの開口部に取り組みます。今のところ必要のないレイヤーを無効にしましょう。後で戻ってきます（その方法については、クリップ1を参照してください）。基本的なエンベロープだけを残す必要があります。つまり、「sheet_top_content」、「sheet_top_bgr」、「sheet_bottom_bgr」のレイヤーを無効にする必要があります。

次に、「top_opened」をクリックして左側のプラスアイコンをクリックするか、要素をダブルクリックしてタイムラインに追加します。「top_closed」についても同じようにします。これで、タイムラインに両方のレイヤーが含まれるはずです（図13）。

ヒント：プロセス全体を早送りする場合は、クリップ2を確認してください（アクションは、以下で説明するのと同じ順序ではない場合があります） 。

タイムラインの「top_closed」をクリックしてから、「Animators」ドロップダウンをクリックします。スケールアニメーターを追加します。
「top_opened」のスケールアニメーターも追加します。
次に、タイムラインのレイヤー名の横にある小さなターゲットアイコンをクリックします。これはtransform-originプロパティであり、要素の変換のピボットポイントを設定できます。上向きに縮小するため（図14）、「top_closed」の上部中央を選択し、次に「top_opened」の下部中央を選択します。
ここで、「top_closed」を選択した状態で、Scaleプロパティのプラス記号をクリックして、タイムラインにキーフレームを追加します。黄色のひし形がタイムラインに表示されます。 0.4秒に移動して、プラス記号をもう一度クリックします（図15）。その2番目のキーフレームは、フラップがすでに開いている場合の変換の最終ポイントになります。それでは、最初のキーフレームを100％100％のままにして、スケールを100％0％にします。
レイヤー名の横にある小さなターゲットアイコンをクリックして、「top_closed」のイーズインをオンにします（図16）。
0.4秒のときに、「アニメーター」メニューの「不透明度」をダブルクリックし、タイムラインの「不透明度」プロパティの横にあるプラス記号をクリックして、「top_closed」の不透明度キーフレームを追加します。 0％に変更します。
数フレーム前に戻り、不透明度を100％追加します。上部フラップ部分のグリッチを避けるためにこれを行っています。

ヒント：イージングすると、モーションがより自然に見えます。単一の要素の動きをエミュレートするアニメーションを設計しているため、アニメーションの最初と最後を簡単にするのが自然です。

それでは、アニメーションの終わりである「top_opened」の部分を扱いましょう。前に述べたように、フラップの3D開口部をエミュレートするために、これを2つの部分で行っています。

タイムラインの「top_opened」レイヤーを取得し、タイムラインの0.4秒に移動し、スケールキーフレームを追加してから、0.8秒に別のキーフレームを追加します。 0.4sでのスケールを100％0％にし、0.8sスケール値を100％100％のままにします。
イーズアウトをオンにします。再生を押してアニメーションをプレビューします。

見た目はかっこいいですが、丸で囲んだ背景に収まるように、封筒全体を下に移動する必要があります。 Elementsで「g」という名前のグループを見つけて、それに位置アニメーターを追加します。位置キーフレームを0.2秒に追加してから0.8秒に追加します。 0.8sの値を035に変更します。スムーズなアニメーションのためにイーズインアウトを追加します。以上です！エンベロープを開いた状態でアニメーション化することに成功し、少し下に移動することもできました。

複雑さの追加：文字がポップアップする

開封封筒はきれいですが、一枚の紙を入れることでもっと面白くすることができます。そのためには、「sheet_bottom_bgr」と呼ばれるシートレイヤーを表示する必要があります。

「要素」メニューの「sheet_bottom_bgr」の横にある目のアイコンをクリックして表示します。タイムラインに追加します（ダブルクリックします）。
次に、アニメーションの途中（たとえば、0.5秒）に移動して、位置キーフレームを追加します。 0.4秒後にもう1つ追加します。最初のキーフレームを選択し、レイヤーをy軸（0 140）で140ピクセルオフセットします。
イーズインアウト効果を追加します。これで、もう少し面白いアニメーションができました。

ヒント：これをビデオで見たい場合は、以下のクリップ3を確認してください。

さらに複雑：文字のスケーリングのアニメーション化

さらに詳しく説明するために、封筒から飛び出す手紙をアニメートして、手紙に「書かれた」テキストのいくつかの行を明らかにしましょう。そのためには、前のアニメーションを少し変更する必要があります。（早送りしたい場合は、スクリーンキャストを見てそれを繰り返すことができます。）

「sheet_bottom_bgr」の最後のPositionキーフレームを0.9秒から1.1秒に移動することから始め、0〜190に変更します。これで行っているのは、シートを封筒から取り出して、すでに準備した他のシートとすばやく交換できるようにすることです。
1.1sに移動し、「sheet_top_content」と「sheet_top_bgr」をオンにして、0〜190の両方のPositionキーフレームを使用してタイムラインに追加します。
1.5秒でキーフレームを追加し、それらを040にします。
両方のイーズアウトを有効にします。

これはフロントシートの動きであり、図17のようになります。

それでは、バックシートを修正しましょう。フロントが表示されると消え、フロントシートはその後にのみ表示されます。

1.1sに移動し、「sheet_bottom_bgr」を選択します。不透明度アニメーターとキーフレームを追加します。 0％に設定します。
1つのフレームを後方に移動し、別の不透明度キーフレームを設定して、100％にします。

フロントシートにもそれぞれ変更を加えましょう。

1.1sに移動し、「sheet_top_bgr」を選択して、100％の不透明度キーフレームを追加します。
フレームを後ろに移動し、不透明度を0％にします。

下の図18のようなものが表示されます。ここで2つの問題を見つけることができます。

遷移が発生する前に、コンテンツがエンベロープの上部に表示されます。
裏面と表面のシートを入れ替えるとグリッチが発生します。

最初の問題を修正しましょう。コンテンツとチェックボックスを非表示にして、フロントシートが表示された後に表示します。

1.5sに移動し、「sheet_top_content」を選択して、100％の不透明度キーフレームを追加します。
フレームを後方に移動し、別の不透明度キーフレームを0％に設定します。
ここで、フロントコンテンツ内の各レイヤーをアニメーション化することで、もう少し面白くします。
- 1.5sに移動し、[要素]メニューで「sheet_top_content」のコンテンツを検索します。
- 「sheet_top_content」内の3つのレイヤーすべてに不透明度キーフレームを追加します。
- 3つのレイヤーすべての不透明度を0％にします。
- 1.7秒に移動し、3つのレイヤーすべてで100％に設定します。
- 1.7sのままにして、Combined-shapeを選択し、Rotateキーフレームを追加します。
- 1.5秒に移動し、回転を-45度に設定します。
- ローテーションのイーズインアウトを追加します。

2番目の問題は、バックシートが早く消えてしまうために発生する不具合です。

1.1sに移動し、「sheet_bottom_bgr」を選択して、不透明度キーフレームを1フレーム前方にシフトします。これがあなたが見なければならないものです（図19）：

より魅力的にするために、フロントシートとコンテンツが封筒から飛び出したときに拡大縮小してみましょう。「top_sheet_content」全体をスケーリングすることもできますが、その場合、一部のブラウザーで不整合が発生する可能性があります。それぞれの子レイヤーを独自にスケーリングするのが最善です。

1.1sに移動し、「sheet_top_bgr」を選択して、スケールキーフレームを追加します。
- 結合形状、「line_top」および「line_bottom」についても同じようにします。
1.5sに移動し、120％120％の値を持つ別のスケールキーフレームを追加します。
- 結合形状、「line_top」および「line_bottom」についても同じようにします。
イーズインアウトを有効にします。
スケーリングしたので、フロントシート全体が下に移動する量を減らす必要があります。 1.5sに移動し、「sheet_top_content」と「sheet_top_bgr」を選択して、それらの位置を040から020に変更します。

ヒント： SVGはすべてベクターベースであるため、コンテンツをスケーリングしても問題ありません。そのため、品質が低下することはありません。

これが今のように見えるはずです（図20）：

すべて良好ですが、アニメーション全体を最初のフレームにループバックする必要があります。再利用したいからです。私たちのアイデアは、フロントシートを下にスライドさせ、封筒を閉じて元の位置に戻すことです。

2.8sに移動し、「sheet_top_bgr」を選択して、Positionキーフレームを追加します。
- 「sheet_top_content」についても同じようにします。
デフォルトのタイムラインは3秒であるため、さらに時間を追加する必要があります。タイムラインの左上隅にある歯車のアイコンをクリックし、期間を00:04:50に変更して（図21）、「Enter」を押します。タイムラインを延長しました。
3.6に移動し、Positionキーフレームの別のペアを追加して、それらの値を0360にします。両方のレイヤーの位置のイージングをEase-in-outに変更します。

1.3秒で、「top_closed」と「top_opened」を選択し、スケールキーフレームを追加します。
1.5秒でさらに2つ追加します。 2番目のキーフレームの場合、「top_closed」は100％100％、「top_opened」は100％0％である必要があります。スケーリングされたシートの後ろのフラップを正常に閉じました。
これで、封筒を中央に戻し、上部のフラップが再び表示されることを確認するだけです。 3sに移動し、「g」の位置キーフレームを追加します。 3.4秒でもう1つ追加し、00にします。2.8秒に移動し、「top_closed」の不透明度0％キーフレームを追加します。次に、3秒に移動し、不透明度を100％に変更します。

おめでとう！アイコン全体をアニメーション化しました。これがどのように見えるべきかです（図22）：

パート3：実際のWeb環境でのエクスポートされたアニメーションの実装

アイコンを実際の環境に配置してみましょう。簡単なニュースレターフォームをコーディングし、そこにアイコンを含めました。「SVGのエクスポート」をクリックすると、SVGatorからアイコンをエクスポートできます。

「購読」をクリックすると、お礼のメッセージが表示され、アイコンのアニメーションが始まります。

これは、2つのSVGアイコンを持つことで機能します。最初のアイコンは、アニメーションの最初のフレームのみが含まれる静的なアイコンであり、2番目のアイコンはアニメーション化されたアイコンです。静的アイコンは、スケッチファイル→アートボードの「静的エクスポート」にあります。コード内にインラインSVG要素として含めました。アニメーション化されたSVGインラインも含まれていますが、デフォルトでは非表示になっています。あなたはダウンロードでコードをチェックアウトすることができます。「Subscribe」がクリックを受信すると、静的SVGを非表示にし、アニメーション化されたSVGを表示します。これは自動的に開始されます。

静的SVGで行った小さな調整は、次の行を置き換えることでした。

 <rect fill="#E6E7EB" fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

… これとともに：

 <rect fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

これにより、すべての要素の上に正しく表示されていない灰色の長方形が削除されます。

この例は、レスポンシブデザインでSVGがどれだけ優れているかも示しています。ウィンドウを小さくすると、レイアウトが再配置され、品質を損なうことなくアイコンが拡大します。

ヒント：アイコンを小さくすると、シートがキャンバスから出るまでに時間がかかりすぎることがわかりました。そのため、その特定のタイミングを少し編集して短くする必要がありました。 「sheet_top_bgr」と「sheet_top_content」の最後のPositionキーフレームを3.2sに移動して、移動を高速化しました。

必要に応じて、エクスポートした後でもアニメーションを微調整できますが、便利なUIを備えたSVGatorでこれを行う方がはるかに簡単です。

結論

単純なSVGアニメーションを作成するときに、プロセスを実際に高速化するSVGatorなどのツールに非常に興奮しています。使い方は簡単で、見栄えの良いアニメーションをすぐに作成できます。

Adobe After Effectsほど強力ではありませんが、はるかに適応性が高く、すべてをコードでエクスポートして、Webですぐに使用できます。 After Effectsと比較すると、リンゴとオレンジがあります。どちらのツールも非常に異なるためです。
迅速な探索にSVGatorを使用すると、初心者はSVGatorに大きな価値を見出しますが、それはSVGatorが彼らだけを対象としているという意味ではありません。上級ユーザーは、このツールを使用して、より複雑なツールを使用せずに、ブレインストーミングを行ったり、アイデアをすばやく検討したりできます。 SVGatorはコードを生成するため、そこからコードを取得して、好きなようにカスタマイズできます。唯一の欠点は、アニメーション全体が1つのタイムライン内に配置されることです。つまり、基本的に1つのCSSアニメーションであり、内部で発生するすべてのものは、起動するまでに異なる量の遅延があります。これは、すべてがオールインワンCSSであるため、現在、アニメーションの特定のステップでイベントを発生させることができないことを意味します。
SVGatorの主な目的は、SVGアニメーションをより簡単かつ高速にすることであるため、これをバニラコードと比較することも公平ではありません。すべてを最初からコーディングすれば、より多くのことを達成できることは明らかですが、それにはどのくらいの時間がかかりますか？
SVGatorの最大の利点の1つは、非常に初心者に優しいことです。誰でも使い始めることができ、少なくともいくつかのデザインまたはアニメーションソフトウェアの経験があれば、学習曲線はほとんどありません。
アカウントを作成すると、すべてのユーザーが7日間の無料トライアルを利用できます。すべての機能が含まれており、試用期間が終了しても、「マイプロジェクト」セクションからアニメーションをダウンロードできます。アプリは、毎月（1か月あたり18ドル）、四半期ごと（四半期ごとに45ドル）、または毎年（1年あたり144ドル）購読できます。

SVGatorについてさらに読む

SVGatorを使用してSVGをアニメーション化する方法（ビデオ）
SVGatorのTwitter（アプリに関する多くのミニチュートリアルと頻繁な更新が含まれています）
SVGator FAQ

コードを使用したSVGアニメーションについてさらに読む

「私が心配するのをやめ、SVGをアニメーション化する方法を学びました」、Boaz Lederer、Medium
「CSSとSnap.svgライブラリを使用してSVGコードを最適化し、SVGアイコンをアニメーション化する方法」CodyHouse
「非開発者向けのCSSアニメーションパート2— SVG」、Nicholas Kramer、Prototypr
「美しいSVGアニメーションを簡単に作成する方法」LewisMenelaws、Medium

この記事を手伝ってくれたBoyanKostovに特に感謝します—あなたの時間と努力に感謝します！