Advance Animation in SwiftUI

Hey guys, am back with some new stuffs in advance animation in SwiftUI. Here am going to do some dim and scaling effects of image with bit of animation. Let’s See!

Advance animation

First thing we have to do is adding image to asset. Here i download some flower png and added those image to asset. Now it's time to create UI.

First create navigationView and List with image array.

struct ContentView: View {
var imgArray = ["Virat", "Virat-1", "Virat-2", "Virat-3", "Virat-4", "Virat-5", "Virat-6"]
var body: some View {
NavigationView {
List(imgArray, id:\.self){(img) in
//cell configuration
  }
 }
}

Now our List is ready to load images. Now configure image with dim and scaling animations. Lets create a separate class for configuring image with animation.

struct CellClass: View{
@State var img = ""
var body: some View {
Image(img)
.resizable()
.frame(width: UIScreen.main.bounds.size.width-50, height: 300, alignment: .center)
}
}

Lets add some animation to it. Now for dim animation, on tapping image view we reduce and increase opacity value along with scaling for smooth animation.

@State var scaled = true
@State var dim = true

The above variables are create to control the opacity and scaling.

struct CellClass: View{
@State var scaled = true
@State var dim = true
@State var img = ""
var body: some View {
Image(img)
.resizable()
.frame(width: UIScreen.main.bounds.size.width-50, height: 300, alignment: .center)
.opacity(dim ? 0.2 : 1.0) // opacity
.animation(.easeInOut(duration: 1.0))
.scaleEffect(scaled ? 0.5 : 1.0) // scaling
}
}

Now the above code explains when that dim variable is true, the opacity reduces to 0.2 and if scaled variable becomes to the size get reduced by 0.5.

Now this will happen on tapping. So we will add toggle action in tap gesture actions. And the final code looks like below

struct CellClass: View{
@State var scaled = true
@State var dim = true
@State var img = ""
var body: some View {
Image(img)
.resizable()
.frame(width: UIScreen.main.bounds.size.width-50, height: 300, alignment: .center)
.opacity(dim ? 0.2 : 1.0)
.animation(.easeInOut(duration: 1.0))
.scaleEffect(scaled ? 0.5 : 1.0)
.onTapGesture {
self.dim.toggle()
self.scaled.toggle()
}
}
}

Now the cellclass is ready to use in list. We can use above cell like below inside list.

CellClass(scaled: true, dim: true, img: img)

You can find the above source code in my git repo and here is the link.https://github.com/LyvennithaQgen/AdvancedAnimation. Follow me for more updates.

Happy Coding!❤️