-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9 from PLREQ/feat/mainview1
- Loading branch information
Showing
10 changed files
with
380 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
Muzip/Resources/Assets.xcassets/menuIcon.imageset/Contents.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
{ | ||
"images" : [ | ||
{ | ||
"filename" : "M.svg", | ||
"idiom" : "universal" | ||
} | ||
], | ||
"info" : { | ||
"author" : "xcode", | ||
"version" : 1 | ||
}, | ||
"properties" : { | ||
"preserves-vector-representation" : true | ||
} | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions
15
Muzip/Resources/Assets.xcassets/pause.imageset/Contents.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
{ | ||
"images" : [ | ||
{ | ||
"filename" : ".svg", | ||
"idiom" : "universal" | ||
} | ||
], | ||
"info" : { | ||
"author" : "xcode", | ||
"version" : 1 | ||
}, | ||
"properties" : { | ||
"preserves-vector-representation" : true | ||
} | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
// | ||
// CircleBeatAnimationView.swift | ||
// Muzip | ||
// | ||
// Created by 이주화 on 2023/05/29. | ||
// | ||
|
||
import SwiftUI | ||
|
||
struct CircleBeatAnimationView: View { | ||
@State private var isAnimating = false | ||
@State private var animationSpeed: Double = 1 | ||
|
||
var body: some View { | ||
VStack { | ||
ZStack { | ||
Circle() | ||
.fill(Color.mzBlue) | ||
.opacity(0.2) | ||
.frame(width: 518, height: 518) | ||
.scaleEffect(isAnimating ? 1.1 : 1.0) | ||
.animation( | ||
.easeInOut(duration: 0.2) | ||
.repeatForever(autoreverses: true) | ||
.speed(animationSpeed) | ||
, value: isAnimating | ||
) | ||
Circle() | ||
.fill(Color.mzBlue) | ||
.opacity(0.2) | ||
.frame(width: 354, height: 354) | ||
.scaleEffect(isAnimating ? 1.1 : 1.0) | ||
.animation( | ||
.easeInOut(duration: 0.2) | ||
.repeatForever(autoreverses: true) | ||
.speed(animationSpeed) | ||
.delay(0.05) | ||
, value: isAnimating | ||
) | ||
|
||
Circle() | ||
.fill(Color.black) | ||
.frame(width: 218, height: 218) | ||
.scaleEffect(isAnimating ? 1.1 : 1.0) | ||
.animation( | ||
.easeInOut(duration: 0.2) | ||
.repeatForever(autoreverses: true) | ||
.speed(animationSpeed) | ||
.delay(0.1) | ||
, value: isAnimating | ||
) | ||
} | ||
} | ||
.onAppear { | ||
self.isAnimating = true | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,135 @@ | ||
// | ||
// WaveAnimaion.swift | ||
// Muzip | ||
// | ||
// https://github.com/Wavemaster111188/AnimatedWaveform?ref=iosexample.com | ||
|
||
import SwiftUI | ||
|
||
public struct WaveAnimaionView: View { | ||
var color: Color = .accentColor | ||
var renderingMode: RenderingMode = .monochrome | ||
var secondaryColor: Color? = nil | ||
var animated: Bool = true | ||
|
||
public init(color: Color = .accentColor, renderingMode: WaveAnimaionView.RenderingMode = .monochrome, secondaryColor: Color? = nil, animated: Bool = true) { | ||
self.color = color | ||
self.renderingMode = renderingMode | ||
self.secondaryColor = secondaryColor | ||
self.animated = animated | ||
} | ||
|
||
private var ringColor: Color { | ||
switch renderingMode { | ||
case .hierarchical: | ||
return color.opacity(0.5) | ||
case .monochrome: | ||
return color | ||
case .palette: | ||
return secondaryColor ?? color | ||
} | ||
} | ||
|
||
@State private var lineLenghts: [CGFloat] = [5, 20, 30, 15, 25, 10] | ||
|
||
public var body: some View { | ||
GeometryReader { geo in | ||
let width = geo.size.width | ||
let gradient = RadialGradient(colors: [ringColor, color], center: UnitPoint.center, startRadius: width/2.5, endRadius: width/2.5-1) | ||
|
||
WaveAnimaion(lineLenghts: lineLenghts) | ||
.strokeBorder(gradient, style: StrokeStyle(lineWidth: width/16, lineCap: .round), antialiased: true) | ||
.frame(maxWidth: .infinity, maxHeight: .infinity) | ||
.scaledToFit() | ||
.onAppear { | ||
if animated { | ||
withAnimation(.linear(duration: 0.7).repeatForever()) { | ||
lineLenghts = [20, 10, 2, 25, 10, 2] | ||
} | ||
} | ||
} | ||
} | ||
} | ||
|
||
public enum RenderingMode { | ||
case hierarchical, monochrome, palette | ||
} | ||
} | ||
|
||
/// The actual Shape for the animating wave form. | ||
struct WaveAnimaion: InsettableShape { | ||
|
||
// MARK: - Property | ||
var lineLenghts: [CGFloat] | ||
|
||
// MARK: - Animatable | ||
var animatableData: AnimatablePair<CGFloat, AnimatablePair<CGFloat, AnimatablePair<CGFloat, AnimatablePair<CGFloat, AnimatablePair<CGFloat, CGFloat>>>>> { | ||
get { | ||
AnimatablePair( | ||
lineLenghts[0], | ||
AnimatablePair( | ||
lineLenghts[1], | ||
AnimatablePair( | ||
lineLenghts[2], | ||
AnimatablePair( | ||
lineLenghts[3], | ||
AnimatablePair( | ||
lineLenghts[4], | ||
lineLenghts[5] | ||
) | ||
) | ||
) | ||
) | ||
) | ||
} | ||
|
||
set { | ||
lineLenghts[0] = CGFloat(newValue.first) | ||
lineLenghts[1] = CGFloat(newValue.second.first) | ||
lineLenghts[2] = CGFloat(newValue.second.second.first) | ||
lineLenghts[3] = CGFloat(newValue.second.second.second.first) | ||
lineLenghts[4] = CGFloat(newValue.second.second.second.second.first) | ||
lineLenghts[5] = CGFloat(newValue.second.second.second.second.second) | ||
} | ||
} | ||
|
||
// MARK: - Conformance to InsettableShape | ||
var insetAmount = 0.0 | ||
|
||
func inset(by amount: CGFloat) -> some InsettableShape { | ||
var arc = self | ||
arc.insetAmount += amount | ||
return arc | ||
} | ||
|
||
// MARK: - The path | ||
func path(in rect: CGRect) -> Path { | ||
let w = rect.width/100 | ||
let h = rect.height/100 | ||
|
||
let lines: [[CGPoint]] = [ | ||
[CGPoint(x: w*25, y: rect.midY - h*lineLenghts[0]), | ||
CGPoint(x: w*25, y: rect.midY + h*lineLenghts[0])], | ||
[CGPoint(x: w*35, y: rect.midY - h*lineLenghts[1]), | ||
CGPoint(x: w*35, y: rect.midY + h*lineLenghts[1])], | ||
[CGPoint(x: w*45, y: rect.midY - h*lineLenghts[2]), | ||
CGPoint(x: w*45, y: rect.midY + h*lineLenghts[2])], | ||
[CGPoint(x: w*55, y: rect.midY - h*lineLenghts[3]), | ||
CGPoint(x: w*55, y: rect.midY + h*lineLenghts[3])], | ||
[CGPoint(x: w*65, y: rect.midY - h*lineLenghts[4]), | ||
CGPoint(x: w*65, y: rect.midY + h*lineLenghts[4])], | ||
[CGPoint(x: w*75, y: rect.midY - h*lineLenghts[5]), | ||
CGPoint(x: w*75, y: rect.midY + h*lineLenghts[5])] | ||
] | ||
|
||
return Path { path in | ||
// two arcs to make it wider | ||
path.addArc(center: CGPoint(x: rect.midX, y: rect.midY), radius: rect.width / 2 - insetAmount, startAngle: .zero, endAngle: .degrees(360), clockwise: false) | ||
path.addArc(center: CGPoint(x: rect.midX, y: rect.midY), radius: rect.width / 2 - insetAmount - 2, startAngle: .zero, endAngle: .degrees(360), clockwise: false) | ||
|
||
for line in lines { | ||
path.addLines(line) | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
// | ||
// bottomSearchBar.swift | ||
// Muzip | ||
// | ||
// Created by 이주화 on 2023/05/29. | ||
// | ||
|
||
import SwiftUI | ||
|
||
struct bottomSearchBar: View { | ||
@State private var isAnimating = false | ||
@State private var isSearch = true | ||
|
||
var body: some View { | ||
VStack { | ||
Spacer() | ||
ZStack { | ||
Color.gray850 | ||
.ignoresSafeArea() | ||
VStack { | ||
Spacer() | ||
HStack { | ||
ZStack { | ||
RoundedRectangle(cornerRadius: 50) | ||
.fill(Color.black) | ||
HStack { | ||
Text(isSearch ? "노래를 찾고 있어요..." : "잠시 멈춤") | ||
.font(.system(size: 17)) | ||
.foregroundColor(.gray050) | ||
Spacer() | ||
Button(action: { | ||
isSearch.toggle() | ||
}) { | ||
if isSearch { | ||
WaveAnimaionView(color: Color.mzLime, renderingMode: .palette, secondaryColor: Color.black) | ||
.scaledToFit() | ||
.frame(width: 50, height: 50) | ||
} else { | ||
Image(name: .pause) | ||
.scaledToFit() | ||
.frame(width: 50, height: 50) | ||
} | ||
} | ||
} | ||
.padding(.leading, 20) | ||
} | ||
.frame(width: 304, height: 50) | ||
ZStack { | ||
Circle() | ||
.fill(Color.black) | ||
.frame(width: 50, height: 50) | ||
Text("X") | ||
.font(.system(size: 25, weight: .bold)) | ||
.foregroundColor(.white) | ||
} | ||
} | ||
.padding(.horizontal, 12) | ||
} | ||
.padding(.bottom, 1) | ||
} | ||
.frame(height: isAnimating ? 66 : 0) | ||
.animation( | ||
.easeInOut(duration: 0.2) | ||
.delay(0.1) | ||
, value: isAnimating | ||
) | ||
} | ||
.onAppear { | ||
self.isAnimating = true | ||
} | ||
} | ||
} | ||
|
||
struct bottomSearchBar_Previews: PreviewProvider { | ||
static var previews: some View { | ||
bottomSearchBar() | ||
} | ||
} |
Oops, something went wrong.