javascript - 使用 CSS3 或 jQuery 从图像中逐点动画

Question

我想对下图中的点进行动画处理，但我的问题是图像的 flex 部分(图像底部)。

开始时，所有的点都应该被隐藏，然后每个点都应该一个接一个地动画显示。

我有以下代码:

<div id="dots1"></div>

#dots1 {
    -moz-transition: height 1s linear;
    -o-transition: height 1s linear;
    -webkit-transition: height 1s linear;
    transition: height 1s linear;
    position: absolute;
    left: 50%;
    z-index: 1;
    margin: 0 0 0 -1px;
    width: 3px;
    height: 0;
    background: url(image/pic.png) 0 0 no-repeat;
}

Answer 1

您可以使用两个 SVG path 元素来实现此效果，如下面的代码片段所示。创建了您需要的两条曲线形式的路径。一个路径(位于底部)具有笔划的点图案(黑色)和另一个位于顶部的重复路径。设置重复路径笔划，使得路径的一个完整长度为白色，而另一个长度为透明。

在复制路径上添加了一个动画来动画描边的偏移。随着偏移动画化，笔画的白色部分慢慢移出视野，透明部分开始进入视野。随着白色部分开始消失，其下方的黑点开始显露出来。

一开始理解起来有点复杂，但是一旦你熟悉了 path , stroke-dasharray和 stroke-dashoffset它看起来很简单。

svg {
  height: 400px;
}
path {
  fill: none;
}
path.dot {
  stroke: black;
  stroke-dasharray: 0.1 4;
  stroke-linecap: round;
}
path.top {
  stroke: white;
  stroke-width: 2;
  stroke-dasharray: 250;
  stroke-linecap: round;
  animation: dash 15s linear forwards;
}
@keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -250;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg viewBox='0 0 100 100'>
  <path d='M1,1 1,45 C1,60 30,60 30,75 C30,90 1,90 1,100' class='dot' />
  <path d='M1,1 1,45 C1,60 30,60 30,75 C30,90 1,90 1,100' class='top' />
</svg>