nice working pulsing effect for recording

This commit is contained in:
talksik
2021-12-12 21:08:09 -08:00
parent febb60e246
commit 9cb67ab353
3 changed files with 71 additions and 23 deletions
@@ -7,6 +7,16 @@
import SwiftUI
extension Animation {
func `repeat`(while expression: Bool, autoreverses: Bool = true) -> Animation {
if expression {
return self.repeatForever(autoreverses: autoreverses)
} else {
return self
}
}
}
struct FooterControlsView: View {
@StateObject var viewModel:FooterControlsViewModel = FooterControlsViewModel()
@@ -14,6 +24,8 @@ struct FooterControlsView: View {
@State var isHolding = false
@State var completedLongPress = false
@State var scaleBigPulser:CGFloat = 1
var dragGesture: some Gesture {
DragGesture(minimumDistance: 0, coordinateSpace: .local)
.onChanged {_ in
@@ -28,20 +40,56 @@ struct FooterControlsView: View {
HStack(alignment: .center) {
Spacer()
Button(action: {
}, label: {
Image(systemName: self.isHolding ? "waveform" : "mic.fill")
.foregroundColor(.white)
.padding()
.background(NirvanaColor.teal)
.clipShape(Circle())
.shadow(radius: 10)
.scaleEffect(x: self.isHolding ? 1.2: 1,
y: self.isHolding ? 1.2: 1,
ZStack {
Button(action: {
}, label: {
Image(systemName: self.isHolding ? "waveform" : "mic.fill")
.foregroundColor(.white)
.padding()
.background(NirvanaColor.teal)
.clipShape(Circle())
.shadow(radius: 10)
.scaleEffect(self.isHolding ? 1.2: 1,
anchor: .center)
.simultaneousGesture(dragGesture)
// .animation(.default, value: self.isHolding)
})
.zIndex(10)
Circle()
.frame(width: 60, height: 60, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.scaleEffect(self.scaleBigPulser,
anchor: .center)
.simultaneousGesture(dragGesture)
})
.foregroundColor(NirvanaColor.teal)
.opacity(0.3)
.onAppear {
let baseAnimation = Animation.easeOut(duration: 1)
let repeated = baseAnimation.repeatForever(autoreverses: true)
withAnimation(repeated) {
self.scaleBigPulser = 1.12
}
}
Circle()
.frame(width: 50, height: 50, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.scaleEffect(self.isHolding ? 1.5: 1,
anchor: .center)
.foregroundColor(NirvanaColor.teal)
.opacity(0.5)
.animation(Animation.easeInOut(duration:1).repeat(while: self.isHolding, autoreverses: true))
Circle()
.frame(width: 30, height: 30, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.scaleEffect(self.isHolding ? 1.1: 1,
anchor: .center)
.foregroundColor(NirvanaColor.teal)
.opacity(0.9)
.animation(Animation.easeInOut(duration: 1).repeat(while: self.isHolding, autoreverses: true))
}
}
.padding()
}
@@ -27,15 +27,16 @@ struct ChatsCarouselView: View {
GeometryReader {proxy in
let minX = proxy.frame(in: .local).minX
Image(carouselUser.profilePictureUrl)
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fit)
.clipShape(Circle())
.shadow(radius: 10)
.rotation3DEffect(.degrees(minX / -10), axis: (x: 0, y: 1, z: 0))
.blur(radius: abs(minX) / 40)
ZStack {
Image(carouselUser.profilePictureUrl)
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fit)
.clipShape(Circle())
.shadow(radius: 10)
.rotation3DEffect(.degrees(minX / -10), axis: (x: 0, y: 1, z: 0))
.blur(radius: abs(minX) / 40)
}
}
.frame(maxWidth: UIScreen.main.bounds.width - 100, maxHeight: UIScreen.main.bounds.height - 200)
.padding(20)
@@ -16,7 +16,6 @@ struct HomeView: View {
FooterControlsView()
}
.navigationBarHidden(true)
.frame(maxWidth:.infinity, maxHeight: .infinity)
.accentColor(NirvanaColor.teal)
.background(NirvanaColor.bgLightGrey)