• 「原生练手」从模糊到清晰的特效实现图片加载进度条，你会如何实现？

    本篇文章我们会实现一个图片加载特效，特效的效果是让图片从模糊的状态随着加载进度的推进，逐渐变得清晰，效果图如下：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IaozeRXE-1658297373656)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eddce828746546c0873c81de734586f0~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

    如果让你实现这样的特效，你会如何实现呢？先别往下看，先思考一下甚至可以动手尝试一下，再接着看下去看看我和你的思路有什么不同吧，欢迎把你的思路在评论区留言分享出来

    1. 思考实现思路

    1. 首先我们肯定要有一个背景元素，然后还要有一个进度文本元素
    2. 给背景图片设置一个模糊度，并且这个模糊度应当随着进度的推进而不断变得清晰，这是从效果图中能够明显看出来的
    3. 还有文字也应该设置一下透明度，需要随着进度的推进而不断从不透明变成透明，也就是opacity要从1变成0

    主要就是做到以上三点，很显然，核心就在于如何将图片加载进度和背景图片模糊度建立一个映射关系，比如图片加载进度为0的时候，背景图片的模糊度应当为30px，而当图片加载进度推进，这个模糊度应当逐步下降，最终下降至0

    还需要建立图片加载进度和加载文字不透明度之间的映射，也就是说当加载进度为0的时候，加载文字的不透明度应当为1，随着图片加载进度推进，这个不透明都逐渐增大，直到加载进度为100%时，让加载文字的不透明度变为0，也就是不再显示

    2. HTML 结构

    明确了以上的思路，我们首先来实现最简单的HTML结构，代码如下：

    

    0%
     

    • 1
    • 2

    没错，就只需要简单的一个div作为背景元素，一个p作为加载文本元素即可

    3. CSS 样式

    3.1 加载图片居中显示

    为了让加载文字水平垂直居中显示，将body设置为flex布局，并且主轴和交叉轴方向上的对齐方式都是center

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 0;
} 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    3.2 背景图片样式

    为了让背景图片不遮挡文字的显示，我们应当用绝对定位让其脱离文档流，并且z-index设置为-1使其不要遮挡加载文本的显示

    其次，为了让图片能够居中显示，使用background-position的center属性

    同时为了防止图片比例被破坏，我们可以使用background-size的cover属性

    以上属性可以简写到background中，即background: url('xxx') center center/cover

    .background {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  /* background 中写 center/cover 等价于 background-size */
  /* background-size: cover; */
  background: url('https://unsplash.com/photos/QMwkGYFDjiE/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU2NTExNTgw&force=true')
    no-repeat center center/cover;

  filter: blur(30px);
} 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    此时的效果如下： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IOypu52i-1658297373656)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6361fe46d664b4980812ca0a638e7cc~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)] 很明显可以看到四周是有白边的，这个问题该怎么解决呢？

    3.3 解决 blur 带来的白边问题

    由于blur模糊后会让原来的背景颜色，也就是这里的body的#fff白色背景显示出来，所以这个“白边”就是从body的白色背景来的，既然知道问题的所在，那么就好解决了

    由于我们设置刚开始的模糊半径为30px，所以我们可以让背景图片绝对定位在top: -30px; left: -30px的位置，将左上角区域的白边遮盖住，但是这样就导致右下角的白边变得更加大了，本来就有30px的模糊半径带来的白边，现在又有top和left偏移30px带来的白边，一共就是60px的白边了

    所以我们还需要将宽高在原来的基础上加上60px去抵消这个白边的范围，不过这样一来就会导致背景图片溢出整个body容器元素的宽高，导致出现水平和垂直的滚动条，所以我们还应该给body加上overflow: hidden的设定

    综上，我们修改一下CSS样式：

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 0;
+  overflow: hidden;
}

.background {
  position: absolute;
+  inset: -30px auto auto -30px;
-  width: 100vw;
-  height: 100vh;
+  width: calc(100vw + 60px);
+  height: calc(100vh + 60px);
  z-index: -1;
  /* background 中写 center/cover 等价于 background-size */
  /* background-size: cover; */
  background: url("https://unsplash.com/photos/QMwkGYFDjiE/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU2NTExNTgw&force=true")
    no-repeat center center/cover;
  filter: blur(30px);
} 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    现在模糊效果带来的白边就消失了 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bnRVepTX-1658297373657)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2d5ed21d49145bbb6925852b367d87a~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

    4. JS 建立加载进度和模糊半径、加载文字透明度之间的映射

    根据前面的思路分析，我们已经知道我们应当建立两个映射：

    1. 加载进度与模糊半径之间的映射：当加载进度从0 ~ 100变化的时候，模糊半径也应当相应地在30 ~ 0之间变化
    2. 加载进度与加载文字不透明度之间的映射：当加载进度从0 ~ 100变化的时候，加载文字的不透明度应当从1 ~ 0之间变化

    为了建立这个映射关系，我们可以实现一个辅助函数mapNumberRange，将一个数值从某一个范围的输入映射到另一个范围的输出

    比如我将加载进度变量progress输入，这个变量的范围是从0 ~ 100，然后我希望它的输出是从30 ~ 0，比如调用：

    mapNumberRange(progress, {
  srcStart: 0,
  srcEnd: 100,
  destStart: 30,
  destEnd: 0,
}) 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    那么当progress为0的时候，我希望得到的是一个30，而当progress为1的时候，我希望得到的是29以此类推，你可以思考一下mapNumberRange应当怎么实现，这里我直接给出实现，感兴趣的读者可以自己推导一下

    /**
 * @description 将数值按照一定范围进行映射
 * @param {number} num 待映射的数
 * @param {{srcStart: number, srcEnd: number, destStart: number, destEnd: number}} options
 */
