paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

logo

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

超お手軽モーションパス!SVGアニメーションを簡単に作成できる「SVGator」を使ってみた!



どうも、まさとらん(@0310lan)です!

今回は、高度なSVGアニメーションを直感的に誰でも作成できるWebサービスをご紹介します。

手持ちのSVGファイルにアニメーションを追加できるのはもちろん、ゼロからイラストを描いてオリジナルのSVGアニメーションを作ることもできます。

記事後半ではモーションパスを活用したダイナミックなアニメーション手法もご紹介していますので、ご興味ある方はぜひ参考にしてください!

SVGator


■「SVGator」の使い方

それでは、「SVGator」をどのように使えばいいのか詳しく見ていきましょう!

まずはサイトにアクセスして、画面上部にある「SIGN UP」ボタンをクリックして無料のユーザー登録を済ませておきます。

ユーザー名、メールアドレス、パスワードを設定するだけなので簡単です。

(※GoogleやFacebookアカウントでもログイン可能)

登録したメールアドレス宛に「認証リンク」が届くので、そちらをクリックしてログインしましょう。


以下のようなダッシュボードが表示されたらOKです!

この画面から独自のSVGアニメーションを作成したり、保存や書き出しなどの管理ができるようになります。

また、チュートリアルなども含めて公式ドキュメントが閲覧できたり、作成したSVGをラベルで管理できるような機能も提供されています。

■SVGアニメーションのサンプルデモ

「SVGator」の使い方をご紹介する前に、まずはどのようなSVGアニメーションを作成できるのかサンプルデモを確認してみましょう。

ダッシュボードにはすでにいくつかデモプロジェクトが用意されていますので、お好きなものを1つ選択してください。

今回は時計のアニメーションを搭載した「Basic Animations」を選んでみます。


すると、専用のSVGエディタが表示されます。


画面構成としては、大きく4つのエリアに分かれています。

各エリアの概要としては以下のとおりです。

  • ファイル:キャンバス上に配置されたオブジェクトリスト
  • プレビュー:SVGアニメーションの編集と確認
  • プロパティ:各オブジェクトのパラメータ設定
  • タイムライン:キーフレームを使ったアニメーションエディタ

「プレビュー」でSVGを描画したり読み込んだりして、「タイムライン」でアニメーションを作成していくのが基本的な作業になります。


現在はサンプルデモのプロジェクトを読み込んでいるので、このまま再生ボタンをクリックしてみましょう。


次のようなSVGアニメーションが再生されます。

このようなアニメーションであれば、慣れると数分で作れてしまいます。

■基本的なアニメーションの作り方

それでは、「SVGator」を使ってアニメーションをどのように作っていくのか見ていきましょう。

今回はダッシュボードから【+ New Project】ボタンをクリックして、新しいプロジェクトを最初から作っていきます。


【Create from scratch】を選択します。


空白のキャンバスが配置されたエディタが表示されます。


手持ちのSVGをインポートして使うことも可能ですが、ペンツールを利用してゼロから好きなイラストを描いていくこともできます。


また、図形ツールを利用すると、よく使うシェイプ画像を素早くキャンバスに配置できる機能もあります。試しに「Star」を選んで星型のシェイプを作ってみましょう。


キャンバス上でマウスをドラッグすると、好きなサイズの星型を作成できます。

試しに、この星が回転するアニメーションを作ってみましょう!


そこで、まずは分かりやすいように「プロパティ」のRotateにある「deg」パラメータを「0」にしておきます。

この設定で星は0度の位置から回転を始めることができます。


次に、タイムラインにある【Animate】ボタンをクリックして、「Rotate」の項目を選んでください。


するとタイムライン上に「Rotate」の項目が配置されているのを確認できます。

これで「回転」のアニメーションを作成できる準備が整ったわけです。


今度はタイムライン上のカーソルを「① 3sの位置に移動」して、Rotateの「turn」パラメータを「② 1に設定」します。

この設定で星が3秒かけて1回転するアニメーションを自動生成できるわけです。


最後にタイムラインの「0秒」と「3秒」にキーフレームが作成されており、それぞれのフレームが繋がっていることを確認して再生ボタンをクリックしましょう。


次のような回転アニメーションが再生されるはずです。


同じ要領で、「Scale(サイズ)」や「Position(位置)」なども追加して、自由にキーフレームを作成してみましょう。


位置やサイズ変更などもアニメーションとして活用できるので便利でしょう。

このように「SVGator」を利用すると、直感的に多彩なアニメーションを作成できるわけです。

もっと高度なアニメーションの作り方も、公式のチュートリアルで紹介されているのでご興味ある方はぜひ参考にしてください。

■モーションパスを使ってみよう!

「SVGator」を利用すると、自由に描いた線に沿ってオブジェクトを移動できるモーションパスを使うことができます。

ダイナミックなアニメーションを非常に手軽な操作で作れるので、合わせてご紹介しておきます。


今回は適当なシェイプを1つ作成し、それを線に沿って移動させてみましょう。

そこで図形ツールから、「Ellipse」を選択して丸いシェイプを作っておきます。


次に、ペンツールで好きな線(曲線など)を描いていきましょう。

あとで、この線に沿ってオブジェクト(丸のシェイプ)を移動させます。


線はデフォルトだと細いので、プロパティから太さを変更しておくと扱いやすくなります。


最後に丸のシェイプを選択した状態で、プロパティの「Set motion path」をクリックしてください。


今度は描いた線を選択した状態にして【Done】ボタンをクリックします。


すると、丸のシェイプが線上に配置されて、タイムラインには新しく「Potition」が自動的に作成されます。


再生ボタンをクリックすると、線に沿ってオブジェクトが移動しているのが分かります。


これをさらに応用すると、車が激しく移動するようなアニメーションも簡単に作成できるわけです。

モーションパスは、アイデア次第でさまざまなアニメーションを実現してくれるので、ぜひ使い方をマスターして活用できるようにしておきましょう。

公式チュートリアルにも、モーションパスの使い方が詳しく紹介されているので、合わせて参考にしてください。

■SVGアニメーションを書き出してみよう!

「SVGator」で作成したSVGは、簡単にファイルとして書き出すことができます。

方法は簡単で、エディタ上部にある【Export】ボタンをクリックするだけです。


書き出し用の設定画面が表示されますが、基本的にはデフォルトのままでも構わないので続けて【Export】ボタンをクリックしてください。

アニメーションが搭載されたSVGファイルをダウンロードできます。(※フリープランの場合は3プロジェクト / 月を書き出せます)

ダウンロードしたSVGファイルは、そのままWebサイトなどに活用できます。


例えば、objectタグを利用して「demo.svg」というファイル名のSVGアニメーションをWebサイトに追加するには以下のようになります。

<object type="image/svg+xml" data="demo.svg" width="400" height="400"></object>

ちなみに、アニメーションをループさせたい場合は、先ほどの書き出し設定で「Iterations」の項目にある「Infinite」にチェックを入れましょう。

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

このたび人気の「Python入門編」が全編無料となりました。他にもいろいろな動画レッスンを無料公開しておりますので、エンジニア・非エンジニアにかかわらず、プログラミングを学びたい方はぜひごらんください。

paizaラーニングについて詳しくはこちら
paizaラーニング

■まとめ

今回は、誰でも手軽に高度なSVGアニメーションを作成できるWebエディタをご紹介しました!

本記事でご紹介した機能はほんの一部であり、他にもアニメーションを作りやすくする豊富な機能が搭載されています。初心者の方は素早く使えるように工夫されていますが、上級者向けの機能(有料プラン含む)も活用できればさらにレベルの高いアニメーション作りも楽しめるのが魅力です。

ぜひみなさんもオリジナリティ溢れるSVGアニメーションを作ってシェアしてみてください!


<参考リンク>
「SVGator」公式サイト




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.