Blur Views In SwiftUI

Mobile Apps Academy
2 min readFeb 19, 2024

In this article, We will explore how to implement an Animated Onboarding UI View in SwiftUI

Before proceeding, please consider subscribing to our YOUTUBE CHANNEL

It gives us a lot of motivation to produce high-quality content for you guys.

if you are interested in watching the video tutorial, Check out below.

Let's start by adding the script BlurView and simple TextView inside it

import SwiftUI

struct BlurView: View {

var body: some View {
VStack{
Text("Mobile \nApps \nAcademy")
.font(.system(size: 80))
.bold()
.foregroundStyle(.yellow)
.onTapGesture {
self.isBlur.toggle()
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(.black)
}
}

Create a BlurModier<BlurContent: View> script and inherit it from ViewModifier.

import SwiftUI

struct BlurModifier<BlurContent: View>: ViewModifier {

func body(content: Content) -> some View {

}
}

Inside the body, we are setting the blur and changing it with animation

import SwiftUI

struct BlurModifier<BlurContent: View>: ViewModifier {

@Binding var showBlur: Bool
@State var blurRadius: CGFloat = 10

let content: () -> BlurContent

func body(content: Content) -> some View {
Group {
content
.blur(radius: showBlur ? blurRadius : 0)
.animation(.easeInOut, value: showBlur)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.overlay {
self.content()
.opacity(showBlur ? 1 : 0)
.animation(.easeInOut(duration: 0.4), value: showBlur)
}
}
}

Now using this modifier on a view should look like below.

import SwiftUI

struct BlurView: View {
@State var isBlur: Bool = false

var body: some View {
VStack{
Text("Mobile \nApps \nAcademy")
.font(.system(size: 80))
.bold()
.foregroundStyle(.yellow)
.onTapGesture {
self.isBlur.toggle()
}
}
.modifier(BlurModifier(showBlur: $isBlur, content: {
VStack(spacing: 10){
Color.black.opacity(0.1)
}
.ignoresSafeArea()
.onTapGesture {
isBlur.toggle()
}
}))
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(.black)
}
}

That’s it, You should be able to see the blur effect

Once again Thanks for stopping by.
Do check out our YOUTUBE CHANNEL

Social Handles

Instagram : https://www.instagram.com/mobileappsacademy/

Twitter : https://twitter.com/MobileAppsAcdmy

LinkedIn : https://www.linkedin.com/company/mobile-apps-academy/

--

--

Mobile Apps Academy

Welcome to Mobile Apps Academy, your go-to channel for all things mobile app development!