CSS で SVG アニメーションを作成する方法

公開: 2023-02-16

Web アニメーションは最近大流行しており、SVG でデザインできるものに制限はありません。 自分のサイトで試す準備ができている場合は、基本的なアニメーションの概念を知っていると、より複雑なデザインを構築するのに役立ちます。 SVG は、JPEG や PNG ファイルとは異なり、スケーラブルで解像度に依存しない (つまり、品質を損なうことなくスケーリングできる) ため、Web 上のアニメーションに最適です。 また、CSS、フィルター、対話機能を使用して SVG を拡張できるため、スタイル設定も簡単です。

チュートリアルに入る前に、CSS トランジションとトランスフォームに精通している必要があります。 同じ概念のいくつかが SVG で使用されます。

SVG の基本

SVG (Scalable Vector Graphics) は、XML ベースのテキスト形式を使用して、画像の表示方法を記述します。 SVG は、内部に多数の XML を含むテキスト ファイルです。 コード エディターで開くと、意味がわかります。 SVG を品質を落とさずにさまざまなサイズにスケーリングできる理由は、テキストを使用してグラフィックを説明するためです。

SVG グラフィックのコード エディター内

SVG ファイル内の視覚情報は、ブラウザーまたはそれを変更するために使用しているグラフィック ソフトウェアによって計算およびレンダリングされます。 JPG やその他の画像ファイル形式ほど複雑ではないため、必要に応じて、テキスト エディターで手動でデザインおよび編集できます。 それらは CSS で変更およびスタイル設定できるため、Web 上でデザインするのに最適です。

SVG グラフィックスに対するブラウザのサポートはかなり普遍的です。 IE8 ではいくつかの問題が発生する可能性がありますが、最新のブラウザーは SVG を見事に処理します。 あちこちに小さなバグがあるかもしれませんが、通常は順風満帆です。

SVG グラフィックの作成方法

Adobe Illustrator は、SVG を作成する際に選択できるプログラムの 1 つです。 実際には、すべて XML であるため、ゼロから作成することもできますが、特に複雑な SVG の場合は、デザイン プログラムを使用する方がおそらく簡単です。

Adobe Illustrator でデザインする際のヒント

他の Adob​​e Illustrator プロジェクトと同様に、バウンディング ボックスはイラストが作成される場所であるため、すべてが含まれていることを確認することが重要です。 これを行う最善の方法は、SVG に含めるアートワークを選択してから、[オブジェクト] > [アートボード] > [アートワークの境界に合わせる] に移動することです。

svg-animations-css-clip-artwork-to-bounds

これは非常に重要なステップです。 これを行っていない場合がいくつかありましたが、余分な余白があるため、サイト上で画像が非常に小さく見えました. すべてを境界内に完全に収めることで、問題は解決しました。

svg-animations-css-artwork-to-bounds

デザイン モードで行うのが最も楽しいことではないかもしれませんが、レイヤーの命名に注意を払い、一貫性を保つことは、グラフィックを使用した将来のアニメーション作業を行うときに役立ちます。 「レイヤー 1、レイヤー 2」では、どのレイヤーにグラフィックのどの部分が含まれているかを思い出すのが難しくなります。 これは、Illustrator がこれらの名前を使用して SVG コードで ID を生成するためです。

レイヤー グループは、特に複雑なグラフィックスの場合に最適です。 また、SVG ファイルでグループを作成するためにも使用されます。 これらを使用する場合は、レイヤー グループに関連する図形のみが含まれていることを確認して、ファイルをクリーンに保ち、後で簡単に編集できるようにすることを強くお勧めします。

このファイルでは、ホイールの外側部分の名前が「outer-wheel」で、内側部分の名前が「inner-wheel」であることがわかります。 それは基本的ですが、機能します。

これはオプションですが、CSS オプティマイザーを介して実行すると便利です。 これを行うことで、ファイル サイズを縮小できる可能性が高くなります。 優れたオプションの 1 つは、Peter Collingridge による SVG Optimizer です。 SVG OMG も検討する価値のあるオプションです。

Adobe Illustrator での SVG グラフィックのエクスポート

最終的な SVG 画像が完成したので、Web 上で使用できるようにエクスポートする必要があります。 [ファイル] > [名前を付けて保存] > [SVG] に移動します。 使用している Illustrator のバージョンに応じて、[ファイル]、[エクスポート]、[.SVG] に移動することもできます。 これは flyweel_wheel として保存されます。

これを行うと、いくつかのオプションを含むダイアログ ボックスが表示されます (次のすべてが表示されない場合は、[その他のオプション] に移動します)。

プロファイル: SVG 1.1

タイプ:これは、デザイン内のフォントの処理方法を制御し、フォントを SVG として埋め込みます。 何もないので、このセットを SVG のままにします。

サブセット化:このオプションは、必要に応じて文字の詳細を SVG ファイルに埋め込みます。 これにより、ファイルは、ユーザーのシステムに存在しない可能性があるフォントを表示できます。 「Only Glyphs Used」(アートワークに特別なフォントを使用する場合) が選択されている場合、SVG で使用されるグリフのみを含めることができます (ファイルサイズが小さくなります)。

画像の場所:これは、SVG ファイル内のラスタライズされた画像データについて、「埋め込み」オプションを使用してデータ URI として保存できる情報を制御します。 (この場合はあまり関係ありませんが、これによりリンクや埋め込み画像が可能になり、ファイル サイズが大きくなります。)

CSS プロパティ:プレゼンテーション属性を使用すると、必要に応じて CSS スタイルを SVG に正しく配置できます。 ユースケースによっては、これが最適な場合とそうでない場合があります。 プレゼンテーション属性は、 fill: blue;などを指定します。 インライン スタイルで伝統的に見られるものではなく: . 通常、プレゼンテーション属性は CSS でオーバーライドする方が簡単です。

