React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React层次模糊容器组件

基于React封装一个层次模糊效果的容器组件

作者:慕仲卿

这篇文章主要为大家详细介绍了如何基于React封装一个层次模糊效果的容器组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

绘制H5页面时,模糊效果(或称为毛玻璃效果)被广泛用于增强用户界面的美观性和层次感。这种效果不仅可以吸引用户的注意,还能提供视觉上的分隔,而不完全阻挡背后的内容。基于此,本文封装一个React组件,该组件能够在容器上实现层次化的模糊效果,使得开发者可以轻松地在其项目中应用并自定义这种设计风格。

先放效果图:

需求分析

该组件需要满足以下几个基本需求:

构建过程

基于上述需求,我们设计了HcBlurBox组件。下面是构建此组件的具体步骤:

1. 设置组件接收的Props

首先,我们定义组件能够接收的props,包括:

2. 计算模糊层样式

对于每一个模糊层,我们根据传入的accuracymaxBlurratio来动态计算其高度和模糊度。使用Array(accuracy).fill(0).map来创建指定数量的模糊层,并为每层应用以下样式规则:

3. 条件渲染

为了确保组件的灵活性和健壮性,我们在没有提供height属性时让组件返回null,以避免渲染不必要的DOM元素。

4. 应用样式和自定义类名

最后,我们将计算得到的样式应用到每个模糊层上,并通过${className}模板字符串将用户提供的自定义类名添加到容器div上,以实现进一步的样式自定义。

完整代码展示

import React from "react";
import "./index.less";

/**
 * 创建一个具有层次模糊效果的容器组件。
 *
 * @component
 * @param {Object} props - 组件接收的props。
 * @param {number} [props.accuracy=2] - 精度,决定模糊层的数量。
 * @param {number} [props.radius=5] - 模糊层的边框圆角半径。
 * @param {number} props.height - 容器的高度,必须提供。
 * @param {number} [props.maxBlur=12.5] - 最大模糊值。
 * @param {number} [props.ratio=100] - 高度比率,用于计算每个模糊层的高度百分比。
 * @param {string} [props.className=''] - 容器的自定义类名。
 * @returns {ReactElement|null} 返回一个模糊效果的React组件,如果没有提供高度,则返回null。
 *
 * @example
 * <HcBlurBox height={100} accuracy={3} maxBlur={15} className="custom-class" />
 */
const HcBlurBox = (props) => {
  const { 
    accuracy = 2, 
    radius = 5, 
    height, 
    maxBlur = 12.5, 
    ratio = 100,
    className = '',
  } = props;

  // 如果没有提供高度,则不渲染组件
  if(!height) return null;

  return (
    <div className={`hc-blur-box-container ${className}`}>
      {Array(accuracy).fill(0).map(
        (v, i) => {
          const step = i + 1;
          const _height = ratio - (100 / accuracy) * i; // 计算每个模糊层的高度百分比
          const blur = `blur(${(maxBlur / accuracy) * step}px)`; // 根据精度和步骤计算模糊效果
          // 如果计算得到的高度小于2倍的height,则不渲染该层
          if (2 * radius > _height * height / 100) return null;
          return (
            <div
              key={i} // 添加key以满足React列表渲染的要求
              className="hc-blur-box"
              style={{
                height: `${_height}%`, // 设置模糊层的高度
                backdropFilter: blur, // 应用模糊效果
                borderBottomLeftRadius: radius, // 设置边框圆角半径
                borderBottomRightRadius: radius,
              }}
            />
          )
        }
      )}
    </div>
  )
}

export default HcBlurBox;
.hc-blur-box-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  .hc-blur-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    backdrop-filter: blur(2.5px);
    mask: linear-gradient(to top, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 70%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 100%);
    z-index: 1;
    border: none ;
  }
}

通过HcBlurBox组件,开发者可以轻松在其React项目中实现具有层次模糊效果的容器,大大丰富了界面的视觉效果和用户体验。此组件的灵活性和可定制性,使其能够适应各种设计需求。

兼容方案

上述代码虽然能够完成最终效果,但是有的浏览器不支持mask css属性,这个时候,只需要通过绝对定位和父容器等大的div去模拟mask的效果就可以了。以下的代码是兼容组件,当然你喜欢的话可以将两个组件融合成一个。

兼容组件

import React from "react";
import "./index.less"; // 引入样式文件

const DoubleLayeredDiv = () => {
  return (
    <div className="container">
      {[...Array(10).keys()].map((index) => (
        <div
          key={index}
          className={`background-image img${index + 1}`}
          style={{
              background-position-y: -10*(index+1); 
              filter: `blur(${index+1}px)`; 
              bottom: -10*(index+1);
          }}
        ></div>
      ))}
      <div className="gradient-overlay"></div>
      <div className="content">Your Content Here</div>
    </div>
  );
};

export default DoubleLayeredDiv;

对应的样式文件 (index.less)

.container {
  margin: auto;
  margin-top: 200px;
  position: relative;
  width: 400px;
  height: 600px;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 0 20px 0px;
  background-image: url('./page1.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.background-image {
  width: 100%;
  height: 600px;
  background-image: url('./page1.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  z-index: 1;
}

.gradient-overlay {
  width: 100%;
  height: 500px;
  background-image: linear-gradient(to top, black, transparent);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
}

兼容backdrop-filter

虽然现代浏览器普遍支持CSS的backdrop-filter属性来实现模糊效果,但是并非所有浏览器都支持(特别是旧版浏览器)。对于不支持backdrop-filter属性的浏览器,我们可以采取以下兼容性方案:

总之,虽然完全的跨浏览器兼容性往往难以实现,但通过巧妙地利用CSS和JavaScript,仍然可以为大多数用户提供接近设计意图的体验,同时为那些使用旧浏览器的用户提供可接受的备选方案。

到此这篇关于基于React封装一个层次模糊效果的容器组件的文章就介绍到这了,更多相关React层次模糊容器组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文