动效解决方案 Lazy Line Painter.js

一、使用 Lazy Line Painter 轻松创建 SVG 路径动效。你可以在AI中制作出SVG文档，上传到转换器中。后者会帮你将它处理成为动效，生成jQuery 文档。如有必要，你还可以编辑代码进行微调。

• 官网 http://lazylinepainter.info

二、安装使用

  npm i lazy-line-painter

接下来 main.js中引入

  import LazyLinePainter from 'lazy-line-painter'

四、场景实践

1、心跳走线

<template>
  <div>
    <svg
      t="1636429325581"
      class="icon lazy-line-painter"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="2524"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="200"
      height="200"
      data-llp-composed="true"
      id="demo-svg"
    >
     
      <path
        d="M768 469.333333a21.28 21.28 0 0 1-13.813333-5.08c-92.453333-78.58-141.093333-125.333333-167.88-161.333333C557.046667 263.533333 554.666667 236.286667 554.666667 207.24 554.666667 140 609.333333 85.333333 676.573333 85.333333A121.866667 121.866667 0 0 1 768 126.586667 121.866667 121.866667 0 0 1 859.426667 85.333333C926.666667 85.333333 981.333333 140 981.333333 207.24c0 29.046667-2.38 56.293333-31.64 95.653333-26.786667 36-75.426667 82.78-167.88 161.333334A21.266667 21.266667 0 0 1 768 469.333333z m-91.426667-341.333333A79.333333 79.333333 0 0 0 597.333333 207.24c0 24.246667 1.56 41.066667 23.213334 70.193333 23.106667 31.073333 67.56 74.093333 147.453333 142.526667 79.893333-68.433333 124.346667-111.453333 147.453333-142.526667 21.653333-29.126667 23.213333-45.946667 23.213334-70.193333a79.253333 79.253333 0 0 0-151.28-33.046667 21.333333 21.333333 0 0 1-38.773334 0A79.506667 79.506667 0 0 0 676.573333 128zM511.18 923.193333L592.093333 640H1002.666667a21.333333 21.333333 0 0 0 0-42.666667H576a21.333333 21.333333 0 0 0-20.513333 15.473334l-63.446667 222.06L340.666667 229.493333a21.333333 21.333333 0 0 0-41.52 0.546667L217.553333 597.333333H21.333333a21.333333 21.333333 0 0 0 0 42.666667h213.333334a21.333333 21.333333 0 0 0 20.826666-16.706667l65.726667-295.78L470 922.506667a21.333333 21.333333 0 0 0 20.313333 16.16h0.353334a21.333333 21.333333 0 0 0 20.513333-15.473334z"
        fill="#1296db"
        p-id="2525"
        data-llp-id="demo-svg-0"
        data-llp-duration="5000"
        data-llp-repeat="20"
        data-llp-delay="0"
        fill-opacity="0"
        
      />
    </svg>
  </div>
</template>

<script>
import LazyLinePainter from "lazy-line-painter";

export default {
  data() {
    return {};
  },
  mounted() {
    let el = document.getElementById("demo-svg");
    let demoSvg = new LazyLinePainter(el, {
        "ease": "easeLinear",
        "strokeWidth": 33.8,
        "strokeOpacity": 1,
        "strokeColor": "#1FBC9C",
        "strokeCap": "square",
        "delay": 380,
        "repeat": 20
    });
    demoSvg.paint();
  },
};
</script>

<style lang="less" scoped>
    #demo-svg {
       width: 70vw;
       height: 70vh;
       position: relative;
       overflow: visible;
    }
</style>

2、赚到手软(使用转换器制作)

转换器制作，直接导出zip包解压后提取代码即可在项目中使用,这里就不贴代码了

感兴趣的童鞋可以去尝试下，喜欢的看官可以麻烦您点点星星吗，后续会更新更多好玩的~~