const mapNumberRange = (num, options) => {
  const { srcStart, srcEnd, destStart, destEnd } = options

  return (
    ((num - srcStart) * (destEnd - destStart)) / (srcEnd - srcStart) + destStart
  )
} 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    由于该函数不涉及外部变量的修改，不会产生副作用，所以它也算是一个纯函数

    5. 使用 setInterval 模拟加载进度

    这里为了简单起见，直接使用setInterval进行模拟，使用定时器修改加载进度变量，并且让图片背景模糊半径和加载文字的不透明度跟随加载进度变量的变化而变化

    5.1 获取目标元素

    这个很容易，由于我们的html结构很简单，所以获取目标元素就是背景和加载文字

    /** @type HTMLDivElement */
const oBackground = document.querySelector('.background')
/** @type HTMLParagraphElement */
const oLoadingText = document.querySelector('.loading-text') 

    • 1
    • 2
    • 3
    • 4

    为了能够获得方便的类型提示，我使用了jsdoc的类型注释（别杠为啥不直接用ts，因为这是原生js练手专题）

    5.2 实现图片加载特效函数

    实现一个名为blurAnimation的函数用于实现加载特效

    const blurAnimation = () => {
  // 加载进度
  let progress = 0
  let timer = setInterval(() => {
    progress++

    if (progress === 100) {
      // 加载完毕则清除定时器
      clearInterval(timer)
    }

    // 设置加载文字的数值
    oLoadingText.innerText = `${progress}%`
    // 设置加载文字的不透明度 -- 随加载进度变化
    oLoadingText.style.opacity = mapNumberRange(progress, {
      srcStart: 0,
      srcEnd: 100,
      destStart: 1,
      destEnd: 0,
    })
    // 设置背景图片的模糊半径 -- 随加载进度变化
    oBackground.style.filter = `blur(${mapNumberRange(progress, {
      srcStart: 0,
      srcEnd: 100,
      destStart: 30,
      destEnd: 0,
    })}px)`
  }, 30)
} 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    每次定时器中的回调函数执行时，都会让进度加1，并且每次修改进度后，都会动态修改：

    1. 加载文字的数值
    2. 加载文字的不透明度，借助前面实现的mapNumberRange辅助纯函数实现
    3. 背景图片的模糊半径，借助前面实现的mapNumberRange辅助纯函数实现

    直到加载进度到达100，就清除定时器，完成图片加载过程，至此整个从模糊到清晰的图片加载特效就实现完成啦，效果还是有点酷炫的吧！

    6. 完整代码

    html

    

  
    
    
    
    
    blury-loading
  
  
    
    
    
    0%
    

    
  
 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    css

    * {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.background {
  position: absolute;
  inset: -30px auto auto -30px;
  width: calc(100vw + 60px);
  height: calc(100vh + 60px);
  z-index: -1;
  /* background 中写 center/cover 等价于 background-size */
  /* background-size: cover; */
  background: url('https://unsplash.com/photos/QMwkGYFDjiE/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU2NTExNTgw&force=true')
    no-repeat center center/cover;
  filter: blur(30px);
}

.loading-text {
  font-size: 128px;
  color: #fff;
} 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    js

    ;(() => {
  /** @type HTMLDivElement */
  const oBackground = document.querySelector('.background')
  /** @type HTMLParagraphElement */
  const oLoadingText = document.querySelector('.loading-text')

  /**
   * @description 将数值按照一定范围进行映射
   * @param {number} num 待映射的数
   * @param {{srcStart: number, srcEnd: number, destStart: number, destEnd: number}} options
   */
  const mapNumberRange = (num, options) => {
    const { srcStart, srcEnd, destStart, destEnd } = options

    return (
      ((num - srcStart) * (destEnd - destStart)) / (srcEnd - srcStart) +
      destStart
    )
  }

  const blurAnimation = () => {
    // 加载进度
    let progress = 0
    let timer = setInterval(() => {
      progress++

      if (progress === 100) {
        // 加载完毕则清除定时器
        clearInterval(timer)
      }

      // 设置加载文字的数值
      oLoadingText.innerText = `${progress}%`
      // 设置加载文字的不透明度 -- 随加载进度变化
      oLoadingText.style.opacity = mapNumberRange(progress, {
        srcStart: 0,
        srcEnd: 100,
        destStart: 1,
        destEnd: 0,
      })
      // 设置背景图片的模糊半径 -- 随加载进度变化
      oBackground.style.filter = `blur(${mapNumberRange(progress, {
        srcStart: 0,
        srcEnd: 100,
        destStart: 30,
        destEnd: 0,
      })}px)`
    }, 30)
  }

  const init = () => {
    blurAnimation()
  }

  init()
})() 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
  • 相关阅读:
    二叉树最大宽度 : 简单 DFS 运用题
    django —— 搭建项目及简单测试
    ios-散列表
    python机器学习之梯度下降法
    源码分析：如何开发规则链
    2022”杭电杯“中国大学生算法设计超级联赛（2）1 3 11题解
    EPAI手绘建模APP常用工具栏_1
    python3 多进程讲解 multiprocessing
    UIKit Inside: frame bounds position anchorPoint center
    【推荐算法】召回模型总结
  • 原文地址：https://blog.csdn.net/pfourfire/article/details/125891157