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

综上所述

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

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

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

我们来模糊一下吧!!

相关推荐
浩星7 分钟前
electron系列5:深入理解Electron打包
前端·javascript·electron
患得患失94912 分钟前
【前端WebSocket】心跳功能,心跳重置策略、双向确认(Ping-Pong) 以及 指数退避算法(Exponential Backoff)
前端·websocket·算法
英俊潇洒美少年13 分钟前
React 实现 AI 流式打字机对话:SSE 分包粘包处理 + 并发优化
前端·javascript·react.js
chQHk57BN16 分钟前
前端测试入门:Jest、Cypress等测试框架使用教程
前端
遇见你...25 分钟前
前端技术知识点
前端
AC赳赳老秦36 分钟前
OpenClaw image-processing技能实操:批量抠图、图片尺寸调整,适配办公需求
开发语言·前端·人工智能·python·深度学习·机器学习·openclaw
We་ct44 分钟前
LeetCode 172. 阶乘后的零:从暴力到最优,拆解解题核心
开发语言·前端·javascript·算法·leetcode·typescript
军军君0144 分钟前
数字孪生监控大屏实战模板:可视化数字统计展示
前端·javascript·vue.js·typescript·echarts·数字孪生·前端大屏
此刻觐神1 小时前
IMX6ULL开发板学习-03(Linux文件相关命令)
前端·chrome
吴声子夜歌1 小时前
ES6——Iterator和for...of循环详解
前端·javascript·es6