Skip to content

Commit

Permalink
Merge pull request #9 from PLREQ/feat/mainview1
Browse files Browse the repository at this point in the history
Feat[#2, #5] : MainView & BottomSearchBar
  • Loading branch information
yeniful authored May 31, 2023
2 parents 7b0bd94 + 219a8b2 commit af3542b
Show file tree
Hide file tree
Showing 10 changed files with 380 additions and 14 deletions.
12 changes: 12 additions & 0 deletions Muzip.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
objects = {

/* Begin PBXBuildFile section */
D53658C12A2490C900B484F9 /* CircleBeatAnimationView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D53658C02A2490C900B484F9 /* CircleBeatAnimationView.swift */; };
D53658C32A2497C100B484F9 /* bottomSearchBar.swift in Sources */ = {isa = PBXBuildFile; fileRef = D53658C22A2497C100B484F9 /* bottomSearchBar.swift */; };
D53658C72A24F4F800B484F9 /* WaveAnimaion.swift in Sources */ = {isa = PBXBuildFile; fileRef = D53658C62A24F4F800B484F9 /* WaveAnimaion.swift */; };
D57E78CC2A17680A00F35DFC /* MuzipApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = D57E78CB2A17680A00F35DFC /* MuzipApp.swift */; };
D57E78CE2A17680A00F35DFC /* MainView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D57E78CD2A17680A00F35DFC /* MainView.swift */; };
D57E78D02A17680B00F35DFC /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = D57E78CF2A17680B00F35DFC /* Assets.xcassets */; };
Expand Down Expand Up @@ -47,6 +50,9 @@
/* End PBXContainerItemProxy section */

/* Begin PBXFileReference section */
D53658C02A2490C900B484F9 /* CircleBeatAnimationView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CircleBeatAnimationView.swift; sourceTree = "<group>"; };
D53658C22A2497C100B484F9 /* bottomSearchBar.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = bottomSearchBar.swift; sourceTree = "<group>"; };
D53658C62A24F4F800B484F9 /* WaveAnimaion.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WaveAnimaion.swift; sourceTree = "<group>"; };
D57E78C82A17680A00F35DFC /* Muzip.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Muzip.app; sourceTree = BUILT_PRODUCTS_DIR; };
D57E78CB2A17680A00F35DFC /* MuzipApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MuzipApp.swift; sourceTree = "<group>"; };
D57E78CD2A17680A00F35DFC /* MainView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainView.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -228,6 +234,9 @@
children = (
D57E79032A17692C00F35DFC /* ReusableTemp.swift */,
D57E79172A17776A00F35DFC /* BubbleShape.swift */,
D53658C02A2490C900B484F9 /* CircleBeatAnimationView.swift */,
D53658C22A2497C100B484F9 /* bottomSearchBar.swift */,
D53658C62A24F4F800B484F9 /* WaveAnimaion.swift */,
);
path = ReusableUI;
sourceTree = "<group>";
Expand Down Expand Up @@ -363,13 +372,16 @@
buildActionMask = 2147483647;
files = (
D57E79062A17693A00F35DFC /* ViewModelTemp.swift in Sources */,
D53658C12A2490C900B484F9 /* CircleBeatAnimationView.swift in Sources */,
D57E78D52A17680B00F35DFC /* Persistence.swift in Sources */,
D57E78CE2A17680A00F35DFC /* MainView.swift in Sources */,
D53658C72A24F4F800B484F9 /* WaveAnimaion.swift in Sources */,
D57E78CC2A17680A00F35DFC /* MuzipApp.swift in Sources */,
D57E78D82A17680B00F35DFC /* Muzip.xcdatamodeld in Sources */,
D57E790C2A17695700F35DFC /* NetworkTemp.swift in Sources */,
D57E79122A1769D100F35DFC /* ViewExtension.swift in Sources */,
D57E790A2A17694E00F35DFC /* RoundedCorner.swift in Sources */,
D53658C32A2497C100B484F9 /* bottomSearchBar.swift in Sources */,
D57E79082A17694400F35DFC /* ExtensionTemp.swift in Sources */,
D57E79042A17692C00F35DFC /* ReusableTemp.swift in Sources */,
D57E79182A17776A00F35DFC /* BubbleShape.swift in Sources */,
Expand Down
2 changes: 2 additions & 0 deletions Muzip/Extensions/ImageExtension.swift
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import SwiftUI
extension Image {
enum ImageName: String {
case muzipLogo = "MuzipLogo"
case pause = "pause"
case menuIcon = "menuIcon"

}

Expand Down
15 changes: 15 additions & 0 deletions Muzip/Resources/Assets.xcassets/menuIcon.imageset/Contents.json
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
}
}
4 changes: 4 additions & 0 deletions Muzip/Resources/Assets.xcassets/menuIcon.imageset/M.svg
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 Muzip/Resources/Assets.xcassets/pause.imageset/Contents.json
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
}
}
3 changes: 3 additions & 0 deletions Muzip/Resources/Assets.xcassets/pause.imageset/􁏏.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
58 changes: 58 additions & 0 deletions Muzip/ReusableUI/CircleBeatAnimationView.swift
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
}
}
}
135 changes: 135 additions & 0 deletions Muzip/ReusableUI/WaveAnimaion.swift
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)
}
}
}
}
78 changes: 78 additions & 0 deletions Muzip/ReusableUI/bottomSearchBar.swift
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()
}
}
Loading

0 comments on commit af3542b

Please sign in to comment.