50projects50days知识点-blurry-loading

filter
setInterval()

示例网址：

https://50projects50days.com/projects/blurry-loading/

http://50projects.tc.cluski.top/50projects50days/blurry-loading/

效果：

思路

背景图片使用filter: blur();进行模糊，而前面的百分比使用opacity来进行显示->不显示。并且在计算数值的时候，使用到了一个算法：

// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
}

num指定传入的值，in_min和in_max来制定传入值的最大最小值，而out_min和out_max则表示需要传出值的最大最小值。

该算法可以很好的将一个序列转成另一个序列。

filter

filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

此例子中使用filter来进行模糊画面，但是进行模糊的画面在边缘会有一圈白的痕迹：

此例子中，聪明地将图片稍稍放大了60px，并向左向上移动了30px，从而将白色的痕迹稍微去除了一点：

.bg {
  background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80')
    no-repeat center center/cover;
  position: absolute;
  top: -30px;
  left: -30px;
  width: calc(100vw + 60px);
  height: calc(100vh + 60px);
  z-index: -1;
  filter: blur(0px);
}

setInterval()

Window 和 Worker 接口提供的 setInterval() 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。

它返回一个 interval ID，该 ID 唯一地标识时间间隔，因此你可以稍后通过调用 clearInterval() 来移除定时器。

此例子中使用定时器来更新屏幕上的百分比、百分比的透明度、北京的模糊度。

let int = setInterval(blurring, 30)

function blurring() {
  load++

  if (load > 99) {
    clearInterval(int)
  }

  loadText.innerText = `${load}%`
  loadText.style.opacity = scale(load, 0, 100, 1, 0)
  bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
}

需要使用clearInterval(int)来取消定时器

50projects50days知识点-blurry-loading

filter

setInterval()

评论区