Timelineをもう一度 #JavaScript

Flashがとうとう検索からも除外されるということで、
AnimateCC(旧Flash)の活用方法を考えてみました。

今回のレシピ

PixiJS(v5) & Animate CC & Nuxt.js
Lottie & Animate CC & Nuxt.js

PixiJS(v5) & Animate CC & Nuxt.js

１つ目はAnimate CCからタイムラインアニメーションをスプライトシートとして書き出し・利用する方法です。
Animate CCから最適化されたスプライトシートとjsonファイル、Canvasに描画するのにPixiJS(v5)をつかうと、
スプライトの座標を気にすることもなく実装できます。

素材編

AnimateCCで素材を用意します。

1.stageにmcという名前をつけたMovieClipに配置。

2.タイムラインアニメーションを作成します。

3.スプライトシートとして書き出す。
インスタンスを選択して、右クリックから「スプライトシートを作成」を選択すると
スプライトシートを作成のダイアログがでますので、任意の場所に書き出します。

今回はNuxt.jsを使うので/assets/下に書き出します。
jsonファイルと.pngが書き出されます。（今回はファイル名mc.jsonとしています。）

ソースコード編

PixiWp.vue

<template>
  <div>
    <canvas ref="mycanvas" width="600" height="600"></canvas>
  </div>
</template>

<script>
import * as PIXI from 'pixi.js'
export default {
  props:{
    option:Object,
    sprite:String
  },
  mounted() {
    const canvas = this.$refs.mycanvas;
    const app = new PIXI.Application({
      width : canvas.offsetWidth,
      height : canvas.offsetHeight,
      view : canvas,
      antialias : false,
      transparent : true
    });
    const container = new PIXI.Container();
    app.stage.addChild(container);
    const baseTexture = PIXI.BaseTexture.from(this.sprite);
    const spritesheet = new PIXI.Spritesheet(baseTexture, this.option);
    spritesheet.parse(() => {
      const textures = Object.keys(spritesheet.textures).map((t) => spritesheet.textures[t]);
      const animatedSprite = new PIXI.AnimatedSprite(textures);
      animatedSprite.play();
      app.stage.addChild(animatedSprite);
    })
  }
}
</script>

Pages側

index.vue

<template>
  <div class="container">
    <PixiWp :option="pixiData" :sprite="pixiImg" />
  </div>
</template>
<script>
import PixiWp from '~/components/PixiWp'
//Pixjs用
import pixiData from '~/assets/mc.json';//AnimateCCから書き出したjsonファイル
import pixiImg from '~/assets/mc.png';//AnimateCCから書き出したスプライトシート
export default {
  components: {
    PixiWp
  },
  data(){
    return {
      pixiData :pixiData,
      pixiImg :pixiImg
    }
  }
}
</script>

めっちゃ簡単に作成できました。🎉
※ループが変な瞬間があるのはQiitaに乗せるためにgif化したためです。

Lottie & Animate CC

つぎはLottieを使いAnimate CCからタイムラインアニメーションをjsonとして書き出して、
SVGでタイムラインアニメーションを作成する方法です。

Lottieとは

Adobe After Effectsのから書き出したjsonファイルをもとに、簡単にSVGアニメーションを使用できるようにするライブラリです。After Effectsから書き出す利用する方法はいろんな方がブログやQiitaなどに紹介されていますので割愛します。
今回はAnimate CCから書き出してみます。LottieをAnimateCCから書き出すためにAnimate-Lottie-Pluginを使います。

Animate-Lottie-Pluginを有効にする手順

ExtensionManagerをインストール
https://install.anastasiy.com/
Lottie Pluginをダウンロード
https://github.com/Jaswant99/Animate-Lottie-Plugin/tree/master/Lottie
ExtensionManager を使って Lottie Plugin ZXP をインストール
Animate CCを起動しカスタムプラットフォームからLottie(Beta)プラットフォームを選択

AnimateCC素材編

1.stage直下にタイムラインアニメーションを作成する。
AfterEffectのLottieを使うときと同じように作成。

作成のポイントは下記
　* シェイプレイヤーであること
　* MovieClipやグラフィックシンボルはつかわない
　* ステージ直下に配置する
　* トゥイーンはシェイプトゥイーンのみ

2.パブリッシュする
ファイルメニューやショートカットからパブリッシュすると
jsonファイルが書き出されます。素材の準備は以上です。

ソースコード編

Page側

index.vue


<template>
  <div class="container">
    <LottieWp :option="lottieData" />
  </div>
</template>

<script>
import LottieWp from '~/components/LottieWp'
import lottieData from '~/assets/lottiedata.json';//Animate-Lottieから書き出したjsonファイル
export default {
  components: {
    LottieWp
  },
  data(){
    return {
      lottieData :lottieData
    }
  }
}
</script>

コンポーネント側

LottieWp.vue


<template>
  <div>
    <div ref="animationConatainer" class="svgWp" />
  </div>
</template>

<script>
import lottie from 'lottie-web'
export default {
  data(){
    return{
      lottiePlayer:null
    }
  },
  props:{
    option:Object
  },
  mounted() {
    const animationContainer = this.$refs.animationConatainer
    this.lottiePlayer = lottie.loadAnimation({
      container: animationContainer,
      renderer:"svg",
      loop:true,
      autopla:false,
      animationData:this.option
    })
  },
}
</script>

書き出し結果はこちらです。

一見うまくいっているように思えましたが、
よくみると顔が壊れてしまいました。😭

左:AnimateCCからパプリッシュしたもの
右:タイムライン上のもの

Animate-Lottie-Pluginからのjson書き出しでは
svgが崩れてしまうことがあるようです、
その他にも解析できないタイムライン構成の場合Animate CCが落ちてしまうこともありました。

Animate CCからのLottie書き出しは今後のアップデートに期待し
おとなしくAfterEffectsで作成したほうがよさそうです。

最後に

ありがとうFlash。👍

FORK Advent Calendar 2019
7日目前の日の記事のタイトル @izanari
9日目 Vuetifyのdatepickerを使って【和暦】＋【年度/月】pickerを作ってみた @BigFly