使用CSS3或jQuery对图像中的一个又一个点进行动画处理

Question

我想从下图一点一点地设置动画，但我的问题是图像的弯曲部分（图像的底部）。

在开始时，所有点都应该隐藏，然后每个点都应该在视图中设置动画。

我有以下代码：

<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

请尝试以下操作：

超文本标记语言

<div id="dots">
    <img src="http://i.stack.imgur.com/oxUh8.png">
</div>

jQuery

$("#dots").css("height", "514px");

CSS

#dots{
    overflow: hidden;
    height: 10px;
    transition: all 3s cubic-bezier(.5, 1, 0, .5);
}

见：https://jsfiddle.net/brezkryx/

Answer 2

您可以使用两个SVGpath元素实现此效果，如下面的代码段所示。创建所需的两条曲线形式的路径。一条路径（位于底部）具有笔划的点模式（黑色），另一条复制路径位于顶部。设置复制路径笔划时，对于路径的一个全长，笔划的颜色为白色，对于另一个长度，笔划的颜色为透明。

将在复制路径上添加动画以设置笔划偏移的动画。设置偏移动画时，笔划的白色部分慢慢移出视图，透明部分开始进入视图。当白色部分开始消失在视野之外时，它下面的黑点开始显露出来。

一开始理解起来有点复杂，但一旦您熟悉了路径、笔划dasharray和笔划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>