4

У меня есть две иконки: одна в исходном состоянии, вторая иконка перечеркнута.

Я хочу анимировать зачеркивающую линию, но изменение dash-offset не помогает, поскольку это два разных svg.

Я смотрю на эти анимированные иконки, но все еще не могу понять волшебную часть.

введите сюда описание изображения

Я хочу спросить: Какой должен быть переходный процесс?
Я предпочитаю использовать pure CSS, возможно ли это?

Свободный перевод вопроса SVG line cross animation for icons от участника @Mengo.

1

2 ответа 2

4

Анимированные иконки по вашей ссылке довольно сложны

Но в основном то, что они делают, это скользящая прямоугольная маска справа налево, которая покрывает первую иконку и открывает вторую иконку.

Вот упрощенная версия, использующая чистый CSS, который, надеюсь, делает ее более ясной.

svg {
  width: 100px;
  height: 100px;
}

/* сдвигает две маски влево при наведении курсора */
svg:hover #bottom-rect,
svg:hover #top-rect
{
  transition: transform 500ms;
  transform: translate(-24px, 0px);
}

/* сдвигает две маски вправо, когда они не hovered */
svg #bottom-rect,
svg #top-rect {
  transition: transform 500ms;
  transform: translate(0px, 0px);
}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <defs>
        <mask id="bottom">
          <rect id="bottom-rect" width="24" height="24" fill="white" stroke="none"/>
        </mask>
        <mask id="top">
          <rect id="top-rect" x="24" width="24" height="24" fill="white" stroke="none"/>
        </mask>
    </defs>    
   
    <g mask="url(#bottom)">
      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
      <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
      <line x1="12" y1="19" x2="12" y2="23"></line>
      <line x1="8" y1="23" x2="16" y2="23"></line>
    </g>
    <g mask="url(#top)">
      <line x1="1" y1="1" x2="23" y2="23"></line>
      <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path>
      <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path>
      <line x1="12" y1="19" x2="12" y2="23"></line>
      <line x1="8" y1="23" x2="16" y2="23"></line>
    </g>
</svg>

Свободный перевод ответа от участника @Paul LeBeau.

3

Анимированные иконки по вашей ссылке довольно сложны

А если попробовать сделать анимацию иконки самостоятельно. Действительно ли это так сложно?

Например попытаться анимировать Running Infinity иконку

введите сюда описание изображения

Создание анимации иконки по шагам:

Шаг #1. В векторном редакторе рисуем восьмерку и вычисляем полную длину контура - getTotalLength()

<style>
.container {
width:10%;
height:auto;  
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100">
   <path id="path" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"  stroke="#151515" stroke-width="10"  />
</svg>
<script>
console.log('Полная длина :' + Math.round(path.getTotalLength()) +'px')
</script>   

Шаг #2. Вырезаем часть контура с помощью stroke-dasharray="202.75,54.25", где 54.25 - пробел
Обратите внимание: если сложить цифры длин черты и пробела получится максимальная длина контура 257px

<style>
.container {
width:8%;
height:auto;  
background:white;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100">
  
  <path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-dashoffset="27" stroke-dasharray="202.75,54.25" stroke="black" stroke-width="8" />
 </svg> 

Шаг #3. Добавляем анимацию вращения контура с помощью stroke-dashoffset

<animate  attributeName="stroke-dashoffset" values="257; 0" begin="svg1.click" 
  dur="1s" restart="whenNotActive" repeatCount="indefinite" />     

<style>
.container {
width:8%;
height:auto;  
background:white;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100">
  
  <path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-dashoffset="27" stroke-dasharray="202.75,54.25" stroke="black" stroke-width="8"  >
        <animate  attributeName="stroke-dashoffset" values="257; 0" begin="svg1.click" dur="1s" restart="whenNotActive" repeatCount="indefinite" /> 
    </path> 
</svg>  

Шаг #4. Вращение иконки при наведении :hover

Добавляем в условие запуска begin="svg1.mouseenter" end="svg1.mouseleave"

<style>
.container {
width:8%;
height:auto;  
background:white;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100">
  
  <path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-dashoffset="27" stroke-dasharray="202.75,54.25" stroke="black" stroke-width="8"  >
        <animate  attributeName="stroke-dashoffset" values="257; 0" begin="svg1.mouseenter" end="svg1.mouseleave" dur="1s" restart="whenNotActive" repeatCount="indefinite" /> 
    </path> 
</svg>  

Вариант анимации CSS

При разработке варианта анимации SVG были вычислены необходимые значения параметров атрибутов stroke-dasharray:202.75,54.25; и stroke-dashoffset

Остается их перенести в CSS правила:

.container {
width:8%;
height:auto;  
background:white;
}

#eight {
fill:none;
stroke:black;
stroke-width:8;
stroke-dasharray:202.75,54.25;
stroke-dashoffset:27px;
}
#svg1:hover #eight {
fill:#dedede;
animation:move 1s infinite linear;
}
@keyframes move {
0% {stroke-dashoffset:27px;}
100% {stroke-dashoffset:257px;}
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100">
  
  <path id="eight" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" />
</svg>

Ваш ответ

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

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