7

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

спираль Ферма

5
  • покажите пример для начала 16 ноя 2017 в 11:32
  • canvs, svg.. двигайся в этом направлении...
    – Air
    16 ноя 2017 в 11:59
  • Можно ли её сделать на чистом css? - например установкой background-image
    – Grundy
    16 ноя 2017 в 13:05
  • Зависит от того, что вы хотите делать с этим объектом. Если анимировать, тогда SVG, если же это статичный элемент, проще всего будет создать изображение фоновое& 16 ноя 2017 в 13:12
  • @AlexeyGiryayev (Чтобы пользователь видел как она рисуется)
    – Grundy
    16 ноя 2017 в 13:13

3 ответа 3

12

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

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

2
  • 1
    Alex вы БОГ css-а я в шоке :)
    – Randall
    16 ноя 2017 в 13:24
  • 2
    Справедливости ради стоит добавить описание, что тут не происходит рисования, картинка статичная, просто меняется ее ширина/высота и все лишнее обрезается
    – Grundy
    16 ноя 2017 в 13:27
9

Вариант 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">
  <text x="60" y="200" font-size="40"> Mouseover </text> 
 <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"
1
  • я нашел твой пример который не полюсвал))))
    – Air
    14 фев 2018 в 12:08
4

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

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

  1. Один из вариантов уже описали здесь - представить что спираль это картинка, или див с картинкой в фоне и не меняя размер фона увеличить див - фон постепенно появится полностью, типа "отрисовался", ага ))

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

  3. JS-рисование при помощи канвас.

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

Ваш ответ

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

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