BETA

AnimateCCで書き出したSVGアニメーションの色をVue.jsで変更する

投稿日:2019-03-31
最終更新:2019-03-31

はじめに

前回「AnimateCC(Flash)で「Animated SVG Exporter」を使ってSVGアニメーションを作成した話
でSVGアニメーションを作りました。
書き出しされたSVGファイルの中身を張り付けるだけなのでとっても簡単でした!
ですが、AnimateCC(Flash)側で各SVGの色が決まるため、書き出した後はその通りにしか使えないな~と思っていました。
が、そういえば普通にSVGに色の指定あるやん…ということに気づき、Vue.jsのデータバインディングで色変えれるのでは!?
ということで試すことにしました。

やりたいこと

  • シャボン玉(のようなマル)をクリック→弾けるアニメーション→もとに戻る
  • アニメーションはAnimateCC(Flash)でつくる
  • 書き出したSVGアニメーションの各色設定をVue.jsで変える

今回つくったものはコチラ

困ったこと

「Animated SVG Exporter」の「Animation」設定がうまく動かない

「Animated SVG Exporter」の「Animation」設定に

  • Begin Animation
    • On Root Click

という項目があったため、クリック処理までSVGアニメーションで完結できるのではないかと試してみましたが、
こちらを入れてSVGをクリックしてもアニメーションは開始されませんでした。
ブラウザが対応していないのか、書き方が悪いのか、今回は答えを得られませんでした。今後調査してみます。

気づいたこと

アニメーションのループは無理かと思っていましたが、同じく「Animation」設定に

  • Loop animation
    とのチェックボックスがあり、これにチェックをいれるとSVGがループしてくれます。らくちん!

Vue.jsに組み込む

書き出し等についてはは前回の記事をご確認ください。
今回は親コンポーネントから色を5種類ほど指定して、子コンポーネントとなるSVGアニメーションに色を渡します。
以下、コードは必要な部分のみ書き出しています。

まずは親コンポーネント内容。
子コンポーネントShabonに色を渡します。

<template>  
    <div id="app">  
        <Shabon  
          v-for="n in shabonNum"  
          :key="'shabon' + n"  
          :color="color[n % 5]"/>  
    </div>  
<template>  

<script>  
import Shabon from './components/Shabon'  

export default {  
  name: 'App',  
  components: {  
    Shabon  
  },  
  data () {  
    return {  
      color: [  
        '#EB5D00',  
        '#B7B3B2',  
        '#B0DCEE',  
        '#B8B2EA',  
        '#ECD070'  
      ],  
      shabonNum: 15  
    }  
  }  
}  
</script>  

続いて子コンポーネント内容。
書き出されたSVGファイルの中身を確認すると、「fill」というパラメータに色を指定しています。
これをpropsで渡されたcolor変数に置き換えます。
「fill="#9F9"」の部分を一気に「:fill="color"」に置換するとよいでしょう。

// 置き換え前のSVGファイル(コードから抜粋)  
<path fill="#9F9" stroke="none" d="M1.45 -...">  

// 置き換え後のSVGファイル(コードから抜粋)  
<path :fill="color" stroke="none" d="M1.45 -...">  

できたもの

コチラ

所感

書き出したSVGアニメーションは、書き出されたものをそのまま使う、という固定概念があったので、個人的には盲点でした。
細かな表現をしたいときはAnimateCC(Flash)でアニメーションを作って、
フレームワーク側で動的にいろいろ変更するようにすれば作業がはかどるかもしれません!

※2019/3/31 タイトルを内容に沿ったものに変更しました。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@jskymの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう