如何制作此加载动画？

Question

根据上面的图片，我得到了一个为webapp创建加载页面的任务。动画基本上是从左侧向右侧填充的圆，顺时针和逆时针方向，但我不知道如何做这样的动画。 =/

有人能告诉我如何做到这一点？它可能使用画布（我将使用库Raphael.js），CSS（CSS3动画），甚至只是图像（然后用JavaScript动画）。

Answer 1

你可以使用canvas元素和某种贝塞尔曲线动画来做到这点，但是也可以使用图像来做到这一点（当然也更容易）。一个庞大的PNG帧精灵可以很容易地处理这个问题，它不会是那么大的一个图像。更好的是，由于顶部和底部相互镜像，因此可以将图像制作为顶部，然后复制元素并将其翻转（使用CSS转换）以制作底部。