vue-lottie动画效果

vue-lottie动画效果

之前用lottie模仿过san官网的动画效果(没有打广告QAQ)

仓库地址

模仿demo

blog

掘金

用lottie的好处有很多(.......此处省略n字) 简单来说就是简单高效的还原设计的动画效果

然后在个人项目使用vue-lottie 分享一些小小经验吧

废话不多说~~~ (正经分割线)


分析官方demo

先来一个简单的尝尝鲜

vue-lottie仓库

vue-lottie demo

打开仓库可以看见很多很棒的效果(nice

Installation

npm install --save vue-lottie

Usage

<template>
    <div id="app">
        <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
        <div>
            <p>Speed: x{{animationSpeed}}</p>
            <input type="range" value="1" min="0" max="3" step="0.5"
                   v-on:change="onSpeedChange" v-model="animationSpeed">
        </div>
        <button v-on:click="stop">stop</button>
        <button v-on:click="pause">pause</button>
        <button v-on:click="play">play</button>
    </div>
</template>

<script>
  import Lottie from './lottie.vue';
  import * as animationData from './assets/pinjump.json';

  export default {
    name: 'app',
    components: {
      'lottie': Lottie
    },
    data() {
      return {
        defaultOptions: {animationData: animationData},
        animationSpeed: 1
      }
    },
    methods: {
      handleAnimation: function (anim) {
        this.anim = anim;
      },

      stop: function () {
        this.anim.stop();
      },

      play: function () {
        this.anim.play();
      },

      pause: function () {
        this.anim.pause();
      },

      onSpeedChange: function () {
        this.anim.setSpeed(this.animationSpeed);
      }
    }
  }
</script>

这是之前官方给的demo代码 基本上和平时使用没啥不一样(所以只需要复制粘贴就ok了)

# json 动画效果AE转json后的文件
import * as animationData from './assets/pinjump.json';

引入的json需要改!!!

# 这里引入了 lottie组件
import Lottie from './lottie.vue';
# lottie.vue
<template>
    <div :style="style" ref="lavContainer"></div>
</template>

<script>
  import lottie from 'lottie-web'
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: this.options.animationData,
        rendererSettings: this.options.rendererSettings
      }
      )
      this.$emit('animCreated', this.anim)
    }
  }
</script>

然后会发现还是有错误(缺少组件!) 其实很简单啦,打开仓库进入src然后打开lottle组件然后复制过去就ok啦hhh(简单)

效果图

这是效果图(是不是很简单233

使用别的json文件

官方给给了一个很好的效果网站 地址

下载json文件 然后更换引入的json

# json 动画效果AE转json后的文件
import * as animationData from './assets/blood_transfusion_kawaii.json.json';

效果图

是不是也很简单!!!

使用vue-lottie模仿san官网的动画效果

先来效果图~~~

效果图

因为有多个需要用到lottie动画,想了半天不知道怎么解决调用方法的问题 最后想了一个简单的方法

直接将每一个动画抽到一个组件 组件内依然用之前的方法(稍微改造一下就行

然后利用父子组件传数据的形式传递json文件 子组件props接收

# html
<template>
  <div class="card-panel" @mouseenter="lottiePlay" @mouseleave="lottieStop">
    <div class="card-panel-icon-wrapper icon-shoppingCard">
      <lottie :options="defaultOptions" :height="80" :width="80" v-on:animCreated="handleAnimation" />
    </div>
    <div class="card-panel-description">
      <div class="card-panel-text">今日活跃</div>
      <div class="card-panel-num">2600</div>
    </div>
  </div>
</template>
# props
props: {
    animationDataPath: {
      type: Object,
      default: null
    }
  },
  data() {
  return {
    defaultOptions: {
      // animationData: animationDataPath,
      animationData: this.animationDataPath,
      autoplay: false,  # 不自动播放
      loop: false     # 不循环
    }
  }
}
# 事件调用
@mouseenter="lottiePlay" @mouseleave="lottieStop"

lottiePlay: function() {
  this.anim.play()
},
lottieStop: function() {
  this.anim.stop()
}

然后就到了父组件传数据

# 父组件
<panel-lottie :animationDataPath="animationDataPathOne"></panel-lottie>

animationDataPathOne: require('../../../public/json/compass.json')

自己用到了require引入json 然后打包出来 一样可以正常运行 如果大家有很好的方法可以教我!我好学习学习


emmmmm 大概就是这么多吧~

如果实在需要这个的源码可以打开我的github仓库 由于项目还是一个半成品 所以地址就放在最后面了

vue-lottie源码

项目地址

如果大家觉得不错的话 可以点star哦(厚脸皮233

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容