透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用

大分類
Frontend
By Mark.Ku
lottie Javascript interactive Adobe After Effect AE

透過 Adobe After Effect 製作 lottie 動畫，並與 Javascript 互動 Part 2 - 進階互動應用

前言

前一篇的文章得知，Adobe After Effect透過將圖層給 “#” 當特殊後缀命名，字元輸出後會 #字之後字元將會轉換成 id，Javascript 透過操作 DOM 就能與動畫溝通。這篇針對一些比較JS 和動畫互動的功能做介紹。

在使用程式控制幀數前，先要了解什麼是幀數(Frame per second/Frame Rate)

幀數是動畫播放的單位，簡單來說就是每秒播放幾個畫格。
[關於幀數的相關文章]

動態變更文字

參考前一篇文章，可以透過 lottie api 的 setText 方法，去變更動畫中的文字。

載入動畫並，設定播放速度

this.lottieAnimation = lottie.loadAnimation({
        container: this.$refs.monkey, // 掛在到對應的 DOM 節點
        loop: true,
        animationData: require('@/assets/lottie/monkey.json'),
        autoplay: true
      })
that.lottieAnimation.setSpeed(0.1);

動畫播放完執行回調事件

this.lottieAnimation.onComplete = function() { // loop = false 才會被觸發
  console.log('complete')
}

this.lottieAnimation.onLoopComplete = function() {
  console.log('loopComplete')
}

取得目前影片播放的幀數

this.lottieAnimation.addEventListener('enterFrame', () => { // 現在在幀
 console.log('現在幀數', that.lottieAnimation.currentFrame)
})

固定播放幀數區間

that.lottieAnimation.playSegments([11, 30], true) // 播放，第11到30幀的動畫

挷定點擊事件

that.lottieAnimation.addEventListener('DOMLoaded', () => {
    document.getElementById('banana').addEventListener('click', function() {
     alert('click')
    })
})

滑動效果

Adobe After Effect 並沒有內建太多的網頁互動的指令或腳本，因此不太適合做複雜的互動功能，這邊直接操作 CSS 及 JS 會比較容易。

<style  lang="scss">
// 滑動事件
#banana:hover {
  filter: drop-shadow(0 0 30px rgb(0, 255, 255));
}
</style>

應用情境

依據前面幾個效果，己經可以組合成一個小遊戲，開始時固定幀數，播放等待遊戲動畫，直到用戶點擊香蕉後，播放第二段動畫。 Demo 影片連結

Example 程式碼

<template>
  <div>
    <div class="flex">
      <div ref="monkey" />
    </div>
  </div>
</template>
<script>

import loApi from 'lottie-api'
import lottie from 'lottie-web'
import { numberFormat } from '@/utils'

export default {
  components: {

  },
  data() {
    return {
      lottieAnimation: null
    }
  },
  created() {

  },
  mounted() {
    const that = this
    that.lottieAnimation = this.loadLottieAnimation()
    that.lottieAnimation.playSegments([0, 10], true) // 開場動畫
    that.lottieAnimation.addEventListener('enterFrame', () => { // 現在在幀
      console.log('enterFrame', that.lottieAnimation.currentFrame)
    })

    that.lottieAnimation.addEventListener('DOMLoaded', () => {
      document.getElementById('banana').addEventListener('click', function() {
        that.lottieAnimation.playSegments([11, 30], true) // 播放 11到30幀的動化 香蕉
      })
    })

    let count = 1

    // 每兩秒去修改 rate 裡面的值
    setInterval(() => {
      count = count + 0.01
      var api = loApi.createAnimationApi(that.lottieAnimation)
      var elements = api.getKeyPath('test#rate').getElements() // 查找對象
      var ele = elements[0]
      const result = '' + numberFormat(count, 2) // 修改改傳入的值必須是字元串不能是數字，否則會失敗
      ele.setText(result)
    }, 2000)
  },
  methods: {
    loadLottieAnimation() {
      const that = this
      return lottie.loadAnimation({
        container: this.$refs.monkey, // 掛在到對應的 DOM 節點
        loop: true,
        animationData: require('@/assets/lottie/monkey.json'),
        autoplay: true
      })
    }
  }
}
</script>

<style  lang="scss">
// 滑動事件
#banana:hover {
  filter: drop-shadow(0 0 30px rgb(0, 255, 255));
}
</style>

Lottie 動畫檔過大的解決方法

1.動畫播放檔過大

  • 一些動態效果，用到一些遮罩，轉換成web時動畫檔過大
  • 一些圖層過於複雜，要轉換成 png ，否則也會造成動畫檔過大
  • 未進入畫格的圖檔要移除，否則也會被包含進動畫檔裡。

2.播放到記憶體不足問題

  • V-if 時 Lottie沒有正確被釋放掉，每個階段 lottie 動畫，destory 要指定 name 才會釋放，不然 DOM 會不斷飆昇。

3.在 AE 匯出動畫檔時，可以選擇壓縮比(Jpg 或 Png)

4.透過 lottie-compress 套件壓縮 base 64 圖檔及移除不要的屬性

小結

Adobe After Effect製作動畫及輕量級小遊戲我覺得還是蠻適合，但若是要製作互動性比較高及複雜的遊戲，我倒覺得沒這麼適合，畢竟是為了動畫而生，對於和前端程式互動，並沒有這麼方便。

額外補充