Анимировать встроенный SVG слева направо (изображение) плавно, без движущегося изображения? - PullRequest
Новая
       9

Анимировать встроенный SVG слева направо (изображение) плавно, без движущегося изображения?

0 голосов
/ 15 мая 2019

Я пытаюсь анимировать встроенное изображение SVG, иллюстрирующее волны, которые идут вверх и вниз.У меня есть изображение, где я должен его анимировать, чтобы оно выглядело так, как будто корабль плывет по волнам.

Не могу сделать это правильно, посмотрел на преобразование с помощью translateX, но затем изображение (SVG) двигается.Разве нельзя просто перемещать волны слева направо в бесконечном цикле, не перемещая изображение, и сделать его таким, чтобы оно было плавным?

ship sailing on the waves

HTML 

<div class="spinner">
      <img class="ship" src="./assets/ship.svg" />
      <span class="waves">
        <svg viewBox="0 0 146 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g id="Loader" stroke="none" stroke-width="1" fill="red" fill-rule="evenodd">
              <g id="Artboard-Copy" fill="red" fill-rule="nonzero">
              <g id="Group-Copy">
                      <path d="M0,5 C7.57597216,5 7.24715338,-9.32587341e-15 14.6,-9.32587341e-15 C21.9528466,-9.32587341e-15 21.9335777,5 29.2,5 C36.4664223,5 36.5256034,-9.04831765e-15 43.8,-9.32587341e-15 C51.0743966,-9.32587341e-15 51.2650965,5 58.4,5 C65.5349035,5 65.6270419,-9.04831765e-15 73,-9.32587341e-15 C80.3729581,-9.32587341e-15 80.2196466,5 87.6,5 C94.9803534,5 94.9224659,-9.32587341e-15 102.2,-9.32587341e-15 C109.477534,-9.32587341e-15 109.321471,5 116.8,5 C124.278529,5 124.275217,-9.32587341e-15 131.4,-9.32587341e-15 C138.524783,-9.32587341e-15 138.613807,5 146,5 L146,37 L0,37 L0,5 Z" id="Combined-Shape"></path>
                  </g>
              </g>
          </g>
      </svg>
    </span>      
</div>

CSS 

.spinner {
  z-index: 3;
  position: absolute;
  left: 50%;
  border-radius: 100%;
  top: 50%;
  color: #ccc;
  margin-left: -40px;
  margin-top: -40px;
  padding: 0.5rem;

  .ship {
    animation: bop 0.58s ease-in-out alternate infinite;
    display: block;
    margin: auto;
    width: 80px;
    height: 80px;
  }

  .waves {
    position: absolute;
    width: 146px;
    height: 37px;
    margin-left: -40px;
    margin-top: -25px;
    animation: sail 6s linear infinite;
  }

  @keyframes bop {
    to {
      transform: translateY(-7%);
    }
  }

  @keyframes sail {
    to {
      transform: translateX(50px);
    }
  }

Обратите внимание, что цвет волн будет изменен на заполнить = наследовать,равный серому цвету фона.Просто сделал так, чтобы вы могли видеть это.

1 Ответ

1 голос
/ 16 мая 2019

В этом случае вам понадобится немного больший путь, чем ширина viewBox. В этом случае я использую viewBox = "0 0 116.8 37", в то время как ширина вашего пути (рассчитывается с wave.getBBox()) составляет 146 единиц. Чтобы понять, что происходит, добавьте overflow: visible; к элементу svg. 

svg {
  outline: 1px solid;
  display: block;
  margin: 0 auto;
  /*overflow: visible;*/
}
#wave {
  transform: translateX(0);
  animation: sail 2s  ease-in-out infinite;
}
@keyframes sail {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-29.2px);
  }
  100% {
    transform: translateX(0px);
  }
}
<svg viewBox="0 0 116.8 37" width="200">
        <path fill="red" d="M0,5 C7.57597216,5 7.24715338,-9.32587341e-15 14.6,-9.32587341e-15 C21.9528466,-9.32587341e-15 21.9335777,5 29.2,5 C36.4664223,5 36.5256034,-9.04831765e-15 43.8,-9.32587341e-15 C51.0743966,-9.32587341e-15 51.2650965,5 58.4,5 C65.5349035,5 65.6270419,-9.04831765e-15 73,-9.32587341e-15 C80.3729581,-9.32587341e-15 80.2196466,5 87.6,5 C94.9803534,5 94.9224659,-9.32587341e-15 102.2,-9.32587341e-15 C109.477534,-9.32587341e-15 109.321471,5 116.8,5 C124.278529,5 124.275217,-9.32587341e-15 131.4,-9.32587341e-15 C138.524783,-9.32587341e-15 138.613807,5 146,5 L146,37 L0,37 L0,5 Z" id="wave"></path>
</svg>
...