HTML5Canvas发光圆环加载动画
发光圆环的加载动画,视觉效果还蛮酷的,挺适合用在全屏加载、提交等待这些场景。核心思路是用 HTML5 Canvas 画一个圆,根据进度动态调整弧度,再配点阴影模拟发光,效果就出来了。
Canvas 用起来其实不难,先在页面里加个标签,用
getContext('2d')
拿到绘图上下文。想画个圆?直接上 arc()
。再加个进度变量、用 requestAnimationFrame()
循环刷新,就能做出丝滑的进度动画。
发光怎么搞?嗯,给 shadowBlur
和 shadowColor
加上白色半透明阴影就挺有感觉的。要是想更 fancy 点,可以叠几层不同透明度的圆环,层次感更足。
整个实现下来,代码不复杂,逻辑清晰,基本掌握 Canvas 的基本用法就能搞定。你要是正好在做登录页、上传等待那类交互,不妨试试这个。
相关的类似资源也不少,比如:
如果你想把加载动画做得精致点,Canvas 是个不错的选择,代码灵活,样式自由,还能轻松加点交互。
下载地址
用户评论