前端 - Lottie 实现 AE 动效（Bodymovin）(二)

npm install lottie-web

lottie.loadAnimation({
  container: element, // 容器节点
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // JSON文件路径
});

    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)
        }
    }

// 动画播放完成触发
anm.addEventListener('complete', anmLoaded);
// 当前循环播放完成触发 
anm.addEventListener('loopComplete', anmComplete);
// 播放一帧动画的时候触发 
anm.addEventListener('enterFrame', enterFrame);

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