JavaScriptを使用したSVGをアニメートする

Feb 3, 2026
操作方法
Graphic of 4 mountain scenes in circles on a computer screen

JavaScriptでは、CSS3またはWebアニメーションAPIを使用しているブラウザでネイティブに実現できることがわかります。シンプルなアニメーションと遷移はCSS3によく適しています - より複雑なアニメーションはJavaScriptを使用して実行される必要があります。 （コードなしでサイトを作成している場合は、必要です。 ウェブサイトビルダー 。）

Web Animation APIに関する問題は、ブラウザのサポートと現在の機能セットです。かなり若い仕様であること、これは今後数年間で改善されます。

  • SVGの完全なガイド

この機能とブラウザのサポート赤字と戦うために、私たちは次のようなアニメーションライブラリに切り替えることができます。 gr gr （GSAP）。 GSAPには、複雑なアニメーションと複数のタイムラインを作成し、ほとんどすべての要素またはプロパティ/ valueペアをアニメートすることができます。すべて簡単で直感的な構文で達成されます。

このチュートリアルでは、GSAPライブラリを使用していくつかのアニメーションを作成します。メインで最も複雑なアニメーションが作成される予定で、毎日のシーンに移行することになります。また、絶えず実行されているいくつかの単純なアニメーションを作成します。

アニメーションプロジェクトにもっと多くのオプションが必要な場合は、コンパイルをチェックしてください。 ベストフライグラフィックデザインソフトウェア 。複雑なウェブサイトへのアニメーションを追加する？あなたは支援的なものが必要です ウェブホスティング サービス。

ファイルをダウンロードしてください このチュートリアルのために。

01。 文書の設定

始めるには、私たちはフォークをフォークする必要があります グリーンズボックスペン そのプレミアムプラグインを試すために。チュートリアルの場合、すでに最適化されており、HTMLエディタに貼り付けられているSVGを使用します。ただし、独自のSVGを使用している場合は、すべての要素に一意のIDがあることを確認する必要があります。

02。 最初のタイムラインを作成します

