模仿北京健康宝动画

模仿北京健康宝动画

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

提取出以下关键信息：

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 很不熟，有更好的方法，欢迎讨论