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

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

环境

  • Xcode 12.5
  • swift 5.4

介绍

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

添加模糊效果

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

用户界面模糊效果

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

UIBlurEffect.style

共有20种款式。

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

  • 适应性强的风格

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

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

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

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

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

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

适应性强的风格

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

灯光风格

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

深色风格

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

附加款式

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

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

综上所述

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

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

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

我们来模糊一下吧!!

相关推荐
excel29 分钟前
Marked 与 Markdown 有什么区别?该怎么选?
前端
Da Da 泓1 小时前
五子棋 Web 端测试用例报告
前端·网络·websocket·网络协议·测试用例·项目
zxcvb1532 小时前
远程查看本地文档:一条轻量 Web 文件服务的工程化链路
前端·远程查看文档
niucloud-admin2 小时前
NIUCLOUD PHP SAAS上门家政使用文档:城市管理
java·前端·php
北岛贰3 小时前
啵啵音乐迎来全新升级!
前端
hkNaruto4 小时前
【AI】基于大模型的AI游戏地图生成、控制方案:AI Native Game Harness 迁移操作手册
前端·人工智能·游戏
IT_陈寒5 小时前
Java序列化踩坑记:对象循环引用让我加班两小时
前端·人工智能·后端
Acro5 小时前
快给macOS 上的Grok Bot换一套皮肤
前端
flash俊杰5 小时前
双引擎 OCR 编排:逐页判定、视觉优先、partial 语义与三层超时
前端
计算机魔术师5 小时前
Reddit 每周被 Google 偷走 100 万次点击,CEO 摊牌了
前端