Mark Ku's Blog
首頁 關於我
透過 Adobe After Effect 製作 lottie 動畫,並與 Javascript 互動 Part 1 - 動態替換文字
Frontend
透過 Adobe After Effect 製作 lottie 動畫,並與 Javascript 互動 Part 1 - 動態替換文字
Mark Ku
Mark Ku
December 16, 2021
1 min

透過 Adobe After Effect 製作 lottie 動畫,並與 Javascript 互動 Part 1 - 動態替換文字

前言

公司想製作猴子上樹的小遊戲,起因是原本專案有用到 Lottie 動畫,覺得動畫流暢度及體驗感很好,就深入研究了一下,如何用 Adobe After Effect 製作 Lottie 小遊戲動畫,並與 Vue 前端框架做互動。

前置準備

  1. 安裝 Adobe After Effeect
  2. 安裝 Bodymovin 插件 ( for 匯出 lottie的 json )
  3. 開啟『允許腳本及網路存取』 勾選 Allow Script to write file and network access

讓我們開始開發吧

首先,我們得匯入 Lottie 素材,至 Adobe After Effec

我們可以透過 lottiefiles.com 下載免費的lottie 動畫 json 檔。

回到 Adobe After effect ,點選 Window > Extensions > Bodymovin

點選 Import Lottie Anmimation >

匯入剛剛的下載的lottie 的動畫 json 檔

匯入成功的畫面
匯入的動畫會顯示在素材庫裡

埋入文字圖層 (Text Layer) 給 Javascript 控制

點選輸入 horizontal type tool > 輸入文字 > “test”

對 text layer > 右鍵 > rename

但這邊要非常注意,因為後面要透過 Javascript 控制,因此要透過 ”#” 當特殊後缀命名,#字之後字元會轉換成 id。 emample: test#rate

最後輸出在網頁的時候,會將 id 挷在所屬的 DOM 上

匯出 lottie json 動畫檔

開啟Bodymovin, Window > Extensions > Bodymovin ,並依據下圖操作

★★★★★要特別注意 ★★★★★
在輸出成 Lottie 動畫檔,一定要勾選掉 Glyphs ,移掉原有的字型,不然會一直匯出錯誤( Character could not be created ),也不會將文字輸出成 html。

我們預期透過 Javascript ,動態去替換掉 Lottie 動畫裡先前指定 id 的文字圖層,這邊以vue 程式碼為例:

撰寫 Example.vue 
<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() {
    this.lottieAnimation = this.loadLottieAnimation()
    let count = 1
    const that = this

    // 每兩秒去修改 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() {
      return lottie.loadAnimation({
        container: this.$refs.monkey, // 掛在到對應的 DOM 節點
        loop: true,
        animationData: require('@/assets/lottie/monkey.json'),
        autoplay: true
      })
    }
  }
}
</script>

完成結果

Demo 影片連結

結論

Adobe After Effect 本身可透過 Lottie Api 達到前端和動畫做互動,對於撰寫小遊戲真的相當的方便,提供相當多事件及屬性可以調整,像是速度、播放次數、重覆播放,播放完成執行事件等等。

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


Tags

Mark Ku

Mark Ku

Software Developer

8年以上豐富網站開發經驗,直播系統、POS系統、電子商務、平台網站、SEO、金流串接、DevOps、Infra 出身,帶過幾次團隊,目前專注於北美及德國市場電商網站開發團隊。

Expertise

前端(React)
後端(C#)
網路管理
DevOps
溝通
領導

Social Media

facebook github website

Related Posts

透過 Adobe After Effect 製作 lottie 動畫,並與 Javascript 互動 Part 2 - 進階互動應用
透過 Adobe After Effect 製作 lottie 動畫,並與 Javascript 互動 Part 2 - 進階互動應用
December 19, 2021
1 min

Quick Links

關於我

Social Media