Timelineをもう一度

Flashがとうとう[検索からも除外される](https://japanese.engadget.com/2019/10/30/flash-google-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に配置。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3093/6f2bdbcf-5b68-353e-ee9a-2a4a640a3e29.png)

2.タイムラインアニメーションを作成します。
![screencast 2019-11-26 15-14-27.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3093/36b25bcb-b681-1c37-a4c6-8617ac615007.gif)

3.スプライトシートとして書き出す。
インスタンスを選択して、右クリックから「スプライトシートを作成」を選択すると
スプライトシートを作成のダイアログがでますので、任意の場所に書き出します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3093/3ac50d76-ae5d-98a3-2395-02d0d0d1afe6.png)
今回はNuxt.jsを使うので/assets/下に書き出します。
jsonファイルと.pngが書き出されます。（今回はファイル名mc.jsonとしています。）

#### ソースコード編
```vuejs: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側

```vuejs: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>
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3093/9bc17463-30ca-fc4e-0614-f424e6a8ca38.gif" width=25%>
めっちゃ簡単に作成できました。🎉
※ループが変な瞬間があるのは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を有効にする手順
1. ExtensionManagerをインストール   
   https://install.anastasiy.com/ 
2. Lottie Pluginをダウンロード   
   https://github.com/Jaswant99/Animate-Lottie-Plugin/tree/master/Lottie
3. ExtensionManager を使って Lottie Plugin ZXP をインストール
4. Animate CCを起動しカスタムプラットフォームからLottie(Beta)プラットフォームを選択

### AnimateCC素材編
1.stage直下にタイムラインアニメーションを作成する。
AfterEffectのLottieを使うときと同じように作成。
![screencast 2019-12-03 12-06-20.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3093/9999ba78-735d-e20b-69c2-d39843a0072b.gif)
作成のポイントは下記
　* シェイプレイヤーであること
　* MovieClipやグラフィックシンボルはつかわない
　* ステージ直下に配置する
　* トゥイーンはシェイプトゥイーンのみ

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

### ソースコード編

#### Page側
```vuejs: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>
```

#### コンポーネント側

```vuejs: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>
```

書き出し結果はこちらです。
![screencast2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3093/d8d1565c-f139-bb5d-aa76-765a3d7a13df.gif)

一見うまくいっているように思えましたが、
よくみると顔が壊れてしまいました。😭
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3093/9bba5c7f-25ff-23e5-5a95-fbf7d80f1b53.png)

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

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

### 最後に
ありがとうFlash。👍


---
[:christmas_tree: FORK Advent Calendar 2019](/advent-calendar/2019/fork)
:arrow_left: 7日目 [前の日の記事のタイトル](/izanari/items/cb15017661c45efe12d9) @izanari
:arrow_right: 9日目 [Vuetifyのdatepickerを使って【和暦】＋【年度/月】pickerを作ってみた](/BigFly/items/7d6bcf649bedc2b91d3e) @BigFly