SwiftUI 中 Shazam 按钮的动画

Question

我想制作像 Shazam 的 Button 这样的动画，但我做不到...

有人知道如何在 SwiftUI 中制作这个动画吗？

这是代码：

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)
                    
            }
        )
    }
}

在此先感谢您的帮助:)

Answer 1

在你的代码更新后甚至有更多问题，它无法运行，你怎么给了我一个空按钮来处理它！

这里有一些东西要送给你：

    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)
            
        }

        
        
        
    }
    
}

更新代码：版本 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()
        }

        
        
        
    }
    
}

更新代码：版本 3.0.0 更多更好的动画

    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()
        }
        
        
        
        
    }
    
}