帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue Lottie动画组件 – vue3-lottie

帝国模板之家 2022-03-02 网页特效 评论

描述:

vue3-lottie 是一个 Vue 组件,允许您在应用程序中创建可自定义的抽签动画。

使用:

1、导入并注册vue3-lottie。

1. Import and register the vue3-lottie.

// globally
import { createApp } from 'vue'
import Vue3Lottie from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
createApp(App).use(Vue3Lottie).mount('#app')
// locally
import { Vue3Lottie } from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
export default {
  components: {
    Vue3Lottie,
  },
}

2. 将 Vue3Lottie 组件添加到您的应用程序中,并定义动画数据如下:

<template>
  <Vue3Lottie :animationData="animationJSON" :height="300" :width="200" />
</template>
import animationJSON from './lotties/animation.json'
export default {
  components: {
    Vue3Lottie,
  },
  data() {
    return {
      animationJSON,
    }
  },
}

3. 可用的组件配置项

animationData: {
  type: Object as PropType<LottieProps['animationData']>,
  default: () => ({}),
},
animationLink: {
  type: String as PropType<LottieProps['animationLink']>,
  default: '',
},
loop: {
  type: [Boolean, Number] as PropType<LottieProps['loop']>,
  default: true,
},
autoPlay: {
  type: Boolean as PropType<LottieProps['autoPlay']>,
  default: true,
},
width: {
  type: [Number, String] as PropType<LottieProps['width']>,
  default: '100%',
},
height: {
  type: [Number, String] as PropType<LottieProps['height']>,
  default: '100%',
},
speed: {
  type: Number as PropType<LottieProps['speed']>,
  default: 1,
},
delay: {
  type: Number as PropType<LottieProps['delay']>,
  default: 0,
},
direction: {
  type: String as PropType<LottieProps['direction']>,
  default: 'forward',
},
pauseOnHover: {
  type: Boolean as PropType<LottieProps['pauseOnHover']>,
  default: false,
},
playOnHover: {
  type: Boolean as PropType<LottieProps['playOnHover']>,
  default: false,
},
backgroundColor: {
  type: String as PropType<LottieProps['backgroundColor']>,
  default: 'transparent',
},
pauseAnimation: {
  type: Boolean as PropType<LottieProps['pauseAnimation']>,
  default: false,
},

4. API 方法

// play
this.$refs.lottieContainer.play()
// pause
this.$refs.lottieContainer.pause()
// stop
this.$refs.lottieContainer.stop()
// destroy
this.$refs.lottieContainer.destroy()
// set speed
this.$refs.lottieContainer.setSpeed(2)
// 'forward' or 'reverse'
this.$refs.lottieContainer.setDirection('forward')
// get duration
this.$refs.lottieContainer.getDuration(true)
// go to a specific frame
this.$refs.lottieContainer.goToAndStop(10, true)
this.$refs.lottieContainer.goToAndPlay(5, true)
// play segments
this.$refs.lottieContainer.playSegments([10, 20], true)
// set sub frame
this.$refs.lottieContainer.setSubFrame(true)

5.事件

  • @onComplete
  • @onLoopComplete
  • @onEnterFrame
  • @onSegmentStart
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言