【译】[Swift] 让我们为 View 添加模糊效果!

我想通过向视图添加模糊效果来创建时尚的效果,因此我研究了如何向视图添加模糊效果。

环境

  • Xcode 12.5
  • swift 5.4

介绍

这次,imageView我们将添加 under view,给 this 添加模糊效果viewControllerview并验证会添加什么样的效果。

添加模糊效果

swift 复制代码
import UIKit

class BlurEffectSampleViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // ぼかし効果のスタイルを決め、エフェクトを生成
        let blurEffect = UIBlurEffect(style: .regular)

        // ぼかし効果を設定したUIVisualEffectViewのインスタンスを生成
        let blurEffectView = UIVisualEffectView(effect: blurEffect)

        // ぼかし効果Viewのframeをviewのframeに合わせる
        blurEffectView.frame = view.frame

        // viewにぼかし効果viewを追加
        view.addSubview(blurEffectView)
    }
}

UI视觉效果视图

您可以使用UIVisualEffectView轻松添加模糊效果。另外,通过设置 ,您可以创建各种模糊效果UIVisualEffectView(effect:)UIBlurEffect

用户界面模糊效果

UIBlurEffectUIVisualEffectView一个对它后面分层的内容应用模糊效果的对象。UIBlurEffectUIBlurEffect.style有很多种类型,你得到的模糊效果会根据你选择的样式而变化。

UIBlurEffect.style

共有20种款式。

UIBlurEffect.style文档中,总共有 21 种类型,Additional Styles Xcode 12.5中有 6 种样式,但我只能确认 5 种样式的存在。

  • 适应性强的风格

    • 系统超薄材质
    • 系统薄材料
    • 系统材质
    • 系统厚材料
    • systemChrome材质
  • 灯光风格

    • 系统超薄材质轻
    • 系统薄材质轻
    • 系统材质光
    • 系统厚材质轻
    • 系统Chrome材质光
  • 深色风格

    • 系统超薄材质深色
    • 系统薄材质深色
    • 系统材质深色
    • 系统厚材质深色
    • 系统Chrome材质深色
  • 附加款式

    • 常规的
    • 额外的光
    • 黑暗的
    • 著名的

光看文字很难理解到底能得到什么样的效果,所以我们来看看屏幕上的区别吧!

我们来对比一下模糊效果的差异

适应性强的风格

没有效果 系统超薄材质 系统薄材料
系统材质 系统厚材料 systemChrome材质

灯光风格

没有效果 系统超薄材质轻 系统薄材质轻
系统材质光 系统厚材质轻 系统Chrome材质光

深色风格

没有效果 系统超薄材质深色 系统薄材质深色
系统材质深色 系统厚材质深色 系统Chrome材质深色

附加款式

没有效果 额外的光
常规的 黑暗的 著名的

当我实际添加模糊效果时,我发现两者之间存在细微差别。具体效果差异请参见各个UIBlurEffect.style的解释。

综上所述

你找到你喜欢的模糊效果了吗?

我了解到有许多不同风格的模糊效果。除了像我们这次那样简单地模糊图像之外,这种模糊效果还可以以多种方式使用,例如仅模糊图像的一部分或模糊人物以外的区域。

我想用模糊效果来时尚地度过这个夏天。

我们来模糊一下吧!!

相关推荐
llz_112几秒前
web-第六次课后作业
前端·spring boot·后端
爱勇宝9 分钟前
CEO通知5100名员工:今年不涨薪了,钱要投给AI!
前端·后端·程序员
乘风gg18 分钟前
前端死到第几轮了?得物前端部门解散有感!
前端·ai编程·claude
艾伦野鸽ggg22 分钟前
web 组大一下第二次考核
前端·css·html
水煮白菜王28 分钟前
高德地图"未获得商用授权"水印临时移除方案
前端·javascript
库拉AI小李29 分钟前
# 数据清洗与分析:Gemini 3.5 处理 Excel 数据的实操体验
前端·人工智能·后端
小小小小宇29 分钟前
React17 18 19 新增能力、解决问题、原理与使用详解
前端
by————组态31 分钟前
Ricon组态可视化编辑器 - 所见即所得的工业画布
前端·javascript·物联网·架构·编辑器·组态
Csvn35 分钟前
面试翻车现场:`Array(100).map(() => 1)` 为什么全为空?
前端
光影少年38 分钟前
react大列表优化:虚拟列表原理
前端·javascript·react.js