lottie-前端實現AE動效

在前端頁面上爲了實現動畫效果，可以用CSS3自己實現，可以讓UI小姐姐給你GIF動圖，也可以直接animate.css等等吧，可以實現的方式有不少，但如果說偏差那肯定是會有的，在呈現上也會有點不太自然，今天介紹一個神器Lottie。（剛接觸到這個東西，那興趣是真的十分大，真的是對前端很友好。）

Lottie背景介紹

Lottie是可應用於Android, iOS, Web和Windows的庫，通過Bodymovin解析AE動畫，並導出可在移動端和web端渲染動畫的json文件。換言之，設計師用AE把動畫效果做出來，再用Bodymovin導出相應地json文件給到前端，前端使用Lottie庫就可以實現動畫效果。

對於前端來說從UI小姐姐那裏拿到的是這樣一個文件，若動畫裏導入了外部圖片，則會在images中存放JSON中引用的圖片。

 

前端使用Lottie

1.靜態URL

https://cdnjs.com/libraries/lottie-web

2.NPM

npm install lottie-web　　

  調用loadAnimation

  

3.vue-lottie（在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)
        }
    }

　

loadAnimation參數

Lottie動畫監聽

Lottie提供了用於監聽動畫執行情況的事件：

• complete
• loopComplete
• enterFrame
• segmentStart
• config_ready(初始配置完成)
• data_ready（所有動畫數據加載完成）
• DOMLoaded（元素已添加到DOM節點）
• destroy

可使用addEventListener監聽事件：

// 動畫播放完成觸發
anm.addEventListener('complete', anmLoaded);

// 當前循環播放完成觸發 
anm.addEventListener('loopComplete', anmComplete);

// 播放一幀動畫的時候觸發 
anm.addEventListener('enterFrame', enterFrame);

　　

可以控制動畫播放速度和進度：

可使用anm.pause和anm.play暫停和播放動畫，調用anm.stop則會停止動畫播放並回到動畫第一幀的畫面。
使用anm.setSpeed(speed)可調節動畫速度，而anm.goToAndStop(value, isFrame)和anm.goToAndPlay可控制播放特定幀數，也可結合anm.totalFrames控制進度百分比，比如可傳anm.totalFrames - 1跳到最後一幀，這樣的好處是可以把相關聯的JSON文件合併，通過anm.goToAndPlay控制動畫狀態的切換。

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

　　

圖片路徑處理

SON文件裏assets設置了對圖片的引用：

 

若想統一修改靜態資源路徑或者設置成絕對路徑，可在調用loadAnimation時傳入assetsPath參數：

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

　　

 

這篇隨筆主要借鑑了這個小姐姐的文章https://segmentfault.com/a/1190000018577416

寫的是真的真的真的很好，內容覆蓋很全。

lottie文檔地址：https://juejin.cn/post/6844903661760413704