lottie-web在vue中使用

[bienvenidoY]

介绍

Lottie for Android, iOS, React Native, and Web https://github.com/airbnb/lottie-web

用了这个库，不用设计师跟我描述动画怎么动了，AE做好甩JSON就够了。并且渲染在浏览器中可以是'svg' / 'canvas' / 'html' 三种可选值

本文仅介绍 lottie-web在vue.js中的使用，想自己动手可以参考：

面向前端的 Lottie & AE 动画手把手入门教学 https://juejin.im/post/5acda0a5f265da23741153a1

demo

https://github.com/bienvenidoY/vue-lottie

web使用

详情api使用请看lottie官网

安装依赖

npm install lottie-web
//or yarn add lottie-web

代码

<template>
  <div id="app">
    <div ref="animation"></div>
  </div>
</template>

<script>
import lottie from 'lottie-web';
import Trophy from './trophy.json'

export default {
  name: 'App',
  mounted () {
    this.anim = lottie.loadAnimation({
        container: this.$refs.animation,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: Trophy,//动画json
      }
    )
  }
}
</script>

tips

• 不想自己设计动画可以去网站下载现成json；
  https://www.lottiefiles.com/

[Kingbultsea]

谢谢 我直接用官方的例子 竟然报错 用你的解决了

[Kingbultsea]

其实用vue-lottie的..

[1kr]

你好，想请教下，有没有遇到找不到 anim 实例的情况。 我现在weex里面使用，基于vue。使用了vue-lottie，但是一直都拿不到 anim实例，动画出不了