文章目录

• 效果图
• 实现
• 重点
• 源代码

效果图

想起是两年前吗，玩守望先锋，当时可真的是“不吸一口”都活不下去了，对局十分钟，短而快速，见面直接刚，没太多套路和纷争。

当时环境也很好，由于一开始什么都不会，只会选一个射箭的（半藏）在后面射，因为在后面射箭又安全又不会犯错误。而现在就不知道了，反正在离我“弃坑”的时候，一旦你前脚刚选半藏，后脚就来了人重建帝国，哈哈，可谓是“英雄即是错误”，后面官方态度和一些乱象又出现一些波折，说多了都是凉，也难怪别人说“这世界不需要守望先锋”了。

实现

回到正题，也是因为看到别人实现过类似的守望先锋加载动画，使用 css 做的，以前自己不知道的时候觉得好叼啊，在自己能实现的时候就想着也做个，权当是留个纪念了。

绘制样式其实不难，不过是 7 个圆角六边形和 3 个外圆弧。

圆角的实现底层是之前提过的，使用较大值 ctx.lineWidth 加 ctx.lineJoin="round" 即可绘制。

六边形使用 janvas 中提供的 janvas.RegularPolygon 即可绘制正多边形。

外圆弧使用 janvas.Arc，设置合理的线宽进行 stroke() 即可。

重点应该是动画效果的实现。

重点

经过几次迭代，janvas 中抽象了较严谨的动画对象出来：janvas.Animation。

构造函数如下：

new janvas.Animation(animate, duration, interval, beforeUpdate, onUpdate, afterUpdate)

通过将主动画句柄 animate 传给 animation，实现了动画控制权的反转，接收的参数 duration 为持续时间，interval 为触发的间隔时间。

其有三个回调方法：

1. beforeUpdate()，在动画开始时回调
2. onUpdate(ratio)，在动画持续过程中回调动画进度 ratio
3. afterUpdate(forward)，在动画结束后回调动画方向 forward

还有几个常用的原型链方法：

1. start()，启动
2. reverse()，反转
3. pause()，暂停
4. resume()，恢复
5. stop(toEnd)，停止

对比直接使用主动画句柄来控制动画最大的特点是 Animation 具备了 reverse() 反转动画的能力，并且每个动画都可以独立运行互不干扰，7 个正六边形的动画首尾相连，通过 afterUpdate 进行链接。

比较 trick 的一点是，动画效果通过编写代码进行了大小缩放与颜色渐变，颜色的变化是通过 HSL 方式，将 Lightness 渐变到了 100，所以最终会变为白色。

源代码

CodePen 在线演示与源代码

标签：守望,canvas,动画,实现,janvas,Animation,源代码
来源： https://blog.csdn.net/M3oM3oChong/article/details/118439013