0

не подскажите как реализовать такую анимацию круга только на SVG https://codepen.io/HTMLProgrammer/pen/qBbdJZW?editors=1010

let ctx = canvas.getContext("2d"),
	w = canvas.width,
	h = canvas.height,
	angle = 0;

function draw() {
	ctx.fillStyle = "#fff";
	ctx.fillRect(0, 0, w, h);

	ctx.save();
	ctx.translate(w / 2, h / 2);

	ctx.beginPath();
	ctx.arc(0, 0, 50, 0, angle);

	ctx.lineTo(0, 0);

	ctx.fillStyle = "#000";
	ctx.fill();

	ctx.restore();

	if (angle < Math.PI * 2) angle += 0.1;

	requestAnimationFrame(draw);
}

draw();

canvas.onclick = () => (angle = 0);
<canvas id="canvas"></canvas>

2 ответа 2

4

Маленький хак

<svg viewBox="-250 -150 500 500" width="300px">
  <circle r="50" 
          fill="none"
          stroke="#000" 
          stroke-width="100">
    <animate attributeName="stroke-dasharray"
             begin="0s" 
             dur="2s"
             values="0 315; 315 315"
             repeatCount="3"/>
  </circle>
</svg>

Запуск по клику на кнопке

<svg viewBox="-250 -150 500 500" width="300px">
  <defs>
    <style>
      #button{
        cursor: pointer;
      }
    </style>
  </defs>
  <circle r="50" 
          fill="none"
          stroke="#000" 
          stroke-width="100">
    <animate attributeName="stroke-dasharray"
             begin="button.click" 
             dur="2s"
             values="0 315; 315 315"
             repeatCount="1"/>
  </circle>
  <g id="button">
  <rect width="240" height="60" x="-120" y="150" ry="6"/>
   <text fill="white" y="185" x="-95"> Начать анимацию</text> 
  </g>
</svg>

3
  • Если нужны повторы, без длинных пауз, то при радиусе равном 50 длина окружности равна 314 поэтому можно написать values="0, 314; 314, 0 " 7 июн 2020 в 15:22
  • @Alexandr_TT я знаю - от фанаря писал размеры 7 июн 2020 в 15:23
  • 1
    Спасибо большое 7 июн 2020 в 15:50
4

// Только для того, чтобы получить stroke-dasharray

const circle = document.querySelector('svg circle');
const circleLength = circle.getTotalLength();

console.log(circleLength);
body {
	margin: 0;
	padding: 0;
}

svg {
	width: 100vw;
	height: 100vh;
	display: block;
}

svg circle {
	stroke-width: 20;
	stroke: #000;
	fill: none;
	stroke-dasharray: 63;
	stroke-dashoffset: 63;
	transition: stroke-dashoffset linear 2s;
}

svg:hover circle {
	stroke-dashoffset: 0;
}
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="10"/>
</svg>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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