简体繁体 English

如何制作这个加载动画？

[英]How to make this loading animation?

原文 2012-01-07 17:22:18 8 1 javascript/ animation/ css3/ canvas/ raphael

加载动画图片

I got the task of making an loading page for a webapp, based on the image above. 基于上面的图像，我完成了为webapp创建加载页面的任务。 The animation is basically the circle being filled from the left side to the right side, both in a clockwise and anti-clockwise way, but I have no idea how to do such animation. 动画基本上是从左侧到右侧填充的圆圈，顺时针和逆时针方式，但我不知道如何做这样的动画。 =/ = /

Could someone give me a light on how to do this? 有人可以告诉我如何做到这一点吗？ It may be using canvas (I'll use the library Raphael.js), CSS (CSS3 Animations), or even just images (animating then with javascript). 它可能是使用canvas（我将使用库Raphael.js），CSS（CSS3动画），甚至只是图像（然后用javascript动画）。

1 个解决方案

You could do it with the canvas element and some sort of bezier curve animation, but it may be just as well to do it with images (and certainly easier). 您可以使用canvas元素和某种贝塞尔曲线动画来完成它，但是对于图像来说也可以这样做（当然也更容易）。 A large sprite of PNG frames could handle this easily and it wouldn't be that large of an image. 一个大的PNG帧精灵可以很容易地处理这个问题，它不会是那么大的图像。 Even better, since the top and bottom mirror each other, you could make the images for just the top, and then duplicate the element and flip it (with CSS transformations) to make the bottom half. 更好的是，由于顶部和底部相互映射，您可以将图像设置为顶部，然后复制元素并将其翻转（使用CSS转换）以制作下半部分。