13

Спустя неоднократные попытки анимировать круг со свойством stroke-dasharray, придумал вариант вложенности circle в circle:

svg {
	width: 300px;
}

svg circle {
	fill: none;
	stroke-width: 10;
	stroke: #000;
}

svg circle.default {
	opacity: .2;
	stroke-dasharray: 125.6;
}

svg circle.default.inner {
	opacity: .5;
	stroke-dashoffset: 125.6;
	animation: circle-default 3s infinite;
}

@keyframes circle-default {
	to {
		stroke-dashoffset: 0;
	}
}

svg circle.dashed {
	stroke-dasharray: 1px;
}
<svg viewBox="0 0 120 120">
	<g>
		<circle class="default" cx="25" cy="25" r="20"></circle>
		<circle class="default inner" cx="25" cy="25" r="20"></circle>
	</g>
	<g>
		<circle class="dashed" cx="80" cy="25" r="20"></circle>
	</g>
</svg>

JSFIDDLE

Если слева анимирование происходит без каких-либо проблем, то объект справа не поддаётся такому же анимированию.

Идея заключается в помещении одного circle (который по частям) в чистый circle (в котором dasharray высчитывается как в первом). Тогда удастся анимировать внешний circle и сделать загрузку кружка по частям.

Хочется сделать анимацию разворачивания блока, но чтобы всё это было по частям (см. второй объект).

4
  • Попробую ответить на ваш вопрос. Вы не против, если моё решение будет немного не совпадать с вашим направлением? 23 окт 2019 в 16:59
  • Может вернутся ребята, в прошлых годах было очень много сильных отвечающих по SVG/. 23 окт 2019 в 17:04
  • Сделать вариант с анимацией в CSS? Правда не все сможет CSS, в частности он не понимает stroke-dasharray с несколькими парами значений 23 окт 2019 в 18:37
  • Это давний баг, который до сих пор не решен. На EnSO была дискуссия на эту тему Просто задайте вопрос здесь, поищем решения, мне самому интересно 23 окт 2019 в 18:42

5 ответов 5

14

Когда вы разбиваете круг на равные сегменты с помощью stroke-dasharray, то невозможно анимировать их появление с заполнением круга с помощью stroke-dashoffset

Так как круг уже занят полностью. Можно поиграться с изменением величины и количества сегментов, то получатся интересные варианты, но это не то, что вы хотели получить:

<svg width="360" height="360" viewBox="0 0 120 120">
	
	   <circle class="background" cx="25" cy="25" r="20" fill="none" stroke="#E4E4E4" stroke-width="8" />
		<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black" stroke-width="8"
		stroke-dasharray="125.6" stroke-dashoffset="125.6">
		
		 <animate attributeName="stroke-dasharray" dur="7s" values="1.57, 124.03; 1.57,1.57" fill="freeze" /> 
			</circle>
	
</svg>

Поэтому можно решить данный вопрос с помощью маски, которая будет открывать круг, заранее разбитый на сегменты, создавая иллюзию заполнения:

Маска будет двигаться с помощью stroke-dashoffset, как у вас первая окружность.

<svg width="360" height="360" viewBox="0 0 120 120">
	
<defs>
	 <mask id="msk1">
      <circle class="maskCircle" cx="25" cy="25" r="20" fill="none" stroke="white" stroke-width="8" stroke-dashoffset="0" stroke-dasharray="125.6">
	     <animate attributeName="stroke-dashoffset" dur="4s" values="125.6;0" fill="freeze" repeatCount="indefinite" />
	 </circle>
	 </mask>
</defs>
	   <circle class="background" cx="25" cy="25" r="20" fill="none" stroke="#E4E4E4" stroke-width="8" />
		<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black" stroke-width="8"
		stroke-dasharray="1.57" stroke-dashoffset="20"  mask="url(#msk1)">
		
		</circle>
	
</svg>

8

Если поддержка браузерами позволяет, то можно так (при желании можно ещё поиграться с длиной штриха и анимацией steps(5)):

html, body, svg {
  margin: auto;
  display: block;
  height: 100%;
}

.dashed {
  fill: none;
  stroke-width: 10;
  stroke: black;
  stroke-dasharray: 2.61;
  stroke-dashoffset: -1.275;
}

.hidden {
  fill: transparent;
}

g {
  animation: clip 7s linear infinite;
}

