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

综上所述

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

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

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

我们来模糊一下吧!!

相关推荐
IT_陈寒1 小时前
SpringBoot 3.2 实战:这5个新特性让你的开发效率提升50%!
前端·人工智能·后端
水星梦月1 小时前
跨平台开发中的图形渲染:Canvas与View+CSS的性能分析与决策路径
前端·css·图形渲染·canvas
yuanyxh1 小时前
前端仔的一次运维实践
linux·运维·前端
望获linux4 小时前
【Linux基础知识系列:第一百五十九篇】磁盘健康监测:smartctl
linux·前端·数据库·chrome·python·操作系统·软件
十一吖i5 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
冰暮流星7 小时前
css之线性渐变
前端·css
徐同保7 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
mapbar_front7 小时前
大厂精英为何在中小公司水土不服?
前端
生莫甲鲁浪戴7 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio