乐趣区

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

模拟北京衰弱宝动画

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

提取出以下要害信息:

  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 很不熟,有更好的办法,欢送探讨

退出移动版