Question

我正在尝试创建一个页面加载动画，在该动画中SVG线出现并带有绘画效果，此后该线应一直扩展到左上角，这样屏幕就可以被填充了，并且可以将内容放置在填充的屏幕顶部，我遇到了anime.js，并且第一部分开始工作，

<div class="line">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1173.98 1399.25">
        <g id="line">
            <path class="cls-1" d="M1168.8,89.74a259.34,259.34,0,0,0-25-21c-40.32-29.78-78.88-40.21-105-47-27.1-7-84.53-21.37-159-10-14.65,2.24-80.68,13.21-152,59-34.75,22.31-55.62,43.17-93,81-52.81,53.45-61.88,72.92-125,147-52.64,61.79-84.15,98.76-133,142-19.42,17.19-56.54,44.69-130,99-113.65,84-125,89.77-149,117-24.89,28.2-63.75,73.27-81,144-5.72,23.48-20.52,87.83,6,159,9.42,25.27,20.56,42,34,62,24.8,36.81,51.52,66,124,130,98.55,87.06,147.82,130.59,156,136,10.78,7.12,38,24.52,58,58a166.3,166.3,0,0,1,20,52" />
        </g>
    </svg>
</div>

.cls-1 {
  fill: none;
  stroke: #000;
  stroke-miterlimit: 10;
  stroke-width: 15px;
}

var lineDrawing = anime({
    targets: '.line #line path',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 2000,
    delay: function (el, i) { return i * 250 },
    direction: 'alternate',
    loop: false
});

要获得填充效果，我在网上环顾四周，发现可以使用变形效果来实现所需的效果，但是我的SVG行没有任何<polygon points，我该怎么办？反正？

Answer 1

我不确定您是否真正理解您的问题。您是否要求类似的东西？

function ldraw() {
   var lineDrawing = anime({
      targets: '.line #line path',
      strokeDashoffset: [anime.setDashoffset, 0],
      easing: 'easeInOutSine',
      duration: 2000,
      delay: function (el, i) { return i * 250 },
      direction: 'alternate',
      loop: false
   });
   window.setTimeout(lgrow,2000);
}

function lgrow() {
   var lineGrowing = anime({
      targets: '#line .cls-1',
      easing: 'easeInOutSine',
      duration: 2000,
      strokeWidth: ['15px','200%'],
      loop: false
   });
}

window.onload=function() {
  window.setTimeout(ldraw,1000);
};

.cls-1 {
  fill: none;
  stroke: #000;
  stroke-miterlimit: 0;
  stroke-width: 15px;
  stroke-linecap:round;
  stroke-linejoin:round;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="line">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1173.98 1399.25">
        <g id="line">
            <path class="cls-1" d="M1168.8,89.74a259.34,259.34,0,0,0-25-21c-40.32-29.78-78.88-40.21-105-47-27.1-7-84.53-21.37-159-10-14.65,2.24-80.68,13.21-152,59-34.75,22.31-55.62,43.17-93,81-52.81,53.45-61.88,72.92-125,147-52.64,61.79-84.15,98.76-133,142-19.42,17.19-56.54,44.69-130,99-113.65,84-125,89.77-149,117-24.89,28.2-63.75,73.27-81,144-5.72,23.48-20.52,87.83,6,159,9.42,25.27,20.56,42,34,62,24.8,36.81,51.52,66,124,130,98.55,87.06,147.82,130.59,156,136,10.78,7.12,38,24.52,58,58a166.3,166.3,0,0,1,20,52" />
        </g>
    </svg>
</div>

SVG填充页面加载动画

1 个答案: