摘要：經(jīng)調(diào)研發(fā)現(xiàn)，是個(gè)簡(jiǎn)單高效且性能高的動(dòng)畫(huà)方案。換言之，設(shè)計(jì)師用把動(dòng)畫(huà)效果做出來(lái)，再用導(dǎo)出相應(yīng)地文件給到前端，前端使用庫(kù)就可以實(shí)現(xiàn)動(dòng)畫(huà)效果。

在海外項(xiàng)目中，為了優(yōu)化用戶(hù)體驗(yàn)加入了幾處微交互動(dòng)畫(huà)，實(shí)現(xiàn)方式是設(shè)計(jì)輸出合成的雪碧圖，前端通過(guò)序列幀實(shí)現(xiàn)動(dòng)畫(huà)效果：
?
序列幀：

動(dòng)畫(huà)效果：

序列幀：

幀動(dòng)畫(huà)的缺點(diǎn)和局限性比較明顯，合成的雪碧圖文件大，且在不同屏幕分辨率下可能會(huì)失真。經(jīng)調(diào)研發(fā)現(xiàn)，Lottie是個(gè)簡(jiǎn)單、高效且性能高的動(dòng)畫(huà)方案。

Lottie是可應(yīng)用于Android, iOS, Web和Windows的庫(kù)，通過(guò)Bodymovin解析AE動(dòng)畫(huà)，并導(dǎo)出可在移動(dòng)端和web端渲染動(dòng)畫(huà)的json文件。換言之，設(shè)計(jì)師用AE把動(dòng)畫(huà)效果做出來(lái)，再用Bodymovin導(dǎo)出相應(yīng)地json文件給到前端，前端使用Lottie庫(kù)就可以實(shí)現(xiàn)動(dòng)畫(huà)效果。

關(guān)閉AE

下載并安裝ZXP installer
https://aescripts.com/learn/z...

下載最新版bodymovin插件
https://github.com/airbnb/lot...

把下載好的bodymovin.zxp拖到ZXP installer

打開(kāi)AE，在菜單首選項(xiàng)->常規(guī)中勾選??允許腳本寫(xiě)入文件和訪問(wèn)網(wǎng)絡(luò)（否則輸出JSON文件時(shí)會(huì)失?。?br>

在AE中制作動(dòng)畫(huà)，打開(kāi)菜單窗口->拓展->Bodymovin，勾選要輸出的動(dòng)畫(huà)，并設(shè)置輸出文件目錄，點(diǎn)擊render

打開(kāi)輸出目錄會(huì)看到生成的JSON文件，若動(dòng)畫(huà)里導(dǎo)入了外部圖片，則會(huì)在images中存放JSON中引用的圖片

靜態(tài)URL
https://cdnjs.com/libraries/l...

NPM

npm install lottie-web

調(diào)用loadAnimation

lottie.loadAnimation({
  container: element, // 容器節(jié)點(diǎn)
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "data.json" // JSON文件路徑
});

也可以在vue中使用lottie

    import lottie from "../lib/lottie";
    import * as favAnmData from "../../raw/fav.json";

    export default {
        props: {
            options: {
                type: Object,
                required: true
            },
            height: Number,
            width: Number,
        },

        data () {
            return {
                style: {
                    width: this.width ? `${this.width}px` : "100%",
                    height: this.height ? `${this.height}px` : "100%",
                    overflow: "hidden",
                    margin: "0 auto"
                }
            }
        },

        mounted () {
            this.anim = lottie.loadAnimation({
                    container: this.$refs.lavContainer,
                    renderer: "svg",
                    loop: this.options.loop !== false,
                    autoplay: this.options.autoplay !== false,
                    animationData: favAnmData,
                    assetsPath: this.options.assetsPath,
                    rendererSettings: this.options.rendererSettings
                }
            );
            this.$emit("animCreated", this.anim)
        }
    }

Lottie提供了用于監(jiān)聽(tīng)動(dòng)畫(huà)執(zhí)行情況的事件：

complete

loopComplete

enterFrame

segmentStart

config_ready(初始配置完成)

data_ready（所有動(dòng)畫(huà)數(shù)據(jù)加載完成）

DOMLoaded（元素已添加到DOM節(jié)點(diǎn)）

destroy

可使用addEventListener監(jiān)聽(tīng)事件

// 動(dòng)畫(huà)播放完成觸發(fā)
anm.addEventListener("complete", anmLoaded);

// 當(dāng)前循環(huán)播放完成觸發(fā) 
anm.addEventListener("loopComplete", anmComplete);

// 播放一幀動(dòng)畫(huà)的時(shí)候觸發(fā) 
anm.addEventListener("enterFrame", enterFrame);

可使用anm.pause和anm.play暫停和播放動(dòng)畫(huà)，調(diào)用anm.stop則會(huì)停止動(dòng)畫(huà)播放并回到動(dòng)畫(huà)第一幀的畫(huà)面。
使用anm.setSpeed(speed)可調(diào)節(jié)動(dòng)畫(huà)速度，而anm.goToAndStop(value, isFrame)和anm.goToAndPlay可控制播放特定幀數(shù)，也可結(jié)合anm.totalFrames控制進(jìn)度百分比，比如可傳anm.totalFrames - 1跳到最后一幀。

anm.goToAndStop(anm.totalFrames - 1, 1);

這樣的好處是可以把相關(guān)聯(lián)的JSON文件合并，通過(guò)anm.goToAndPlay控制動(dòng)畫(huà)狀態(tài)的切換，如下圖例中一個(gè)JSON文件包含了2個(gè)動(dòng)畫(huà)狀態(tài)的數(shù)據(jù)：

JSON文件里assets設(shè)置了對(duì)圖片的引用：

若想統(tǒng)一修改靜態(tài)資源路徑或者設(shè)置成絕對(duì)路徑，可在調(diào)用loadAnimation時(shí)傳入assetsPath參數(shù)：

lottie.loadAnimation({
  container: element,
  renderer: "svg",
  path: "data.json",
  assetsPath: "URL"  // 靜態(tài)資源絕對(duì)路徑
});

即使用bodymovin成功輸出了JSON文件（沒(méi)有報(bào)錯(cuò)），也會(huì)出現(xiàn)動(dòng)效不如預(yù)期的情況，比如這是在AE中構(gòu)建的形象圖：

但在頁(yè)面中渲染效果是這樣的：

這是因?yàn)槭褂昧瞬恢С值?strong>Merge Paths功能

因此對(duì)設(shè)計(jì)師而言，創(chuàng)建Lottie動(dòng)畫(huà)和往常制作AE動(dòng)畫(huà)有所不同，此文檔記錄了Bodymovin支持輸出的AE功能列表，動(dòng)畫(huà)制作前需跟設(shè)計(jì)師溝通好，根據(jù)動(dòng)畫(huà)加載平臺(tái)來(lái)確認(rèn)可使用的AE功能。

除此之外，盡量遵循官方文檔里對(duì)設(shè)計(jì)過(guò)程的指導(dǎo)和建議：

動(dòng)畫(huà)簡(jiǎn)單化。創(chuàng)建動(dòng)畫(huà)時(shí)需時(shí)刻記著保持JSON文件的精簡(jiǎn)，比如盡可能地綁定父子關(guān)系，在相似的圖層上復(fù)制相同的關(guān)鍵幀會(huì)增加額外的代碼，盡量不使用占用空間最多的路徑關(guān)鍵幀動(dòng)畫(huà)。諸如自動(dòng)跟蹤描繪、顫動(dòng)之類(lèi)的技術(shù)會(huì)使得JSON文件變得非常大且耗性能。

建立形狀圖層。將AI、EPS、SVG和PDF等資源轉(zhuǎn)換成形狀圖層否則無(wú)法在Lottie中正常使用，轉(zhuǎn)換好后注意刪除該資源以防被導(dǎo)出到JSON文件。

設(shè)置尺寸。在AE中可設(shè)置合成尺寸為任意大小，但需確保導(dǎo)出時(shí)合成尺寸和資源尺寸大小保持一致。

不使用表達(dá)式和特效。Lottie暫不支持。

注意遮罩尺寸。若使用alpha遮罩，遮照的大小會(huì)對(duì)性能產(chǎn)生很大的影響。盡可能地把遮罩尺寸維持到最小。

動(dòng)畫(huà)調(diào)試。若輸出動(dòng)畫(huà)破損，通過(guò)每次導(dǎo)出特定圖層來(lái)調(diào)試出哪些圖層出了問(wèn)題。然后在github中附上該圖層文件提交問(wèn)題，選擇用其他方式重構(gòu)該圖層。

不使用混合模式和亮度蒙版。

不添加圖層樣式。

全屏動(dòng)畫(huà)。設(shè)置比想要支持的最寬屏幕更寬的導(dǎo)出尺寸。

設(shè)置空白對(duì)象。若使用空白對(duì)象，需確保勾選可見(jiàn)并設(shè)置透明度為0%否則不會(huì)被導(dǎo)出到JSON文件。

由于以上所說(shuō)的功能支持問(wèn)題會(huì)導(dǎo)致輸出動(dòng)畫(huà)效果不確定性，設(shè)計(jì)師和前端之間有個(gè)動(dòng)畫(huà)效果聯(lián)調(diào)的過(guò)程，為了提高聯(lián)調(diào)效率，設(shè)計(jì)師可先進(jìn)行初步的效果預(yù)覽，再把文件交付給前端。

渲染前設(shè)置所要渲染的文件

勾選??Demo選項(xiàng)

在輸出的文件目錄中就可找到可預(yù)覽的demo.html文件

把生成的JSON文件傳到LottieFiles平臺(tái)，可播放、暫停生成文件的動(dòng)畫(huà)效果，可設(shè)置圖層顏色、動(dòng)畫(huà)速度，也可以下載lottie preview客戶(hù)端在iOS或Android機(jī)子上預(yù)覽。

LottieFiles平臺(tái)還提供了很多線(xiàn)上公開(kāi)的Lottie動(dòng)畫(huà)效果，可直接下載JSON文件使用

Lottie的不足之處是沒(méi)有對(duì)應(yīng)的API操縱動(dòng)畫(huà)層，若想做更細(xì)化的動(dòng)畫(huà)處理，只能直接操作節(jié)點(diǎn)來(lái)實(shí)現(xiàn)。比如當(dāng)播放完左圖動(dòng)畫(huà)進(jìn)入驚訝狀態(tài)后，若想實(shí)現(xiàn)右圖隨鼠標(biāo)移動(dòng)而控制動(dòng)畫(huà)層的簡(jiǎn)單效果：

開(kāi)啟調(diào)試面板可以看到，lottie-web通過(guò)使用標(biāo)簽的transform屬性來(lái)控制動(dòng)畫(huà)：

當(dāng)元素已添加到DOM節(jié)點(diǎn)，找到想要控制的標(biāo)簽，提取其transform屬性的矩陣值，并使用rematrix解析矩陣值。

onIntroDone() {
    const Gs = this.refs.svg.querySelectorAll("svg > g > g > g");
    Gs.forEach((node, i) => {
        // 過(guò)濾需要修改的節(jié)點(diǎn)
        ...

        // 獲取transform屬性值
        const styleArr = node.getAttribute("transform").split(",");
        styleArr[0] = styleArr[0].replace("matrix(", "");
        styleArr[5] = styleArr[5].replace(")", "");
        const style = `matrix(${styleArr[0]}, ${styleArr[1]}, ${styleArr[2]}, ${styleArr[3]}, ${styleArr[4]},                     ${styleArr[5]})`;

        // 使用Rematrix解析
        const transform = Rematrix.parse(style);
        this.matrices.push({
            node,
            transform,
            prevTransform: transform
      });
    }
}

監(jiān)聽(tīng)鼠標(biāo)移動(dòng)，設(shè)置新的transform屬性值。

onMouseMove = (e) => {
    this.mouseCoords.x = e.clientX || e.pageX;
    this.mouseCoords.y = e.clientY || e.pageY;
      
    let x =  this.mouseCoords.x - (this.props.browser.width / 2);
    let y =  this.mouseCoords.y - (this.props.browser.height / 2);

    const diffX = (this.mouseCoords.prevX - x);
    const diffY = (this.mouseCoords.prevY - y);

    this.mouseCoords.prevX = x;
    this.mouseCoords.prevY = y;

    this.matrices.forEach((matrix, i) => {
        let translate = Rematrix.translate(diffX, diffY);
        const product = [matrix.prevTransform, translate].reduce(Rematrix.multiply);
        const css = `matrix(${product[0]}, ${product[1]}, ${product[4]}, ${product[5]}, ${product[12]}, ${product[13]})`;

        matrix.prevTransform = product;
        matrix.node.setAttribute("transform", css);
     })
  }

看到一個(gè)方法，在AE中將圖層命名為#id格式，生成的SVG相應(yīng)的圖層id會(huì)被設(shè)置為id，命名為.class格式，相應(yīng)的圖層class會(huì)被設(shè)置為class

試了下的確可以，如下圖，因此可通過(guò)這個(gè)方法快速找到需要操作的動(dòng)畫(huà)層，進(jìn)一步簡(jiǎn)化代碼：

Lottie的缺點(diǎn)在于若在AE動(dòng)畫(huà)制作的過(guò)程不注意規(guī)范，會(huì)導(dǎo)致數(shù)據(jù)文件大、耗內(nèi)存和性能的問(wèn)題；Lottie-web的官方文檔不夠詳盡，例如assetsPath參數(shù)是在看源碼的時(shí)候發(fā)現(xiàn)的；開(kāi)放的API不夠齊全，無(wú)法很靈活地控制動(dòng)畫(huà)層。

而優(yōu)點(diǎn)也很明顯，Lottie能幫助提高開(kāi)發(fā)效率，精簡(jiǎn)代碼，易于調(diào)試和維護(hù)；資源文件小，輸出動(dòng)畫(huà)效果保真；跨平臺(tái)——Android, iOS, Web和Windows通用。

總的來(lái)說(shuō)，Lottie的引用可以替代傳統(tǒng)的GIF和幀動(dòng)畫(huà)，靈活利用好提供的屬性和方法可以控制動(dòng)畫(huà)的播放，但需注意規(guī)范設(shè)計(jì)和開(kāi)發(fā)的流程，才可以更高效地完成動(dòng)畫(huà)的制作與調(diào)試。