HTML5Canvas神奇宝贝球Loading加载动画
神奇宝贝球造型的 Loading 加载动画,用 HTML5 Canvas 搞的,视觉效果还挺抓眼的。整个动画就像一颗正在“充能”的精灵球,进度环绕着球体缓缓旋转,看着就有动感。Canvas 画图嘛,主要靠一堆arc()
、fillStyle
、beginPath()
这些 API,绘图流程也不算复杂,搞清楚基本语法就能上手。
Loading 的部分挺巧妙,思路就是一个动态更新的角度值配合requestAnimationFrame()
搞定进度动画,响应也快,不卡顿。想让动画显得更“顺滑”,记得控制好帧率,变量更新别太猛。整个动画封装得比较清爽,JS 代码和 Canvas 画布分得清楚,调试起来也方便。
如果你想做一个有趣点儿的加载提示,又不想用千篇一律的转圈圈,这个挺合适。里面的texiao1503_1560680967
压缩包里有完整代码,index.html
一跑就能看效果,修改颜色、大小、加载速度也灵活。赶项目的时候拿来做个视觉加分的小组件,效果还挺不错的。
另外,顺手推荐几个类似的 Canvas 特效,想玩点动画的朋友可以一起看下:球内波浪动画、球形烟花、还有一个加载特效合集,都蛮有意思的。
如果你刚入门 Canvas,建议先练习用arc()
画图形,再慢慢加上requestAnimationFrame()
做动画,理解了这俩配合,基本能写出多酷炫效果。
下载地址
用户评论