vue-svg-draw

这是一个封装了vivus功能的vue组件。
vivus是一款展示svg路径动画的js插件，不需要其它依赖库。

Build Setup

install dependencies

npm install vue-svg-draw --save

使用方法

import vueSvgDraw from 'vue-svg-draw'

注册组件

  components:{
    vueSvgDraw
  }

<vue-svg-draw file='/svg/2.svg' type="oneByOne" ref="vuesvg" :onReady="ready" pathTiming="EASE_OUT"></vue-svg-draw> this.$refs.vuesvg.stop()

options

| Property | Type | Default | Description | Value | | --------------------| :----------------: | :-------------:| ----------------------------------------------------- | :------------------------------------------------------: | | vivusId | string | 'vivusId' | 元素id | 任意字符串 | | file | string | 无(必填) | svg文件路径 | 绝对路径 | | type | string | delayed | 定义使用哪一种动画类型 | delayed, async, oneByOne 或 script | | duration | integer | 200 | 动画的持续时间 | | | start | string | inViewport | 定义如何触发SVG动画 | inViewport,manual,autostart | | dashGap | integer | 2 | dashes之间的空白间距 | 默认值为2 | | forceRender | boolean | true | 强制浏览器重新绘制所有的路径 | 默认值为true，只在IE中有效 | | onReady | function | function(){} | 当实例在准备开始动画时调用 | | | pathTiming| string | 'EASE' | Timing animation function for each path element of the SVG | 'EASE' 'EASE_IN' 'EASE_OUT' 'EASE_OUT_BOUNCE' | | animTiming | string | 'EASE' | Timing animation function for the complete SVG | 'EASE' 'EASE_IN' 'EASE_OUT' 'EASE_OUT_BOUNCE' | | callBack | function | function(){} | 绘制后的回调 | function(){} |

methods

• stop()
• reset()
• play(speed,fun)
• finish()
• setFrameProgress(progress)
• getStatus()
• destroy()

demo

相关链接

vivus

vivus 中文

svg在线制作