@keyframes clip {
  from { clip-path: polygon(50% 50%, 150% 50%, 150% 50%, 50% 50%, 50% 150%, 50% 150%, 50% 50%, -50% 50%, -50% 50%, 50% 50%, 50% -50%, 50% -50%, 50% 50%); }
   25% { clip-path: polygon(50% 50%, 150% 50%, 50% 150%, 50% 50%, 50% 150%, 50% 150%, 50% 50%, -50% 50%, -50% 50%, 50% 50%, 50% -50%, 50% -50%, 50% 50%); }
   50% { clip-path: polygon(50% 50%, 150% 50%, 50% 150%, 50% 50%, 50% 150%, -50% 50%, 50% 50%, -50% 50%, -50% 50%, 50% 50%, 50% -50%, 50% -50%, 50% 50%); }
   75% { clip-path: polygon(50% 50%, 150% 50%, 50% 150%, 50% 50%, 50% 150%, -50% 50%, 50% 50%, -50% 50%, 50% -50%, 50% 50%, 50% -50%, 50% -50%, 50% 50%); }
    to { clip-path: polygon(50% 50%, 150% 50%, 50% 150%, 50% 50%, 50% 150%, -50% 50%, 50% 50%, -50% 50%, 50% -50%, 50% 50%, 50% -50%, 150% 50%, 50% 50%); }
}
<svg viewBox="-32 -32 64 64">
  <g>
    <circle r="25" class="hidden" />
    <circle r="20" class="dashed" />
  </g>
</svg>

3
  • @MoloF, мне аж интересно стало, что считается обычным решением, а что необычным?)))
    – Qwertiy
    23 окт 2019 в 20:54
  • @Qwertiy Заценил, зачет (+) 23 окт 2019 в 21:02
  • 1
    @Qwertiy, тем что я о таком и не знал. Если про SVG animate, JS, я знал, то про это уж точно нет
    – MoloF
    23 окт 2019 в 21:08
7

Таким вот способом можно получить нечто по сложнее окружности:

let r = 80

function draw(t){
  let a = (t/500)%(Math.PI*7)
  let pts = [];
  for (let i=0; i<a; i+=0.01){
    pts.push([Math.cos(i)*(r-i*3), Math.sin(i)*(r-i*3)])
  }
  circle.setAttribute('d', 'M' + pts.join('L')) 
  requestAnimationFrame(draw)
}

requestAnimationFrame(draw)
body {margin:0;overflow:hidden}
<svg width="100vw" height="100vh" viewBox="-100 -100 200 200">
 <path id=circle fill="none" stroke="black" stroke-width="18"
		   stroke-dasharray="2"></path>
</svg>

6
  • О, улиточка :))
    – Qwertiy
    23 окт 2019 в 21:14
  • Можно вас попросить посетить вопрос: ru.stackoverflow.com/questions/1037944/… ?
    – MoloF
    23 окт 2019 в 21:15
  • 1
    @MoloF пробовали поместить svg в разные div, а их уже подвигать по z? 23 окт 2019 в 21:16
  • Нет, думал есть более гуманные способы, если выхода нет и это проблема не моя а SVG то данный вариант вполне подходит для решения вопроса!
    – MoloF
    23 окт 2019 в 21:21
  • @MoloF ну в svg нет 3д трансформов, насколько мне известно 23 окт 2019 в 21:21
7

Концепт оформления галереи

Использовал эффект анимации рисования сегментов из первого ответа.

При наведении курсора рисуется сегментный круг с анимацией появления изображения.
При уводе курсора сегментный круг сворачивается и прозрачность изображения уменьшается.

Подробности в комментариях к коду:

.container {
width:75%;
height:75%;
}
<div class="container">
<svg  viewBox="0 0 120 120">
	
<defs>
	 <mask id="msk1">
      <circle class="maskCircle" cx="25" cy="25" r="20" fill="none" stroke="white" stroke-width="5" stroke-dashoffset="125.6" stroke-dasharray="125.6">
	   <!-- анимация рисования черточек -->  
		 <animate
		   attributeName="stroke-dashoffset"
		   begin="background.mouseover"
		   end="background.mouseout"
		   dur="3s"
		   values="125.6;0"
		   fill="freeze"
		   repeatCount="1" /> 
       <!-- анимация стирания черточек --> 	  
	  <animate
	     attributeName="stroke-dashoffset"
		 begin="background.mouseout"
		 dur="1s"
		 values="0;125.6"
		 fill="freeze"
		 repeatCount="1" />
	 </circle>
	 </mask>
	
    <pattern id="image" x="0%" y="0%" height="100%" width="100%">
      <image x="5" y="3" width="29%" height="29%" opacity="0.1" xlink:href="https://i.stack.imgur.com/acozx.jpg">
	   <!-- анимация увеличения прозрачности изображения при наведении -->
	   <animate id="an1"
	     attributeName="opacity"
		 begin="background.mouseover"
		 dur="4s"
		 values="0.05;1"
		 fill="freeze" /> 
      <!-- анимация уменьшения прозрачности изображения при уводке курсора-->	  
	  <animate
	     attributeName="opacity"
		 begin="background.mouseout"
		 dur="1s"
		 to="0.05"
		 fill="freeze" />  
	  
	  </image>
    </pattern>
   