GSAPには2つのタイムラインタイプがあります。タイムレインライトとタイムレインマックス。 TimeLineMaxバージョンは、アニメーションを繰り返す能力など、追加の機能へのアクセス、およびそれらを逆にすることができます。私たちの最初のタイムラインは水になりますが、それは無限にそしてヨーヨーを前後に繰り返します。 

 var animation_water = new timelineMax（{
  繰り返し：-1、
  ヨーヨー：TRUE
;）;

03。 最初のアニメーションを作成します

水をアニメートするために、私たちは私たちのSVGの別の道を持っています。私たちはを利用します モーフィス オリジナルの水路を新しい水路に変換するためのプラグイン。水素要素 '12px'をy軸上に移動します。プロパティの最後の2つの数字はそれぞれ遅延と開始時間を表します。 

 animation_water
  .to（ "＃水"、2、{
  Y：12、
  MorphSVG： "＃水-2"、
  簡単：linear.aseenone.
  0,0）
;

04。 再利用可能な特性

これらのプロパティの変数を作成しようとしている数回のプロパティと値を再利用することになります。 

 var animation_ease = linear.aseenone;

05。 コンソールロギング

GSAPライブラリには、特定のタイムラインからいくつかのプロパティを取得する機能があります。私たちはそれを期待しているようにすべてが働いていることを確認するためにコンソールにこれらを記録することができます。 

 console.log（
  'Animation_waterの期間：'
  + animation_water.duration（）
  .tofixed（2）
）

06。 クラウドタイムラインとコンソールログ

私たちが別々にそして常にアニメートしたいすべての要素について、新しいタイムラインを作成する必要があります。私達はまた私達が行くにつれて前記タイムラインをコンソールに記録したいのです。 

 var animation_cloud = new timelineMax（{
  繰り返し：-1、
  ヨーヨー：TRUE
}）;）
console.log（ '\ n' +
  ...
  animation_cloud.duration（）。tofixed（2）+ '\ n'
）

07。 クラウドアニメーション

私たちのタイムラインの準備ができているので、クラウドアニメーションを作成できます。新しいプロパティを取るアニメーションのセクションは、カンマを使用して区切って複数のプロパティ/値のペアを処理できます。

私たちのクラウドアニメーションは微妙であるだけでよいので、値を少し変更するだけです。 

 animation_cloud.
  .to（ "＃cloud"、3、{x：-2、y：1、スケール：0.95、回転：1、簡単：animation_ase}、0,0）
;

08。 夜間のアニメーションを作成します

次に、私たちの日常のアニメーションを作成し始めます。サイクルタイムとその日の変数を作成します。 GSAPの「yoyo」の設定はまた、繰り返す前にアニメーションを遅らせることを可能にします。 

 var day_night_cycle_time = 15;
var animation_delay = day_night_cycle_time / 2;
var animation_tonight = new timelineMax（{
  繰り返し：-1、
  ヨーヨー：
  repeatdelay：animation_delay.
;）;

09。 オーバーレイ層をアニメートします

私たちのSVGの中には、私たちの夜間の背景と同じ背景グラデーションで画像全体をカバーする長方形で作られたオーバーレイ層があります。オーバーレイは、画像全体を暗くするために「乗算」ブレンドモードを適用します。私たちのアニメーションは単にこの要素の不透明度を遷移させます。 

 Animation_Tonight.
  .to（ '＃nighttime-overlay'、
  day_night_cycle_time、{
  不透明度：1、
  簡単に：アニメーション - 
  }
  、0,0）
;

10。 グラデーションをアニメートします

GSAPは、一般的な「TO」と「から」タイプの上に他のトイレを提供しています。私たちの勾配をアニメートするために必要なTweenタイプは「Staggerto」のTweenです。カラーホイールを新しい値に回転させるために、「Cycle」プロパティを使用することもできます。 

 .Staggerto（ '＃昼間勾配停止' '、
  day_night_cycle_time、{
  サイクル：{
  stopColor：['＃060414'、 '＃416584'
  }、
  簡単：アニメーション、
0,0）

11。 太陽をアニメートします

私たちは「今夜」アニメーションにアニメーションを追加し続けることができます。今回は、私たちの太陽を設定するために新しい「トゥイーン」を追加します。月の前に太陽をアニメートするために、展示時間をサイクルタイムの一部にするように設定します。 GSAPにより、ほとんどすべての属性を設定できます。右側の丘の下に「CX」と「CY」のプロパティをアニメートするためにこれを使用します。 

 .to（ '＃sun'、day_night_cycle_time / 1.25、{
  スケール：0.9、
  attr：{CX： "753"、Cy： "697"}、
  簡単に：animation_ease}
、0,0）

12。 月をアニメートしてください

月をビューにアニメートするために、太陽を視聴中にアニメートしているのと同じ手法を使用します（上記のステップ11を参照）。もちろん、一方のTweenを使ってこれを達成することができましたが、Faux Arcを作成するためには、これを2つの部分にします。どちらの部分でも、スケールプロパティに新しい値を適用するつもりです。 

 .to（ '＃moon'、day_night_cycle_time / 2、{
  スケール：0.9、
  attr：{CX： "174.5"、Cy： "202.5"}、
  簡単に：animation_ease}
、0,0）

月のアニメーションの2番目の部分は、最初のセクションが始まる前に終了するのを待ちます。注：月のアニメーションのこれら2つの部分は、私たちが使用している他の日常のプロパティと共にアニメーションコードの中で一緒に連鎖されています。 

 Animation_Tonight.
  ...
  .to（ '＃moon'、day_night_cycle_time / 2、{
  スケール：0.9、
   attr：{CX： "410.5"、Cy： "114.5"}、
  簡単に：animation_ease}
  、day_night_cycle_time / 2,0）
;

13。 星をアニメートします

私たちの日常のアニメーションの残った唯一の部分は星です。いくつかのプロパティを遷移させることによって星をビューにアニメートします。それらの最初のものは、それらを彼らの不透明度をアニメートすることによってそれらをビューにすることです。 

（ '＃星'、day_night_cycle_time / 2、
  {不透明度：1}、
  day_nght_cycle_time / 2、
0）

次に、星を上に動かして、視野内にアニメートすると、星を動かして負の角度から回転させます。私たちのアニメーションの時間と遅延を計算するためにいくつかの簡単な数学を使用しています。 

。から（ "＃星"
  day_night_cycle_time  - （day_night_cycle_time / 4）、
  {y：150、回転：-15、簡単：アニメーション}}
  day_nght_cycle_time / 4、
0）

14。 星タイムラインとコンソールログを作成します

今度は私たちの日々のアニメーションを作成しました、私たちは星を点滅させるために別の絶え間ないアニメーションを作成することができます。新しいタイムラインを作成してから、コンソールのタイムライン期間を記録します。 

 var animation_stars = new timelineMax（{
  繰り返し：-1、
  ヨーヨー：TRUE
;）;

15。 星を点滅させる

これで、アニメーションの準備ができているタイムラインを作成しました、私たちは私たちの点滅アニメーションを作成する必要があります。アニメーションは本当に単純です - 私たちがやりたいことは不透明度の値を減らすことです。 「yoyo」のプロパティのおかげで、不透明度はアニメートしてオフになり、星が点滅しているように見えます。 

 Animation_stars
  .to（ "＃星"、0.5、
  {不透明度：0.5、簡単：animation_ease}
、0,0）
;

16。 点滅を遅らせる

最後のステップでは、点滅アニメーションを適用するために星グループをターゲットにしていますが、同時に一緒になる代わりに一度に1つずつ点滅させれば、はるかに良く見えます。私たちは、各星を別々にターゲットにして別のアニメーションを適用することによってこれを達成します。 

 Animation_stars
  ...
  .to（ "＃星2"、0.5、
  {不透明度：0.5、簡単：animation_ease}
  、1.25,0）
  .to（ "＃星3"、0.5、
  {不透明度：0.5、簡単：animation_ease}
  、.75,0）
  ...;

17。 雪を加える

それでおしまい！私たちの日常のサイクリングアニメーションは終わっていて、それは素晴らしく見えますが、そこをやめる必要はありません。画像はSVGに入っているので、私たちは簡単に私たちのランドスケープに新しい要素を追加することができます。雪を追加しましょう。 2つの別々のレイヤーを使用してこれを行います。各層は、風景をカバーするのに十分な大きさの楕円の集まりを有し、次に同じコレクションを繰り返し繰り返します。

18。 雪のタイムラインを作成します

さまざまな期間でそれらをアニメートできるようにするために、私たちの雪に2つの別々のタイムラインを作成します。期間もコンソールに記録されます。 

 var animation_snowtop = new timelineMax（{
  繰り返し：-1、
  repeatdelay：0.
}）;）
var animation_snowbottom = new timelineMax（{
  繰り返し：-1、
  repeatdelay：0.
;）;

19。 雪をアニメートする

私たちの雪の層をアニメートするために私たちは垂直軸に沿って2つの層を動かしたいです。それらの期間が異なることによって、我々は異なる速度で移動する層の外観を得るでしょう。アニメーションは、2番目のコレクションが最初の位置にあるまで垂直軸に沿って楕円の集まりを動かすことによって機能します。その後、アニメーションを繰り返します。 

 animation_snow.
  .to（ "＃雪上層"、7、
  {attr：{変換： "translate（24 -108）"}
  、簡単：animation_ease}
、0,0）
;

チュートリアルペンの完全なコレクションを見つけてください ここに 。あなたのファイルを保存するためにどこか安全に必要ですか？私たちのガイドを参照してください クラウドストレージ 。

この記事はもともとCreative Web Design Magazine Web Designerに公開されていました。 ここでWeb Designerを購読してください 。

関連記事：

  • 5素晴らしいJavaScript API
  • 19 Cool CSSアニメーションの例を再現するための例
  • 25個の最大のアニメーションミュージックビデオ

操作方法 - 最も人気のある記事

Instagram Bioのフォントを変更する方法

操作方法 Feb 3, 2026

（イメージクレジット：ゲッティイメージズ） Instagram Bioのフォントを変更する方法を�..

ブランドタイポグラフィ：完全なガイド

操作方法 Feb 3, 2026

Pentagramは公共演劇のためのオーダーメイドの書体を作成しました （イメージクレジット：�..

Houdiniの地形を築く17

操作方法 Feb 3, 2026

Houdini 17では、sidefxはいくつかの新しいツールを導入し、完全に手続き型のある地形を作成する�..

Photoshopでカラフルなアニメーションアートをペイントする方法

操作方法 Feb 3, 2026

このPhotoshopのチュートリアルの間、私はイラストレーターとして使用するいくつかの重要な概念..

マスター手続きモデル化

操作方法 Feb 3, 2026

次回は都市にいるとき、現代の建物が建設される方法を調べます。あなたは何を見ますか？繰り..

ファンタジービーストを描く方法

操作方法 Feb 3, 2026

ファンタジーの生き物のためのアイデアを思い付いたら、次のステップはそれを信頼できる色や..

グラフィックデザイナーのための3Dテキストチュートリアル

操作方法 Feb 3, 2026

ページ1/2： Cinema 4Dを始めよう Cinema 4Dを始めよう ..

ヴァンゴッホのような肖像画を描く

操作方法 Feb 3, 2026

オランダのポスト印象派の画家Vincent Van Gogh（1853-1890）は彼のキャリアに多くの自画像を作りま�..

カテゴリ