より高度なオプション:このグループのチェックボックスを使用すると、さまざまな数値の小数点以下の桁数など、さまざまな設定を変更できます。 ここでは 1 つで十分です。 ファイルに多くのテキストが含まれている場合は、高度なオプションが最も必要です。 出力する<tspan>要素の数を減らすオプションを使用すると、エクスポートされる SVG のサイズを大幅に縮小できます。

場合によっては、テキストがカスタム パスに沿って描画されることがあります。 「パス上のテキストに <textPath> 要素を使用する」オプションを使用すると、パス上のテキストとしてエクスポートされます。 「レスポンシブ」オプションも重要です。 チェックされていない場合、SVG ファイルの幅と高さがハードコーディングされます。

CSS で SVG をアニメーション化する方法

操作する実際の SVG があるので、簡単なアニメーションを作成して、これがどのように機能するかを確認できます。 CSS の transform プロパティと translate メソッドは、ホイールの動きを助けます。 インストールする必要のあるプラグインやライブラリがないため、CSS を使用したアニメーションはすばらしいものです。 必要なのは HTML と CSS だけです。

SVG は、CSS キーフレームとアニメーション プロパティを使用するか、CSS トランジションを使用して、HTML 要素と同じ方法でアニメーション化できます。 より複雑なアニメーションには通常、何らかの変換 (平行移動、回転、スケーリング、または傾斜) が適用されます。

基本アニメーション

以下はホバー時にホイールを大きくする簡単なアニメーションです:

 svg {
   高さ: 20%;
   幅: 20%;
   塗りつぶし: #50c6db;
}
svg:ホバー {
   変換: スケール (1.25);
   移行期間: 1.5 秒。
}
svg-animations-css-flywheel-scale

糸車のアニメーション

ここで、Adobe Illustrator での苦労が報われます。 レイヤーに効果的に名前を付ける努力は有効に活用されます。 外側と内側のレイヤー グループを使用すると、アニメーションを制御およびカスタマイズできます。これは、ラスター グラフィックスのアニメーションよりも大きな利点です。

wheel SVG は、ローディング スピナー グラフィックとして機能します。 色が明るい色から暗い色に移行するにつれて、外側のホイールが回転し、内側のホイールがわずかに成長します。

SVG 要素は、ほとんどの場合、かなり予測可能ですが、若干トリッキーなポジショニングがいくつかあります。 他の HTML 要素に慣れている場合、それらは transform と transform-origin に同じように応答します。 注意すべきことの 1 つは、それらがボックス モデル、つまりマージン、ボーダー、パディングなどに従っていないことです。これにより、これらの要素の配置と変換が少し難しくなります。

変換元の基本

transform-origin プロパティは、要素の変換元の位置を変更するために使用されます。 HTML 要素の変換起点は、要素の中心である (50%, 50%) にあります。

svg-animations-css-rotate-on-other-graphic
これは、50% と 50% の変換原点で 45 度回転しています。

SVG 要素の変換原点は、キャンバスの左上隅である (0, 0) ポイントに配置されます。

svg-animations-css-rotate-on-svg
これは、デフォルトの変換原点 0 と 0 で 45 度回転しています。

SVG 要素は自身の中心を中心にどのように回転しますか? transform-origin プロパティで調整が必要です。 これは、パーセンテージ値または絶対値 (ピクセル、ems、または rems) のいずれかを使用して設定できます。 この値は、要素のバウンディング ボックスに対して相対的に設定されます。

パーセンテージ値を使用して<rect>の変換原点を中心に設定する場合、次のようになります。

 直角 {
  変換元: 50% 50%;
}

ホイールを作る

まず、回転キーフレームを設定することが重要です。 これはスピナー グラフィックになるため、完全な回転が必要です。 フェードイン効果も適用されます。 この例は Codepen にあります。

 @keyframes スピン {
    from {transform:rotate(0deg);}
    {transform:rotate(360deg);} に
}
@keyframes フェードイン {
    0% {
        不透明度: .35;
    }
    50% {
        不透明度: .5;
    }
    75% {
        不透明度: .75;
    }
    100% {
        不透明度: .25;
    }
}

次に、SVG ラッパーを作成することが重要です。

 .svg-コンテナ {
  高さ:100%;
  幅:100%;
  最大高さ:15cm;
  最大幅:15cm;
  マージン: 0 自動;
}

一般的な SVG スタイルが作成され、ここで transform-origin が指定されます。

 svg {
  上: 50%;
  左: 50%;
  位置: 絶対;
  最大高さ:15cm;
  最大幅:15cm;
  幅: 20%;
  高さ: 20%;
  塗りつぶし: #50c6db;
  変換: 翻訳 (50%, 50%);
}
svg-animations-css-wheel-diagram

ここで、レイヤーの命名が非常に役立ちます。 回転するアニメーションは#outer-wheelで指定されているため、SVG グラフィック全体に適用されますが、内側のホイールには、グラフィックの内側部分のみを対象としたフェード効果があります。 #inner-wheelのみをターゲットにすることで、フェードイン アニメーションが適用されました。

 #外輪 {
  アニメーション: スピン 4 秒無限リニア;
}
#内輪{
  アニメーション: フェードイン 2 秒の無限リニア;
}
svg-animations-css-spinning-flywheel

これが SVG と基本的なアニメーション技術の良い入門書になることを願っています。 これらの基本的なアイデアは、使用するにつれて、より複雑なアニメーションを作成するのに役立ちます。