Отрисовать спираль на сайте

379

18 ноября 2017, 10:51

Интересует какими лучше способами нарисовать (анимировать само рисование спирали) спираль Ферма на сайте? (Чтобы пользователь видел как она рисуется) Можно ли её сделать на чистом css? А если я хочу анимировать её с помощью математической функции это только в js? P.S. Прошу не давать готовых решений, а направить какими средствами её можно реализовать.

Answer 1

Спираль - это не html-элемент, поэтому и средства css для ее рисования (в смысле - анимированного создания из ничего) в чистом виде здесь применить не получится.

Я вижу три варианта:

Один из вариантов уже описали здесь - представить что спираль это картинка, или див с картинкой в фоне и не меняя размер фона увеличить див - фон постепенно появится полностью, типа "отрисовался", ага ))
Второй вариант - это положить эту спираль картинкой svg - это уже логичнее, всё таки это по сути векторный элемент, у которого внутри линия. И сделать постепенную прорисовку линии например при помощи vivus.js
JS-рисование при помощи канвас.

Вот как-то так, выбирай )

Answer 2

Можно так. Сделал увеличение при наведении, реально можно любое событие подвязать...

.spiral { 
  display:block; 
  width:10px; 
  height:10px; 
  background: url(https://i.stack.imgur.com/hAalo.png) no-repeat center; 
  position: absolute; 
  top:50%; 
  left:50%; 
  border-radius:50%; 
  transition: all 5s; 
} 
 
.spiral:hover{ 
  width:300px; 
  height:300px; 
  margin-left:-145px; 
  margin-top:-145px; 
 
}

<div class="spiral"><div>

Answer 3

Вариант SVG

Поэтапно реализация задачи:

В векторном редакторе, например Inkscape выбираем готовый шейп - спираль. Сохраняем файл. Нам нужна строка <path>...</path> Копируем её.
Для анимации рисования спирали будем использовать атрибут патча stroke-dashoffset - отступ от начала линии. При максимальном отступе равном длине линии (патча) линия не видна. При stroke-dashoffset="0" линия будет прорисована полностью.

Другими словами, чтобы реализовать анимацию рисования линии нужно уменьшать отступ от максимума до нуля.
Находим длину линии var len = Math.round(path.getTotalLength() );
Для нашего патча - 6265px;

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="50%" heihgt="50%" viewBox="0 150 744 1052" id="svg2" version="1"> 
  
     <path  stroke-dashoffset="6265" stroke-dasharray="6265" d="m351 487c0 8-11 4-14-1-6-11 4-24 15-27 19-5 37 11 40 30 4 27-18 50-44 53-35 4-64-25-66-59-3-42 32-77 73-79 50-3 90 39 92 88 2 57-46 104-102 105-65 2-117-53-119-117-1-72 60-131 131-132 80-1 144 67 145 146 1 87-74 158-160 158-95 0-171-81-171-175 0-102 88-185 190-184 110 1 198 95 197 204C557 615 456 709 340 708 215 706 115 598 117 475 119 342 233 236 364 238 504 240 616 361 614 500 611 648 484 766 337 763 182 760 58 626 61 472 65 309 206 179 367 183c170 4 306 151 302 320-4 178-158 319-335 315" style="fill:none;stroke:#000" stroke-width="2"> 
	 <animate attributeName="stroke-dashoffset" values="6265;0;6265;0" dur="15s" fill="freeze" />  
	 </path> 
  
</svg>

Главное преимущество svg - картинка не теряет качества при кардинальном изменении масштаба.

Вариант CSS

Начало анимации при наведении курсора

#spiral { 
   
  stroke: dodgerblue; 
  stroke-width:4; 
  fill:#FCFCFC; 
  stroke-dasharray: 6265; 
  stroke-dashoffset: 6265; 
  transition: stroke-dashoffset 10s; 
} 
 
#spiral:hover { 
  stroke-dashoffset: 0; 
}

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="50%" heihgt="50%" viewBox="0 150 744 1052" id="svg2" version="1" > 
  
     <path id="spiral"  stroke-dashoffset="6265" stroke-dasharray="6265" d="m351 487c0 8-11 4-14-1-6-11 4-24 15-27 19-5 37 11 40 30 4 27-18 50-44 53-35 4-64-25-66-59-3-42 32-77 73-79 50-3 90 39 92 88 2 57-46 104-102 105-65 2-117-53-119-117-1-72 60-131 131-132 80-1 144 67 145 146 1 87-74 158-160 158-95 0-171-81-171-175 0-102 88-185 190-184 110 1 198 95 197 204C557 615 456 709 340 708 215 706 115 598 117 475 119 342 233 236 364 238 504 240 616 361 614 500 611 648 484 766 337 763 182 760 58 626 61 472 65 309 206 179 367 183c170 4 306 151 302 320-4 178-158 319-335 315" /> 
</svg>

Более сложный пример

Анимация движения шарика и рисование линии начинается при наведении курсора.

begin="svg2.mouseover"

Рисование спирали реализуется аналогично первому примеру. Движение по спирали красного шарика обеспечивает команда:

<animateMotion id="an" dur="20s" repeatCount="indefinite" rotate="auto-reverse" begin="svg2.mouseover" fill="freeze" restart="whenNotActive">
                        <mpath xlink:href="#spiral"/>
                </animateMotion>

   <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="50%" heihgt="50%" viewBox="0 150 744 1052" id="svg2" version="1"> 
  
 <path id="spiral" stroke-dashoffset="6265" stroke-dasharray="6265"  d="m351 487c0 8-11 4-14-1-6-11 4-24 15-27 19-5 37 11 40 30 4 27-18 50-44 53-35 4-64-25-66-59-3-42 32-77 73-79 50-3 90 39 92 88 2 57-46 104-102 105-65 2-117-53-119-117-1-72 60-131 131-132 80-1 144 67 145 146 1 87-74 158-160 158-95 0-171-81-171-175 0-102 88-185 190-184 110 1 198 95 197 204C557 615 456 709 340 708 215 706 115 598 117 475 119 342 233 236 364 238 504 240 616 361 614 500 611 648 484 766 337 763 182 760 58 626 61 472 65 309 206 179 367 183c170 4 306 151 302 320-4 178-158 319-335 315" fill="none" stroke="grey" stroke-width="3"> 
 <animate attributeName="stroke-dashoffset" values="6265;0" begin="svg2.mouseover" dur="20s" fill="freeze" restart="whenNotActive" />  
 </path> 
 
<circle cx="0" cy="0" r="15" fill="red" > 
 <animateMotion id="an" dur="20s" repeatCount="indefinite" rotate="auto-reverse" begin="svg2.mouseover" fill="freeze" restart="whenNotActive"> 
                    <mpath xlink:href="#spiral"/> 
            </animateMotion> 
</circle>			 
  
</svg>

Защита от повторного запуска анимации пока она полностью не завершится:

restart="whenNotActive"

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как заверстать косую линию на весь экран между секциями?

342

HTML

Не работает iframe

Сайт на wordpress, добавил в запись через админку такой код:

328

HTML

node js вывод запроса из mysql на html страницу

Здравствуйте, не могу реализовать вывод запроса из mysql на html страницуВ консоль все выводится хорошо, html страницу тоже создаю, все ок, но никак...

449

HTML

Правильная вёрстка сайта Materialize

Можете помочь с исправлением ошибок в вёрстке, как это можно сделать более правильно с точки зрения Materializehttps://divinytytoffee

233