Animation of Shazam's button in SwiftUI

Question

I would like to make an animation like Shazam's Button but I can't manage to do it...

Anyone have an idea how to make this animation in SwiftUI?

Here is the code :

import SwiftUI
import Foundation

struct SpeechButton: View {
    
    @State var isPressed:Bool = false

    var body: some View {
        
        Button(action:{
            
        }){
            ZStack {
                
    //-->       // if self.isPressed { RoundAnimation() }
                
                Image(systemName: "waveform")// Button Image
                    .resizable()
                    .frame(width: 40, height: 40)
                    .foregroundColor(.white)
                    
            }
        )
    }
}

Thanks in advance for your help people :)

please update your code to full code, we are missing **swiftUISpeech** and **actionPop** — ios coder, Nov 04 '20 at 20:28
@Omid Sorry, swiftUISpeech and actionPop has just been added to try a solution... but that's not important :) I just updated the code — Mohamed El Guendouz, Nov 04 '20 at 20:41
No big deal, At first I could run your code to see what have you done so far, and then try solving issue, but I can not run your code at first place because it missing definition, we or I can not guess what does are, we should know what they are at first, So they are Important! — ios coder, Nov 04 '20 at 20:44
@Omid Yes I understand what you are telling me but the purpose of the issue is just to create an animation like Shazam's button with a simple button component and using SwiftUI. I would adapt my code afterwards :) — Mohamed El Guendouz, Nov 04 '20 at 20:56
As I said, be more precise about your codes, these kind of questions would be more likely ignored and get no answers! after even commenting you 3 times and telling you the issue, you still not updating your codes! — ios coder, Nov 04 '20 at 21:04
@Omid Yes, I understand. I just updated the code. Is this code correct? — Mohamed El Guendouz, Nov 04 '20 at 21:24
See the version 3.0.0 of codes, it has much better animation, i guess you going like it — ios coder, Nov 04 '20 at 23:57

ios coder · Accepted Answer · 2020-11-05T00:07:03.113

After your code update even has more issue with it, it was not runnable, how ever you just gave me an Empty Button to work on it!

Here I got some thing for you:

    import SwiftUI


struct ContentView: View {
    
    @State var startAnimation: Bool = false
    @State var random: CGFloat = 0
    
    var timer = Timer.publish (every: 0.1, on: .main, in: .common).autoconnect()
    
    var body: some View {
        


        Button(action: {
            
            // your logic!
            
        }){

            ZStack
            {
                Circle()
                    .fill(Color(UIColor.systemTeal))
 
                
                Image(systemName: "waveform")
                    .resizable()
                    .frame(width: 100, height: 100)
                
                
            }
            .frame(width: 200, height: 200)
            .scaleEffect(startAnimation ? CGFloat(1*random) : 1 )
            .animation(.easeInOut)
            .onTapGesture {
                startAnimation.toggle()

                if startAnimation == false
                {
                    timer.upstream.connect().cancel()

                }
  
            }
    
            
        }
        .onReceive(timer) { _ in
            
            random = CGFloat.random(in: 0.5...1)
            
        }

        
        
        
    }
    
}

Update Code: Version 2.0.0

import SwiftUI


struct ContentView: View {
    
    @State var startAnimation: Bool = false
    @State var random: CGFloat = 0
    

    @State var timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
    
    
    func stopTimer() {
        timer.upstream.connect().cancel()
    }
    
    func startTimer() {
        timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
    }
    
    
    
    var body: some View {
        


        Button(action: {
            
            // your logic!
            
        }){

            ZStack
            {
                Circle()
                    .fill(RadialGradient(gradient: Gradient(colors: [Color(UIColor.systemTeal), Color.white.opacity(0.1)]), center: .center, startRadius: 0, endRadius: 180))
 
                
                Image(systemName: "waveform")
                    .resizable()
                    .frame(width: 100, height: 100)
                
                
            }
            .frame(width: 200, height: 200)
            .scaleEffect(startAnimation ? random : 1 )
            .animation(.easeInOut)
            .onTapGesture {
                startAnimation.toggle()

                if startAnimation == false
                {
                    stopTimer()

                }
                else
                {
                    startTimer()
                }
  
            }
    
            
        }
        .onReceive(timer) { _ in
            random = CGFloat.random(in: 0.5...1)
        }
        .onAppear()
        {
            stopTimer()
        }

        
        
        
    }
    
}

Update Code: Version 3.0.0 Much more and better Animation

    import SwiftUI


struct ContentView: View {
    
    @State var startAnimation: Bool = false
    @State var random1: CGFloat = 0.5
    @State var random2: CGFloat = 0.5
    
    
    @State var timer = Timer.publish(every: 0.3, on: .main, in: .common).autoconnect()
    
    
    func stopTimer() {
        timer.upstream.connect().cancel()
    }
    
    func startTimer() {
        timer = Timer.publish(every: 0.3, on: .main, in: .common).autoconnect()
    }
    
    
    
    var body: some View {
        
        
        
        Button(action: {
            
            // your logic!
            
        }){
            
            ZStack
            {
                
                
                Circle()
                    .fill(RadialGradient(gradient: Gradient(colors: [Color(UIColor.systemTeal), Color.white.opacity(0.1)]), center: .center, startRadius: 0, endRadius: 400))
                    .frame(width: random2*500, height: random2*500)
                
                Circle()
                    .fill(RadialGradient(gradient: Gradient(colors: [Color(UIColor.gray), Color.white.opacity(0.01)]), center: .center, startRadius: 0, endRadius: 400))
                    .frame(width: random1*400, height: random1*400)
                
                
                Circle()
                    .fill(RadialGradient(gradient: Gradient(colors: [Color(UIColor.systemTeal), Color.white.opacity(0.1)]), center: .center, startRadius: 150, endRadius: 190))
                    .frame(width: 200, height: 200)
                
                Image(systemName: "waveform")
                    .resizable()
                    .frame(width: 100, height: 100)
                
                
            }
            
            .scaleEffect(startAnimation ? random1 : 1 )
            .animation(.easeInOut)
            .onTapGesture {
                startAnimation.toggle()
                
                if startAnimation == false
                {
                    stopTimer()
                    
                }
                else
                {
                    startTimer()
                }
                
            }
            
            
        }
        .onReceive(timer) { _ in
            random1 = CGFloat.random(in: 0.5...1)
            random2 = CGFloat.random(in: 0.5...1)
            print(random1, random2)
        }
        .onAppear()
        {
            stopTimer()
        }
        
        
        
        
    }
    
}

Animation of Shazam's button in SwiftUI

1 Answers1