</defs> 
    <g id="gr1">
	   <circle id="background" cx="25" cy="25" r="20" fill="url(#image)" stroke="#E4E4E4" stroke-width="5" />
		<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black" stroke-width="5"
		stroke-dasharray="1.57" stroke-dashoffset="20"  mask="url(#msk1)">
		
		</circle>
	</g>  
	
	 
</svg>
</div>

Пример анимации из одной точки 2 линиями

.container {
width:75%;
height:75%;
}
<div class="container">
<svg  viewBox="0 0 120 120">
	
<defs>
	 <mask id="msk1">
      <circle class="maskCircle" cx="25" cy="25" r="20" fill="none" stroke="white" stroke-width="5" stroke-dashoffset="-31.4" stroke-dasharray="0,62.8;0, 62.8">
	   <!-- анимация рисования черточек -->  
		 <animate
		   attributeName="stroke-dasharray"
		   begin="background.mouseover"
		   end="background.mouseout"
		   dur="3s"
		   values="0, 62.8 0, 62.8;0,0 125.6,0"
		   fill="freeze"
		   repeatCount="1"
		   restart="whenNotActive" /> 
       <!-- анимация стирания черточек --> 	  
	  <animate
	     attributeName="stroke-dasharray"
		 begin="background.mouseout"
		 dur="1s"
		 values="0,0 125.6,0;0, 62.8 0, 62.8"
		 fill="freeze"
		 repeatCount="1"
		 restart="whenNotActive" />
	 </circle>
	 </mask>
	
    <pattern id="image" x="0%" y="0%" height="100%" width="100%">
      <image x="-2.8" y="0" width="38%" height="38%" opacity="0.1" xlink:href="https://i.stack.imgur.com/EyUuX.jpg">
	   <!-- анимация увеличения прозрачности изображения при наведении -->
	   <animate id="an1"
	     attributeName="opacity"
		 begin="background.mouseover"
		 dur="4s"
		 values="0.05;1"
		 fill="freeze" /> 
      <!-- анимация уменьшения прозрачности изображения при убирании курсора-->	  
	  <animate
	     attributeName="opacity"
		 begin="background.mouseout"
		 dur="1s"
		 to="0.05"
		 fill="freeze" />  
	  
	  </image>
    </pattern>
   
</defs> 
    <g id="gr1">
	   <circle id="background" cx="25" cy="25" r="20" fill="url(#image)" stroke="#E4E4E4" stroke-width="5" />
		<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black" stroke-width="5"
		stroke-dasharray="1.57" stroke-dashoffset="20"  mask="url(#msk1)">
		
		</circle>
	</g>  
	
	 
</svg>
</div>

0
6

В целом что-то такое всегда можно изобразить при помощи js математики и команды arc:

let r = 80

function draw(t){
  let a = (t/1000)%(Math.PI*2)
  let x = Math.cos(a)*r;
  let y = Math.sin(a)*r;
  let largeArc = a > Math.PI ? 1 : 0;
  circle.setAttribute('d', `M${r},0A${r},${r},0,${largeArc},1,${x},${y}`) 
  requestAnimationFrame(draw)
}

requestAnimationFrame(draw)
body {margin:0;overflow:hidden}
<svg width="100vw" height="100vh" viewBox="-100 -100 200 200">
 <path id=circle fill="none"stroke="black" stroke-width="18" stroke-dasharray="2"></path>
</svg>

7
  • Интересно (тоже плюс), но в нижней части окружности шевеление довольно заметно - как будто волна туда-обратно бегает, особенно в маленьком размере. Кстати, в верхней - тоже, но нижнюю больше заметно - возможно она просто дольше на экране.
    – Qwertiy
    23 окт 2019 в 21:09
  • Эм.. А как ты смог полный круг через одну дугу сделать? Вроде ж две надо, потому что точки не могут совпадать?
    – Qwertiy
    23 окт 2019 в 21:12
  • @Qwertiy так они и не совпадут, из-за точности синусов итд, да и если совпадет то на долю секунды - а потом по-новой 23 окт 2019 в 21:14
  • @StrangerintheQ, по идее в момент когда отрисован полный круг, у него начальная и конечная точка должны совпадать. А если они не совпадают просто из-за точности, то вполне может получиться, что они не совпадают в другую сторону и вместо полного оборота отрисуется почти нулевой. Или я неправ?
    – Qwertiy
    23 окт 2019 в 21:16
  • @Qwertiy прав, это начало следующего оборота, в общем этого не видно =) 23 окт 2019 в 21:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.