模仿北京健康宝动画

7,972

模仿北京健康宝动画

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

健康宝

提取出以下关键信息:

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