方式1：使用https://github.com/airbnb/lottie-web

使用github上的lottie插件，可实现如下效果：
一个效果网站
插件的其他作品：

效果1
效果2
效果3

当然，你还需要一个有点能力的ae设计师，让她去装个插件bodymovin：http://aescripts.com/bodymovin/，

然后设计师按照插件用法去做一个动画，然后在AE上点击render按钮，最后得到一个data.json和一个images的文件夹，images文件夹里面装了动画要用到的图片。

然后前端需要做的：

//1、 安装
   npm install lottie-web -S
// 2、引入，你可以二选一 引入 lottie 或者lottie_light，lottie_light文件小点
// 我这里只引入了lottie_light，只能用svg方式去做动画
import Vue from 'vue'
import lottie from 'lottie-web/build/player/lottie_light' // lottie_light只能用svg做动画；参数 renderer: 'svg'
// import lottie from 'lottie-web/build/player/lottie' // lottie可以用svg、canvas、 html做动画；参数 renderer: 'svg'|| 'canvas || 'html',
Vue.prototype.$lottie = lottie //挂载到vue原型上,方便全局使用

// 3、在.vue组件中
<template>
  <div id="animate2"></div>    
</template>
<script type="text/ecmascript-6">
  mounted() {
      this.$_initAnimation() // 要在mounte以后才能实例化动画，不然报错。
 },
 methods: {
      $_initAnimation() {
        this.$_animation = this.$lottie.loadAnimation({
          container: document.getElementById('animate2'),
          renderer: 'svg', // 由于我引入的是lottie_light，所以这里只能用svg渲染，如果你引入lottie，还可选canvas、html渲染。
          loop: true, // 是否循环播放
          autoplay: true, //是否自动播放
          path: '/animation/data.json' // json文件的路径，记住步骤1导出的data.json和images文件夹要在同级目录里面
        })
      },
      playAnimation() {
        this.$_animation.play()
      },
      stopAnimation() {
        this.$_animation.stop()
      }
    },
    destroyed() {
      this.$_animation.destroy()
    }
</script>

以上摘自 : https://www.jianshu.com/p/72f56ffa3384