Как изменить начальную точку анимации линии SVG? - PullRequest
Новая
       65

Как изменить начальную точку анимации линии SVG?

2 голосов
/ 01 октября 2019

Я новичок в работе с SVG и анимацией. Я пытаюсь просто сделать анимацию, где шестиугольник рисует сам, начиная с самой верхней точки. Однако анимация начинается с средней правой точки. Как лучше всего решить эту проблему? 

.root {
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 3px;
    stroke-dasharray: 1300px;
    stroke-dashoffset: 1300px;
    animation: move 3s linear forwards;
}

@keyframes move {
    100% {
        stroke-dashoffset: 0;
    }
}
<div class="root">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" width="355.1" height="411.22"><defs><path class="shape" d="M485.31 197.76v206.12L307.76 506.94 130.2 403.88V197.76L307.76 95.71l177.55 102.05z" id="a"/></defs><use xlink:href="#a" fill-opacity="0" stroke="#61fbde"/></svg>

</div>

Ответы [ 2 ]

3 голосов
/ 01 октября 2019

Вам потребуется изменить значение атрибута d, чтобы путь начинался там, где должна начинаться анимация 

.root {
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 3px;
    stroke-dasharray: 1300px;
    stroke-dashoffset: 1300px;
    animation: move 3s linear forwards;
}

@keyframes move {
    100% {
        stroke-dashoffset: 0;
    }
}
<div class="root">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" width="355.1" height="411.22"><defs><path class="shape" d="
M307.76 95.71
L485.31 197.76
v206.12
L307.76 506.94 130.2 403.88
V197.76
L307.76 95.71
z" id="a"/></defs><use xlink:href="#a" fill-opacity="0" stroke="#61fbde"/></svg>

</div>
2 голосов
/ 05 октября 2019

Еще одна идея, позволяющая запускать анимацию из любой точки мира без перерисовки фигуры

Может использоваться для stroke-dasharray анимации при рисовании линий

Перемещение начальной точки анимациис stroke-dashoffset

Общая длина строки составляет 1232px

  • Полностью скрытая строка - stroke-dasharray = "0, 1232"

  • линия видима - stroke-dasharray =" 1232, 0 "

Поэтому для анимации рисования линий необходимо увеличить длину обводки с нуля до максимума - 1232px 

@keyframes move {
     0% {
        stroke-dasharray: 0, 1232;
    }
    100% {
        stroke-dasharray: 1232,0;
    }
}

  • Чтобы переместить начальную точку анимации на вершину шестиугольника

    stroke-dashoffset="205.3" 

.root {
  width:25%;
  height:25%;
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 5px;
    stroke-dasharray: 0,1232px;
    stroke-dashoffset: 205.3px;
    animation: move 3s linear forwards;
}

@keyframes move {
     0% {
        stroke-dasharray: 0, 1232;
    }
    100% {
        stroke-dasharray: 1232,0;
    }
}
<div class="root">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" >
<defs>
 <path class="shape" d="M485.31 197.76v206.12L307.76 506.94 130.2 403.88V197.76L307.76 95.71l177.55 102.05z" id="a" />

 </defs>
  <use xlink:href="#a"  /> 
  </svg>

</div>

Используя этот подход, вы можете запустить анимацию откуда угодно, например, из нижней вершины шестиугольника

Переместите начальную точку анимации линии в нижнюю часть шестиугольника stroke-dashoffset: 821.3px; 

.root {
width:25%;
height:25%;
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 5px;
    stroke-dasharray: 0,1232px;
    stroke-dashoffset: 821.3px;
    animation: move 3s linear forwards;
}

@keyframes move {
     0% {
        stroke-dasharray: 0, 1232;
    }
    100% {
        stroke-dasharray: 1232,0;
    }
}
<div class="root">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" >
<defs>
 <path class="shape" d="M485.31 197.76v206.12L307.76 506.94 130.2 403.88V197.76L307.76 95.71l177.55 102.05z" id="a" />

 </defs>
  <use xlink:href="#a"  /> 
  </svg>

</div>

Пример рисования из одной точки с двумя симметричными линиями 

.root {
width:25%;
height:25%;
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 5px;
    stroke-dasharray: 0,1232px;
    stroke-dashoffset: 821.3px;
}
<div class="root">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" >
<defs>
 <path class="shape" d="M485.31 197.76v206.12L307.76 506.94 130.2 403.88V197.76L307.76 95.71l177.55 102.05z" id="a" >
  <animate attributeName="stroke-dasharray" dur="4s" values="0,616 0,616;0,0  1232,0" repeatCount="indefinite" />
 </path>

 </defs>
  <use xlink:href="#a"  /> 
  </svg>

</div>

Пример анимации шестиугольника с двухмерным рисунком 

.root {
width:25%;
height:25%;
  background-color: black;
}
.shape {
    fill: none;
    stroke: #61fbde;
    stroke-width: 5px;
    stroke-dasharray: 0,1232px;
    stroke-dashoffset: 205.3px;
}
<div class="root">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="129.204 94.714 359.102 415.224" >
<defs>
 <path class="shape" d="M485.31 197.76v206.12L307.76 506.94 130.2 403.88V197.76L307.76 95.71l177.55  102.05z" id="a" >
    <animate
	  attributeName="stroke-dasharray"
	  dur="3s"
	  values="
	  0,1232;
	  205.3,1027;
	  410.6,822;
	  616,616;
	  822,410.6;
	  1027.3,205.3;
	  1232,0"
	  calcMode="discrete"
	  repeatCount="indefinite" />
 </path>

 </defs>
  <use xlink:href="#a"  /> 
  </svg>

</div>
...