CSSを使用してSVGアニメーションを作成する方法
SVGのアニメーション化は、次のようなネイティブ要素を介して実行できます。
CSSアニメーションは、SnapSVGのようなJavaScriptライブラリを使用する代替方法にもなります。この記事では、SVGでCSSアニメーションを使用して実現できる可能性があることを確認します。.
1.図形を作成する
まず最初に、アニメーション化したいシェイプとオブジェクトを描画する必要があります。あなたはのようなアプリケーションを使用することができます スケッチ, アドビイラストレーター, または インクスケープ 作成する.
この例では、背景として曇り空を描き、ロケット船を上向きに撃ちました。
描画が完了したら、作成した各オブジェクトをSVGにエクスポートする必要があります。.
このステップの例としてSketchを使用します。 SVG形式に変換したいオブジェクトを選択してください。ウィンドウの右下にあるをクリックします 輸出可能にする. SVGフォーマットを選択して、エクスポートオブジェクト名をクリックします。一度に1つのオブジェクトを実行する必要があります.
2. SVGをHTMLに挿入します
SVGファイルをコードエディタで開くと、SVGコードは非常に面倒です。そのため、SVGファイルをデプロイする前に、コードを整理してSVGOというこのコマンドラインツールで最適化しましょう。.
起動する ターミナル または コマンド・プロンプト, そしてこのコマンドラインでSVGOをインストールします。
[sudo] npm install -g svgo
コマンドを調整する, svgo, SVGファイルで --可愛い 読みやすいSVGコードを作成するには：
svgo rocket.svg - かわいい
ディレクトリに複数のSVGがある場合は、それらをまとめて最適化できます。ディレクトリの名前は / images, その後、親ディレクトリからこのコマンドを使用します。
svgo -f images --pretty
SVGOを使う前後の違いを見てみましょう.
SVGファイル内のコードをコピーしてHTMLファイルに貼り付けます。幅800ピクセル、幅600ピクセルのワークスペースで作業します。 幅 SVG要素について.
SVGはHTMLファイルに設定されています。オブジェクトごとにIDを定義する必要があるので、後でCSSでそれらを選択できます。.
このチュートリアルでは、ロケットと炎のID、およびいくつかの雲を定義する必要があります。オブジェクトが後でアニメーションステージを処理するためには、追加する必要があります。 id - あなたも使うことができます クラス - 各オブジェクトに。この段階では、コードは次のようになります。
3. CSSを使ってアニメートする
それでは楽しみましょう。計画はロケットを宇宙へと引き上げることです。ロケットは2つのグループに分けられます。ロケット自体と炎.
まず、ロケットをワークスペースの中央に配置します。
#rocket transform：translate（260px、200px）;
あなたが見るものはこれです：
ロケットが上向きになっているように見せるためには、雲が落ちているような錯覚を作り出す必要があります。これに使用するCSSは次のとおりです。
＃cloud1 animation：fall 1s linear infinite; @keyframesはfrom transform：translateY（-100px）になります。 への変換：translateY（1000px）
よりリアルに見えるようにするために、4つの雲をアニメ化してそれらを作りましょう。 “秋” 異なる速度で。また、それらをX軸とは異なる位置に配置します。.
2番目のクラウドは次のようなコードになります。
＃cloud2 animation：fall-2 2s線形無限大; @keyframes fall-2 from transform：translate（200px、-100px）; への変換：translate（200px、1000px）
次のようにして、クラウド＃2を少し右に移動しました。 200px と 翻訳する. この段階では、結果は次のようになります。.
次に、ロケットを生き返らせましょう。次のようにアニメーションキーフレームを割り当てます。
#rocket animation：popup 1sは無限に緩和します。 @keyframes popup 0％transform：translate（260px、200px）; 50％transform：translate（260px、240px）; 100％transform：translate（260px、200px）;
また、ロケット炎にもアニメーションを追加します。
#flame animation：0.2sの線形無限を振る。 0％transform：translate（55px、135px）rotate（7deg）; 20％transform：translate（55px、135px）rotate（0deg）; 40％transform：translate（55px、135px）rotate（-7deg）; 60％変換：平行移動（55px、135px）回転（0deg）; 100％transform：translate（55px、135px）rotate（0deg）;
右！コードがすべて設定されたので、アニメーションはSVGで機能するはずです。.
私たちのロケット弾を宇宙への爆破を見てください。.
最終的な考え
アニメーションは、CSSで最も把握しやすい機能ではありません。しかし、うまくいけば、このチュートリアルがSVG上のCSSアニメーションをさらに探求するための良い出発点として見つかることを願います。手元のCSS Animationで何が達成できるかを知って驚かれるでしょう.
あなたがまさに基礎から始めたいならば、あなたはこの記事でここから始めることができます：スケーラブルベクターグラフィックス（SVG）アニメーションまたはSVGシリーズの残りの部分に従う.
- デモを見る
- ソースをダウンロード
