インストールはAdobe Creative Cloudから

Animate CCにアドオンをインストールするには「Snap.svg Animator : Adobe Add-ons」ページの[無料]ボタンをクリックします。すると、Adobe Creative Cloud経由で自動的に手元のマシンのAnimate CCにインストールされます。

Snap.svg Animatorのインストール手順

インストールが完了したら、Animate CCを起動します。スタートアップ画面のカスタムプラットフォームの箇所に「SnapSVGAniamtor (カスタム)」が追加されます。この項目を選択することでSnap.svg用のドキュメントが作成できます。

インストールの手順は以上ですが、詳しい手順が知りたい方は次の動画を参考にするといいでしょう。

タイムラインアニメーションを作成する

メニューから[ファイル]→[新規]→[テンプレート]タブ→[HTML5 Canvas]→[サンプルアニメーション]を選択して象のアニメーションを使いましょう。このタイムラインアニメーションをコピーして、Snap.svg用のドキュメントに貼り付けパブリッシュします。次のデモはSnap.svgで書きだしたものです。

このコンテンツは次のようなHTMLコードとなっています。再生時に自動的にHTMLのbody要素内にsvg要素が生成されます。出力した全コードはGitHubにアップしています。

<!DOCTYPE html>
        <html>
        <head>


<style>
        svg{
            background-color: #FFFFFF;
        }
        </style>


        </head> 
        
        <body> 
    <script src="./SnapSVGAnimator/js/vendor/snap.svg/snap.svg-min.js"></script>
    <script src="./SnapSVGAnimator/js/SnapSVGAnimator.min.js"></script>

    <script type="text/javascript"> 
        var jsonfile = "elephant.json",
            fps = 24,
            width = 960,
            height = 540,
            AJAX_req;

    AJAX_JSON_Req(jsonfile);

    function handle_AJAX_Complete() {
        if( AJAX_req.readyState == 4 && AJAX_req.status == 200 )
        {
            json = JSON.parse(AJAX_req.responseText);
            comp = new SVGAnim(
                           json,
                           width,
                           height,
                           fps
                           );
            
        }
    }

    function AJAX_JSON_Req( url )
    {
        AJAX_req = new XMLHttpRequest();
        AJAX_req.open("GET", url, true);
        AJAX_req.setRequestHeader("Content-type", "application/json");
        
        AJAX_req.onreadystatechange = handle_AJAX_Complete;
        AJAX_req.send();
    }

            </script>
        </body>
        </html>

Google ChromeのDeveloper Toolで確認すると、SVG要素がアニメーションの変化とともに変動していることがわかる

次のページでは、SVGの使いどころを解説します。