0

Hi guys I basically have the issue with my background. I made an animated background look in a different SwiftUI file and I want it to be shown as a background in another view. Can you please help me do that?

import SwiftUI

struct AnimatedBackground: View {
    var itemsPerRow = 6
    @State var isAnimating = false
    var body: some View {
        VStack(spacing: 0){
            ForEach(0..<getNumberOfRows()){i in
                HStack(spacing: 0) {
                    ForEach(0..<self.itemsPerRow){j in
                        Image(self.getImage(indexLocation: (i * self.itemsPerRow) + j)).resizable().padding()
                        
                            .frame(width: UIScreen.main.bounds.width/CGFloat(self.itemsPerRow), height: UIScreen.main.bounds.width/CGFloat(self.itemsPerRow))
                            .opacity(self.isAnimating ? 1 : 0)
                            .animation(
                                Animation
                                    .linear(duration: Double.random(in: 1.0...2.0))
                                    .repeatForever(autoreverses: true)
                                    .delay(Double.random(in: 0...1.5))
                            
                            )
                    }
                }
            }
        }.onAppear(){
                self.isAnimating = true
        }
    }
    
    func getImage(indexLocation:Int) -> String{
        let totalNumbersOfAssets = 30
        print(indexLocation % 30)
        return String(indexLocation % 30)
    }
    
    func getNumberOfRows() -> Int {
        let heightPerItem = UIScreen.main.bounds.width/CGFloat(self.itemsPerRow)
        return Int(UIScreen.main.bounds.height/heightPerItem) + 1
    }
}

struct AnimatedBackground_Previews: PreviewProvider {
    static var previews: some View {
        AnimatedBackground()
    }
}
aheze
  • 24,434
  • 8
  • 68
  • 125
Canxe Official
  • 13
  • 5

2 Answers2

0

Just add it with background():

var body: some View {
        Text("hi")
            .font(.system(.title))
            .foregroundColor(.blue)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(AnimatedBackground())
        
    }

I've chosen to add it on a Text view here, but you can apply background() to any view.

In the event that you want everything to happen at the same rate (as you maybe are implying in the comments), you can move the .animation outside of your ForEach statements:

var body: some View {
       VStack(spacing: 0){
           ForEach(0..<getNumberOfRows()){i in
               HStack(spacing: 0) {
                   ForEach(0..<self.itemsPerRow){j in
                       Image(self.getImage(indexLocation: (i * self.itemsPerRow) + j)).resizable().padding()
                       
                           .frame(width: UIScreen.main.bounds.width/CGFloat(self.itemsPerRow), height: UIScreen.main.bounds.width/CGFloat(self.itemsPerRow))
                           
                   }
               }
           }
       }
       .opacity(self.isAnimating ? 1 : 0)
       .animation(
           Animation
               .linear(duration: Double.random(in: 1.0...2.0))
               .repeatForever(autoreverses: true)
               .delay(Double.random(in: 0...1.5))
       
       )
       .onAppear(){
               self.isAnimating = true
       }
   }
jnpdx
  • 45,847
  • 6
  • 64
  • 94
  • I did it but the icons moving all around and not doing what I want. – Canxe Official Jan 30 '21 at 01:52
  • What I want is to make icons stay where thy are and animate which I described in the code. – Canxe Official Jan 30 '21 at 01:58
  • I'm not sure what you mean. You asked in the question how to use your view as a background, which this (and the other answer) show. If you have a question about how to change your animation, I'd need a more clear explanation of what you're looking for. As far as I can tell, the icons are staying where they are. – jnpdx Jan 30 '21 at 01:59
  • You are right. Thats the actual answer. This view in its canvas is working so good. Icons which I put is not moving anywhere. but when I tell .background(AnimatedBackground()) this one the icons are start moving all around the screen. But it should stay and just blur and get clear by time I described. – Canxe Official Jan 30 '21 at 02:03
  • Are you saying you want all of the images to change opacity at the same time at the same pace instead of all differently? – jnpdx Jan 30 '21 at 02:08
  • Lemme send you a video of what I want. can you please send me your email or anything that I can send you info needed. Because its to hard to explain it here. – Canxe Official Jan 30 '21 at 02:10
  • You can dm me on Twitter (@jnpdx) if you want, but it's good for other learners to keep everything visible here on SO. Check the code I added first and see if it addresses what you're looking for. – jnpdx Jan 30 '21 at 02:13
  • @CanxeOfficial you can dm me on Discord (aheze#3125) if you want, too – aheze Jan 30 '21 at 02:14
  • 1
    @aheze I have sent a friend request CanXE#2694 – Canxe Official Jan 30 '21 at 02:16
0

So you want AnimatedBackground as the background of some view? You can use a ZStack:

struct ContentView: View {
    var body: some View {
        ZStack {
            AnimatedBackground() /// put it here!
            Text("Hello!")
        }
    }
}

Result (ContentView):

Result

aheze
  • 24,434
  • 8
  • 68
  • 125