Как подойти к анимации svg слева направо? [Интернет]

У меня есть изображение ниже, которое представляет собой текст, смешанный с точками.

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

Поскольку пути идут не по порядку слева направо, как можно подойти к анимации слева направо?

Единственный способ, который я могу придумать, - это пометить каждую точку в вертикальном ряду, а затем использовать css, чтобы синхронизировать анимацию, чтобы текст пульсировал. Есть ли способ сделать это динамически?

Чего вы пытаетесь добиться, не очень понятно. Пожалуйста, постарайтесь точно передать, как вы хотите его оживить. Кроме того, можем ли мы увидеть разметку SVG? Как вы создали SVG?

Ответы (2)

Вы можете просто использовать свое изображение и использовать переход позиции с помощью CSS.

Но Вы, вероятно, имеете в виду, что точки должны оставаться фиксированными в пространстве и начинать светиться по мере прохождения букв.

Это, вероятно, проще анимировать в After Effects или другом приложении (включая Photoshop), используя маску с точечным узором и перемещая слой под узором и экспортируя его как анимированный gif. (Вы можете немного видеть, что буква E находится на квадрате под паттерном)

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

Но, используя ту же логику, вы можете использовать прозрачный PNG в качестве маски и анимировать div под изображением, опять же используя CSS.

<style>
img {
  background-image: url(E.png);
  background-position:-1000px;
  background-repeat: no-repeat;
  transition: all linear 1s;}
img:hover {
  background-position: 0px;}
</style>

<img src="Mask.png" />

Откройте это и наведите указатель мыши на сетку.

http://otake.com.mx/Foros/MaskTest/Test1.html

Вам нужно синхронизировать скорость анимации, чтобы у вас не было полукругов. Но это был всего лишь простой тест.

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

Добиться этого результата можно разными способами. Но самый элегантный способ, который пришел мне в голову, — использовать для этого SVG-маскирование. Сара Суэйдан написала об этом отличную статью: https://sarasoueidan.com/blog/css-svg-clipping/

В двух словах вы можете сделать следующее:

  1. Сгруппируйте каждую строку
  2. Дублируйте каждую группу и настройте ее цвет.
  3. Примените маску к каждой дублированной группе, чтобы все дублированные группы были скрыты.
  4. Анимируйте маску в браузере с помощью CSS или JS.

Преимущество этого метода в том, что вы можете применять не только цвет, но и изображение или даже фильм для маскирования. Надеюсь, что это поможет вам :)

Как подойти к анимации svg слева направо? [Интернет]
СпросиСетьПолитика конфиденциальности1y, 0v