Как реализовать летящую линейную диаграмму в интерфейсе?

Эффект следующий

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

обработать

• линия представляет собойsvg, мы проходимsvgвнутриpathДля достижения эффекта анимации маленьких точек.
• svgпользовательский интерфейс обычно предоставляется.
• будь осторожен vueВнутриsvgВ не записатьstyle, Ссылка. Когда шаблон в теге svg содержит стиль, будет жаловаться

1. Показать SVG

• мы сначала используемsvgнарисовать мороженое
• Веб-сайт инструмента рисования линий svg

<svg width="400" height="600">
  <path d="M41 236 C65 118 244 112 213 327 L176 341 123 529 74 342 37 325 Z" stroke="#333" stroke-width="2" fill="none" />
</svg>

2. Нарисуй точку и беги

html

<div class="line-panel">
  <div class="round-1"></div>
  <svg width="400" height="600">
    <path d="M41 236 C65 118 244 112 213 327 L176 341 123 529 74 342 37 325 Z" stroke="#333" stroke-width="2" fill="none" />
  </svg>
</div>

scss

ОписаниеanimationЗначение атрибута,Свойство анимации CSS

animation: move 3s 0s linear infinite;

• move: Да@keyframesОпределенный метод перемещения
• 3s: время, необходимое для запуска пути svg
• 0s: как долго начинать выполнение после задержки
• linear: линейный
• infinite: Выполнение в бесконечном цикле

.line-panel {
  //圆点
  .round-1 {
    z-index: 2;
    position: absolute;
    left: 0;
    border-radius: 50%;
    background-color: red;
    width: 10px;
    height: 10px;
    //移动，这里的path跟svg的path一样
    offset-path: path('M41 236 C65 118 244 112 213 327 L176 341 123 529 74 342 37 325 Z');
    animation: move 3s 0s linear infinite; //含义上面有注释
  }
  //svg定位一下
  svg{
    position: absolute;
    left: 0;
  }
}
//移动动画
@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

Эффект

3. Многоточечная реализация

Если точек много, можно использоватьscssиз@mixinСделать оптимизацию

html

• Прибавляем 5 очков к ходу

<div class="line-panel">
  <div class="round-1"></div>
  <div class="round-2"></div>
  <div class="round-3"></div>
  <div class="round-4"></div>
  <div class="round-5"></div>
  <svg width="400" height="600">
    <path d="M41 236 C65 118 244 112 213 327 L176 341 123 529 74 342 37 325 Z" stroke="#333" stroke-width="2" fill="none" />
  </svg>
</div>

scss

  //统一原点的路径，和动画时间
  $svg-path: "M41 236 C65 118 244 112 213 327 L176 341 123 529 74 342 37 325 Z"; //此path对应svg内的path
  /*
     $color: 圆点背景颜色
     $path: 圆点行走路径
     $duration跑完需要多久时间
     $delay延迟多久开始跑
   */
  @mixin move-round($color, $path, $duration, $delay) {
    z-index: 2;
    position: absolute;
    left: 0;
    border-radius: 50%;
    background-color: $color;
    width: 10px;
    height: 10px;
    //移动
    offset-path: path($path);
    animation: move $duration $delay linear infinite;
  }
  .line-panel {
    .round-1 {
      @include move-round(blue, $svg-path, 5s, 0s);
    }
    .round-2 {
      @include move-round(green, $svg-path, 5s, 1s);
    }
    .round-3 {
      @include move-round(red, $svg-path, 5s, 2s);
    }
    .round-4 {
       @include move-round(black, $svg-path, 5s, 3s);
     }
    .round-5 {
      @include move-round(yellow, $svg-path, 5s, 4s);
    }

    svg{
      position: absolute;
      left: 0;
    }
  }

  @keyframes move {
    100% {
      offset-distance: 100%;
    }
  }

Эффект

Ссылаться на

• Когда мы понимаем правила, нашу диаграмму летающих линий легко нарисовать.
• Чжан Синьсюй-офсет-путь