Question

我想创建一个动画可视化（尽可能响应），其中涟漪源自中心点，当这些涟漪到达圆圈中的外部节点时，这些节点会产生类似可变大小的涟漪。

到目前为止，我找到了这些库：

https://github.com/mbostock/d3/wiki/Gallery

http://flare.prefuse.org/

但他们似乎都没有我所追求的，他们看起来也像是一种矫枉过正。

实现这一目标的最佳方法是什么？

P.S：我愿意使用Adobe的Edge Animate，如果它提供了一个简单的解决方案，因为我为我正在合作的新公司创建了大量的数据可视化。

Answer 1

我认为最好的方法是使用一些CSS animations或者可能使用HTML5 canvas和JavaScript requestAnimationFrame

here是使用CodePen上的CSS动画创建涟漪效果的示例

.ripple:before,.ripple:after {
  content:'';
  position:absolute;
}
.ripple:before {
  -webkit-animation-delay:.2s;-moz-animation-delay:.2s;top:5px;left:25px;
}
.ripple:after {
  -webkit-animation-delay:.8s;-moz-animation-delay:.8s;top:25px;left:0;
}
@-webkit-keyframes rip 
{
  0%  {
    box-shadow:0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent,
               0 0 0 0 transparent;
  }
  5%  {
    box-shadow:0 0 0 0 #45c2c5,
               0 0 0 0 rgba(255,255,255,0.4),
               0 0 0 0 #45c2c5,
               0 0 0 0 rgba(0,0,0,0.08);
  }
  100% {
    box-shadow:0 0 40px 200px #45c2c5,
               0 0 10px 210px transparent,
               0 0 30px 220px #45c2c5,
               0 0 5px 230px transparent;
  }
}

使用jquery的动画涟漪

1 个答案: