SVG заполнить страницу загрузки анимации - PullRequest
Новая
       16

SVG заполнить страницу загрузки анимации

0 голосов
/ 30 сентября 2018

Я пытаюсь создать анимацию загрузки страницы, где появляется линия 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, что я могу сделать, чтобы получить эффект в любом случае?

1 Ответ

0 голосов
/ 30 сентября 2018

Я не уверен, что действительно понял ваш вопрос.Вы просите что-то вроде: 

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>
...