【译】[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的解释。

综上所述

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

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

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

我们来模糊一下吧!!

相关推荐
Brown.alexis43 分钟前
es6知识点1-自备使用
前端·ecmascript·es6
小爬的老粉丝2 小时前
JavaScript 纯前端预览 WPS:先识别容器,再路由解析器
前端·javascript·wps
计算机魔术师2 小时前
新兴多智能体系统的模式与问题
前端
用户059540174463 小时前
AI Agent 上下文污染踩坑实录:用 pytest + Redis 揪出 3 类记忆串号 bug,排查 6 小时
前端·css
满栀5853 小时前
状态管理:Redux、Vuex、Pinia 核心区别
前端·javascript·typescript
一拳不是超人4 小时前
DeepSeek Harness 为什么敢说"一切皆插件"?拆透 Cordis 引擎的五大核心机制
前端·人工智能·agent
IT_陈寒4 小时前
Python的GIL让我多写了500行代码
前端·人工智能·后端
风骏时光牛马4 小时前
AI智能体能力调度微服务
前端
果果燕5 小时前
C++学习笔记(三):类与对象拓展学习笔记
java·服务器·前端
Eloudy5 小时前
ReAct 原理简介
前端·javascript·人工智能·react.js·agent·gpu