|
|
@@ -333,72 +333,76 @@ struct TestDetailView: View {
|
|
|
var body: some View {
|
|
|
ZStack {
|
|
|
if isText {
|
|
|
- // Rounded Rectangle
|
|
|
- VStack(alignment: .center){
|
|
|
-
|
|
|
-
|
|
|
- Image("applelogo").frame(minWidth: 0, maxWidth: .infinity,minHeight: 0,maxHeight: 400)
|
|
|
- .background(.green)
|
|
|
- .shadow(radius: 5)
|
|
|
- .matchedGeometryEffect(id: "circle1\(indexText)", in: shapeTransition2,isSource: isText)
|
|
|
- VStack(alignment: .leading){
|
|
|
- Text("Queezy App")
|
|
|
- .foregroundColor(Color(red: 50 / 255, green: 50 / 255, blue: 50 / 255))
|
|
|
+ ZStack(alignment: .topTrailing){
|
|
|
+ ButtonFLoatView(icon: "applelogo", text: "", isText: $isText).zIndex(500)
|
|
|
+ .padding(.top,60)
|
|
|
+ .padding(.trailing,20)
|
|
|
+ // Rounded Rectangle
|
|
|
+ VStack(alignment: .center){
|
|
|
+
|
|
|
+ Image("applelogo").frame(minWidth: 0, maxWidth: .infinity,minHeight: 0,maxHeight: 400)
|
|
|
+ .background(.green)
|
|
|
+ .shadow(radius: 5)
|
|
|
+ .matchedGeometryEffect(id: "circle1\(indexText)", in: shapeTransition1,isSource: isText)
|
|
|
+ VStack(alignment: .leading){
|
|
|
+ Text("Queezy App")
|
|
|
+ .foregroundColor(Color(red: 50 / 255, green: 50 / 255, blue: 50 / 255))
|
|
|
+ .fontWeight(.bold)
|
|
|
+ .matchedGeometryEffect(id: "circle2\(indexText)", in: shapeTransition1,isSource: isText)
|
|
|
+ Text("1888 rmb")
|
|
|
+ .foregroundColor(.gray)
|
|
|
+ .padding(.top,1)
|
|
|
+ .matchedGeometryEffect(id: "circle3\(indexText)", in: shapeTransition1,isSource: isText)
|
|
|
+ }
|
|
|
+
|
|
|
+ Text("\(indexText)")
|
|
|
.fontWeight(.bold)
|
|
|
- .matchedGeometryEffect(id: "circle2\(indexText)", in: shapeTransition3,isSource: isText)
|
|
|
- Text("1888 rmb")
|
|
|
+ .padding()
|
|
|
+ .background(Color.white)
|
|
|
+ .cornerRadius(80)
|
|
|
.foregroundColor(.gray)
|
|
|
- .padding(.top,1)
|
|
|
- .matchedGeometryEffect(id: "circle3\(indexText)", in: shapeTransition4,isSource: isText)
|
|
|
- }
|
|
|
-
|
|
|
- Text("\(indexText)")
|
|
|
- .fontWeight(.bold)
|
|
|
- .padding()
|
|
|
- .background(Color.white)
|
|
|
- .cornerRadius(80)
|
|
|
- .foregroundColor(.gray)
|
|
|
- .clipShape(Circle())
|
|
|
- .overlay(Circle().stroke(Color.gray, lineWidth: 3))
|
|
|
- .matchedGeometryEffect(id: "circleD\(indexText)", in: shapeTransitionD,isSource: isText)
|
|
|
- Text("1\(indexText)")
|
|
|
- .fontWeight(.bold)
|
|
|
- .padding()
|
|
|
- .background(Color.white)
|
|
|
- .foregroundColor(.black)
|
|
|
- .clipShape(Circle())
|
|
|
- .overlay(Circle().stroke(Color.black, lineWidth: 3))
|
|
|
- .matchedGeometryEffect(id: "circle4\(indexText)", in: shapeTransition1,isSource: isText)
|
|
|
- Spacer()
|
|
|
-
|
|
|
- }.onTapGesture {
|
|
|
- withAnimation(.easeInOut){
|
|
|
- isText.toggle()
|
|
|
- }
|
|
|
- }.zIndex(10).background(Color.white.opacity(0.4))
|
|
|
- .scaleEffect(getScaleN())
|
|
|
- .offset(x: self.offsetN.width > 0 ? self.offsetN.width :0)
|
|
|
- .gesture(DragGesture()
|
|
|
- .onChanged{ value in
|
|
|
- withAnimation(.spring()) {
|
|
|
- offsetN = value.translation
|
|
|
- if(offsetN.width > 180){
|
|
|
- isText.toggle()
|
|
|
- }else{
|
|
|
- offsetN = .zero
|
|
|
+ .clipShape(Circle())
|
|
|
+ .overlay(Circle().stroke(Color.gray, lineWidth: 3))
|
|
|
+ .matchedGeometryEffect(id: "circleD\(indexText)", in: shapeTransition1,isSource: isText)
|
|
|
+ Text("1\(indexText)")
|
|
|
+ .fontWeight(.bold)
|
|
|
+ .padding()
|
|
|
+ .background(Color.white)
|
|
|
+ .foregroundColor(.black)
|
|
|
+ .clipShape(Circle())
|
|
|
+ .overlay(Circle().stroke(Color.black, lineWidth: 3))
|
|
|
+ .matchedGeometryEffect(id: "circle4\(indexText)", in: shapeTransition1,isSource: isText)
|
|
|
+ Spacer()
|
|
|
+
|
|
|
+ }.onTapGesture {
|
|
|
+ withAnimation(.easeInOut){
|
|
|
+ isText.toggle()
|
|
|
+ }
|
|
|
+ }.zIndex(10).background(Color.white.opacity(0.4))
|
|
|
+ .scaleEffect(getScaleN())
|
|
|
+ .offset(x: self.offsetN.width > 0 ? self.offsetN.width :0)
|
|
|
+ .gesture(DragGesture()
|
|
|
+ .onChanged{ value in
|
|
|
+ withAnimation(.spring()) {
|
|
|
+ offsetN = value.translation
|
|
|
+ if(offsetN.width > 180){
|
|
|
+ isText.toggle()
|
|
|
+ }else{
|
|
|
+ offsetN = .zero
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .onEnded { value in
|
|
|
- withAnimation(.spring()) {
|
|
|
- offsetN = .zero
|
|
|
- isText = false
|
|
|
-
|
|
|
+ .onEnded { value in
|
|
|
+ withAnimation(.spring()) {
|
|
|
+ offsetN = .zero
|
|
|
+ isText = false
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- )
|
|
|
+
|
|
|
+
|
|
|
+ )
|
|
|
+ }
|
|
|
}else{
|
|
|
VStack{
|
|
|
ForEach(menuImages.indices,id:\.self){ index in
|
|
|
@@ -417,17 +421,17 @@ struct TestDetailView: View {
|
|
|
.clipShape(Circle())
|
|
|
.overlay(Circle().stroke(Color.white, lineWidth: 4))
|
|
|
.shadow(radius: 5)
|
|
|
- .matchedGeometryEffect(id: "circle1\(index)", in: shapeTransition2)
|
|
|
+ .matchedGeometryEffect(id: "circle1\(index)", in: shapeTransition1)
|
|
|
|
|
|
VStack(alignment: .leading){
|
|
|
Text("Queezy App")
|
|
|
.foregroundColor(Color(red: 50 / 255, green: 50 / 255, blue: 50 / 255))
|
|
|
.fontWeight(.bold)
|
|
|
- .matchedGeometryEffect(id: "circle3\(index)", in: shapeTransition3,isSource: !isText)
|
|
|
+ .matchedGeometryEffect(id: "circle3\(index)", in: shapeTransition1,isSource: !isText)
|
|
|
Text("1888 rmb")
|
|
|
.foregroundColor(.gray)
|
|
|
.padding(.top,1)
|
|
|
- .matchedGeometryEffect(id: "circle4\(index)", in: shapeTransition4,isSource: !isText)
|
|
|
+ .matchedGeometryEffect(id: "circle4\(index)", in: shapeTransition1,isSource: !isText)
|
|
|
|
|
|
}
|
|
|
|
|
|
@@ -441,7 +445,7 @@ struct TestDetailView: View {
|
|
|
.foregroundColor(.gray)
|
|
|
.clipShape(Circle())
|
|
|
.overlay(Circle().stroke(Color.gray, lineWidth: 3))
|
|
|
- .matchedGeometryEffect(id: "circleD\(index)", in: shapeTransitionD,isSource: !isText)
|
|
|
+ .matchedGeometryEffect(id: "circleD\(index)", in: shapeTransition1,isSource: !isText)
|
|
|
}.padding(.leading,10).padding(.top,4)
|
|
|
|
|
|
}.onTapGesture {
|
|
|
@@ -459,4 +463,44 @@ struct TestDetailView: View {
|
|
|
}
|
|
|
|
|
|
|
|
|
+
|
|
|
+struct ButtonFLoatView: View {
|
|
|
+ var icon :String
|
|
|
+ var text :String
|
|
|
+ @Binding var isText : Bool
|
|
|
+
|
|
|
+ struct CustomButtonStyle: ButtonStyle {
|
|
|
+ func makeBody(configuration: Configuration) -> some View {
|
|
|
+ configuration.label
|
|
|
+ .frame(width: 30,height: 30)
|
|
|
+ .font(.system(size: 12))
|
|
|
+ .foregroundColor(Color(.gray))
|
|
|
+ .background(Color.white)
|
|
|
+ .clipShape(Circle())
|
|
|
+ .shadow(radius: 2)
|
|
|
+ .scaleEffect(configuration.isPressed ? 1.2 : 1)
|
|
|
+ .animation(.easeInOut(duration: 0.2), value: configuration.isPressed)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var body: some View {
|
|
|
+ VStack{
|
|
|
+ Button(action: {
|
|
|
+ withAnimation(.easeInOut){
|
|
|
+ isText.toggle()
|
|
|
+ }
|
|
|
+ }){
|
|
|
+ VStack {
|
|
|
+ Image(systemName: icon)
|
|
|
+ .imageScale(.large)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .buttonStyle(CustomButtonStyle())
|
|
|
+ }
|
|
|
+ .font(.largeTitle)
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
```
|
