【3分でわかる！】CSSスプライトアニメーションをvue.jsのイベントハンドリングで動かしてみよう

こんにちは！エンジニアのとみたです。

ささやかなネタですが、CSSで実装できるスプライトアニメーションで遊んでみました。

Twitterのいいねボタンのエフェクトにも使われています。

f:id:tomita_ak:20190425101438g:plain — Twitterのいいねボタン

スプライトアニメーション用の画像を用意

今回は、弊社が開催しているもくもく会の非公式キャラクター（笑）「プロラボくん」に動いてもらいます

f:id:tomita_ak:20190425101703p:plain — 非公式キャラクタープロラボくん

スプライトアニメーション用の画像はこちら。

7つの絵を少しずつ動かします。

f:id:tomita_ak:20190425102718p:plain — スプライトアニメーション用の画像

Illustratorで作成しました。

基準になる絵と枠を一つ作成して、横に並べます。

f:id:tomita_ak:20190425111617p:plain — 枠を付けた絵を並べてみました

ここから少しずつ変化をつけていくように作成します。

形式はpngではなく、SVG形式で書き出します。

アニメーションが動いたときに、滑らかに描画されます。pngだと思った以上にギザギザに...。

HTMLとCSSを作っていきます！

vue-cliを使って新規プロジェクトを作成します。

今回はApp.vueをそのまま書き換えてしまいます。

まず先程のSVGデータを表示します。

HTMLはこちら。

 <template>
  <div id="area">
   <div class="wrap">
     <div class="prorabokunSmile"></div>
   </div>
 </div>
</template>

cssはこちら。

.prorabokunSmile {
  background: url(./assets/purorabokun_smile.svg) no-repeat;
  background-size: cover; //高さをheightに合わせる
  width: 100px; //1コマ目の大きさ
  height: 126px; //1コマ目の大きさ
  display: inline-block;
  margin: 0 50px;
}

f:id:tomita_ak:20190425112234p:plain — 最初の1コマ目が表示されました

いよいよアニメーションを追加していきます！

HTMLはこちら。smileクラスを追加します。

 <template>
 <div id="area">
 
 <div class="wrap">
 <div class="prorabokunSmile smile"></div>
 </div>

 </div>
</template>

cssはこちら。

smileクラスと、@keyframesを追加しています。

.prorabokunSmile {
 background: url(./assets/purorabokun_smile.svg) no-repeat;
 background-size: cover;
 width: 100px;
 height: 126px;
 display: inline-block;
 margin: 0 50px;
}
.smile {
 animation: animationSmile 1s steps(6) infinite;
}
@keyframes animationSmile {
 to {
 background-position: -600px 0;
 }
}

画像を横方向に動かしているだけなのですが、

step関数を使い6段階に切り分けて表示させます。

step関数の値は、最初に表示される分を差し引いて、コマ数から1引いた値になります。

今回は7コマのアニメーションなのでsteps(6)となります。

アニメーションには任意の名前をつけ、@keyframesと紐づけます。

brackground-positionの値は、widthの値*steps関数の値をマイナスさせた値にすると、うまく動きました。100pxの6倍で-600px、といった具合に。

vue.jsのイベントハンドリングを使ってみます。

ボタンをクリックすると、アニメーションが動き出すようにしたい。

 <template>
   <div id="area">
     <div class="wrap">
       <div class="prorabokunSmile"
       v-bind:class="{ smile: isActive }"
       ></div>
     </div>
     <button v-on:click="move">笑顔！</button>
   </div>
</template>

jsの指定はこのようにしました。

<script>
  export default {
     name: 'app',
     data () {
       return {
       isActive: false
     }
   },
   methods: { 
     move: function () {
       this.isActive = !this.isActive
     },
   }
  }
</script>