lottie可以讓前端更好的控制動畫，既能使動畫流暢運行又可以進行一定的干預。
lottie是用設計師使用AE制作動畫，然后用bodymovin插件去導出的json，前端工程師使用這個json去實現動畫。
這個動畫更加依賴設計師。前端工程師使用對應的api可以對動畫進行一些事件上的操作，主要是操作時間流。

lottie

首先安裝lottie

npm install lottie-web

在組件內引用

import lottie from 'lottie-web';

初始化lottie

<div id="bm" @click="lottieClick"></div>
//在mounted里引用，注意鉤子的生命周期，created里#bm這個元素還未創建
this.lottie = lottie.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
      loop: false,
      autoplay: false,
      animationData: data
});

這是我制作的一個簡單應用。

效果圖

github地址

下面貼一下這個效果的組件源代碼

<template>
    <div class="box">
        <div id="bm" @click="lottieClick"></div>

        <button v-for="(value,key) in dataJson" :key="key" @click="changeFun(value)"> {{key}}</button>
        <button @click="speedFun(speed++)  ">speed++</button>
        <button @click="speedFun(speed--)  ">speed--</button>
        
    </div>
</template>

<script>
    import lottie from 'lottie-web';
    
    export default {
        name: 'lottie',
        components: {},
        data() {
            return {
                speed: 1,
                lottie: '',
                isAnimationLoad: true,
                dataJson: {
                    heart1: require('../assets/data'),
                    heart2: require('../assets/lottie (1)'),
                    hand1: require('../assets/lottie (2)'),
                    hand2: require('../assets/lottie')
                }
            };
        },
        computed: {},
        props: {},
        created() {
        },
        methods: {
            speedFun(value) {
                if (value < 1) {
                    value = 1;
                }

                this.lottie.setSpeed(value);
            },
            changeFun(data) {
                console.log();
                if (this.lottie != '') {
                    this.lottie.destroy();
                }
                this.isAnimationLoad = true;
                this.initLottie(data);
            },
            lottieClick() {
                if (this.isAnimationLoad) {
                    this.isAnimationLoad = false;
                    if (this.lottie.currentFrame == this.lottie.totalFrames - 1) {
                        this.lottie.setDirection(-1);
                        this.lottie.play();
                    } else {
                        this.lottie.setDirection(1);
                        this.lottie.play();
                    }
                }
            },
            completeFun() {
                this.isAnimationLoad = true;
            },
            initLottie(data) {
                this.lottie = lottie.loadAnimation({
                    container: document.getElementById('bm'),
                    renderer: 'svg',
                    loop: false,
                    autoplay: false,
                    animationData: data
                });

                //初始化狀態
                // this.lottie.goToAndStop(this.lottie.totalFrames - 1, true);
                this.lottie.addEventListener('complete', this.completeFun);
            }
        },
        mounted() {
            this.initLottie(this.dataJson.heart1);
        },
        watch: {},
        destroyed() {
            //頁面銷毀時
        }
    };
</script>
<style lang="scss" scoped>

    .box {
        padding-top: 50px;
        padding-left: 50px;

        div {
            border: 1px solid #efefef;
            width: 100px;
            height: 100px;
        }

        button {
            padding: 4px 10px;
            margin-top: 20px;
            margin-right: 20px;
        }
    }
</style>

動畫實例有以下主要方法：

animation instances have these main methods:

• anim.play()
• anim.stop()
• anim.pause()
• anim.setLocationHref(locationHref) -- one param usually pass as location.href. Its useful when you experience mask issue in safari where your url does not have # symbol.
• anim.setSpeed(speed) -- one param speed (1 is normal speed)
• anim.goToAndStop(value, isFrame) first param is a numeric value. second param is a boolean that defines time or frames for first param
• anim.goToAndPlay(value, isFrame) first param is a numeric value. second param is a boolean that defines time or frames for first param
• anim.setDirection(direction) -- one param direction (1 is normal direction.)
• anim.playSegments(segments, forceFlag) -- first param is a single array or multiple arrays of two values each(fromFrame,toFrame), second param is a boolean for forcing the new segment right awa
• anim.setSubframe(flag) -- If false, it will respect the original AE fps. If true, it will update as much as possible. (true by default
• anim.destroy()

lottie has 8 main methods:

• lottie.play() -- with 1 optional parameter name to target a specific animation
• lottie.stop() -- with 1 optional parameter name to target a specific animation
• lottie.setSpeed() -- first param speed (1 is normal speed) -- with 1 optional parameter name to target a specific animation
• lottie.setDirection() -- first param direction (1 is normal direction.) -- with 1 optional parameter name to target a specific animation
• lottie.searchAnimations() -- looks for elements with class "lottie"
• lottie.loadAnimation() -- Explained above. returns an animation instance to control individually.
• lottie.destroy() -- To destroy and release resources. The DOM element will be emptied.
• lottie.registerAnimation() -- you can register an element directly with registerAnimation. It must have the "data-animation-path" attribute pointing at the data.json url
• lottie.setQuality() -- default 'high', set 'high','medium','low', or a number > 1 to improve player performance. In some animations as low as 2 won't show any difference.

請詳細查看lottie官方文檔
本次使用的json是由螞蟻設計生成