Как я могу заставить сегменты градиентной линии двигаться по пути SVG - PullRequest
Новая
       13

Как я могу заставить сегменты градиентной линии двигаться по пути SVG

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

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

Я мог бы использовать stroke-dasharray и анимировать смещение (https://css -tricks.com / svg-line-animation-works / # article-header-id-4 ), но так как Я могу сказать, что линейные градиенты для штрихов ведут себя практически по всей фигуре, а не только по сегменту штрихов (https://codepen.io/plava/pen/BjavpN).

Возможно, я могу взять линию и провести ее по другому пути? Это позволило бы мне применить градиент только к этой линии. Мои линии движутся слева направо, следуя синусоидальной кривой, поэтому, если градиент не сгибается с линией, которая в порядке.

Это часть приложения Electron, поэтому оно должно быть совместимо только с несколько более поздней версией Chromium.

1 Ответ

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

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

#path {
    stroke-dasharray: 10 90;
    animation: dash 5s linear alternate infinite;
    stroke: black;
    stroke-width: 5;
}
#path2 {
    stroke-dasharray: 20 80;
    animation: dash2 5s linear alternate infinite;
    stroke: rgba(0,0,0,0.5);
    stroke-width: 5;
}
@keyframes dash {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes dash2 {
    from {
        stroke-dashoffset: 110;
    }
    to {
        stroke-dashoffset: 10;
    }
}

Постоянно добавлять больше CSS - это немного хлопотно, поэтому я автоматизировал создание CSS, используя некоторый javascript здесь: https://jsfiddle.net/aqwg7ed6/

Эта скрипка автоматически создает 32 пути, что создает приятный эффект.

...