关于前端:模仿北京健康宝动画

模拟北京衰弱宝动画

北京衰弱宝有一个动画，一圈小球，沿着正方形顺时针滚动，并且色彩是突变的，像下图的这样

提取出以下要害信息：

1. 小球沿着矩形顺时针间断滚动，小球的间距是平均的
2. 小球在矩形直角的时候会沿着直角滚动，过渡顺滑
3. 小球的色彩有一些突变，并且会随着小球的地位而扭转，左上角的始终都是深色的，右下始终是浅色的

边框实现

想模拟实现这个动画，最先想到的是应用边框，想应用虚线边框实现，找到了一个类似的

源码

次要逻辑：

1. 把边框设置成小球状（dotted）
2. 制作 4 个边框
3. 利用动画，让 4 个边框沿着不同方向位移，模拟继续的的滚动

仔细观察，发现一个比较严重的问题，在 4 个直角的过渡有问题，而且没有方法修复；拿右上角举例，两个滚动的边框没有方法完满的交融在一起，从左到右的球和从上到下的球会相遇，和想要的从左 -> 下的滚动不一样

背景滚动

起初又发现一个滚动，这次是利用背景做继续的滚动，如下所示：

1. background 定义 4 条边的方向和色彩
2. background-repeat 定义只能沿着边进行滚动
3. background-size 定义边的长和宽
4. background-position 定义边的终点
5. 最初别离给 4 个背景制作动画，让其滚动起来

源码

这个差距较大，连小球都完不成，放弃

滚动 SVG

这个就牛了，一看差不多啊：

源码

1. 首先筹备一个本人会滚动的 svg 图片
2. 想方法把小 svg 的边拼接到大的矩形上

因为 svg 是本人滚动的，所以边角的滚动十分的天然十分顺滑，然而起初发现有一下无奈实现：

1. 会滚动的小球 svg 怎么制作
2. 如果是同一个小 SVG 拼成大的的话，小球的渐变色搞不定

SVG 动画

源码

这个计划，有意思：

1. 在 svg 外面放一个矩形
2. 矩形的边框设置为虚线（stroke-dasharray）
3. 虚线的缺口处设置为半圆（round）
4. 应用 css 管制偏移，使边框滚动起来

目前的问题有：

1. 搞个渐变色的小球
2. 直角须要优化，左上角的会产生小球重合的状况

完满滚动的小球

接下来我去掉了圆角（rx），呈现了问题，在左上角小球会交融和闪动，通过屡次试验发现，我的边长和 stroke-dasharray 须要配合好，才能够完满的把小球围城正好一圈，这样才不会在头尾连接处（左上角）产生汇集和闪动，如下图：

小球的色彩也找到了办法，应用 linearGradient 即可：

最初加上 CSS 动画就能够实现始终滚动了：

源码

对 SVG 很不熟，有更好的办法，欢送探讨