如何制作这个加载动画？

Question

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

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

Answer 1

你可以使用canvas元素和某种贝塞尔曲线动画来完成它，但是对于图像来说也可以这样做（当然也更容易）。一个大的PNG帧精灵可以很容易地处理这个问题，它不会是那么大的图像。更好的是，由于顶部和底部相互映射，您可以将图像设置为顶部，然后复制元素并将其翻转（使用CSS转换）以制作下半部分。