{"id":613,"date":"2020-08-13T23:16:54","date_gmt":"2020-08-13T15:16:54","guid":{"rendered":"http:\/\/123.57.164.21\/?p=613"},"modified":"2020-08-14T16:46:00","modified_gmt":"2020-08-14T08:46:00","slug":"swiftui%e5%8a%a8%e7%94%bb-geometryeffect","status":"publish","type":"post","link":"https:\/\/92it.top\/?p=613","title":{"rendered":"SwiftUI\u52a8\u753b GeometryEffect"},"content":{"rendered":"\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import SwiftUI\n\nstruct BusinessCardView: View {\n    @State private var  flipped = false\n    @State private var  animate3d = false\n    var body: some View {\n        VStack{\n            Spacer()\n            ZStack{\n                FrontCard().opacity(flipped ? 0.0:1.0)\n                BackCard().opacity(flipped ? 1.0:0.0)\n            }\n            .modifier(FlipEffect(flipped: $flipped, axis: (x:0,y:1), angle: animate3d ? 180:0))\n            .onTapGesture {\n                withAnimation(Animation.linear(duration: 0.8)) {\n                    self.animate3d.toggle()\n                }\n            }\n            Spacer()\n        }.padding()\n    }\n}\n\nstruct FlipEffect: GeometryEffect {\n    @Binding var flipped: Bool\n    let axis: (x:CGFloat,y:CGFloat)\n    var angle: Double\n    \n    var animatableData: Double {\n        get {\n            angle\n        }\n        set {\n            angle = newValue\n        }\n    }\n    func effectValue(size: CGSize) -> ProjectionTransform {\n        DispatchQueue.main.async {\n            self.flipped = self.angle >= 90 &amp;&amp; self.angle &lt; 270\n        }\n        let tweakAngle = flipped ? -180 + angle :angle\n        let a = CGFloat(Angle(degrees: tweakAngle).radians)\n        \n        var tranform3d = CATransform3DIdentity\n        tranform3d.m34 = -1\/max(size.width, size.height)\n        tranform3d = CATransform3DRotate(tranform3d,a,axis.x,axis.y,0)\n        tranform3d = CATransform3DTranslate(tranform3d, -size.width\/2.0, -size.height\/2.0, 0)\n        let affineTransform = ProjectionTransform(CGAffineTransform(translationX: size.width\/2.0, y: size.height\/2.0))\n        return ProjectionTransform(tranform3d).concatenating(affineTransform)\n    }\n    \n}\n\nstruct BackCard: View {\n    var body: some View {\n        HStack{\n            VStack{\n                VStack(alignment: .leading){\n                    HStack{\n                        Image(systemName: \"person.circle\").foregroundColor(.white).font(.title)\n                        Text(\"DevTechie Interactive\")\n                            .font(.title)\n                            .foregroundColor(.white)\n                    }\n                    HStack{\n                        Image(systemName: \"phone.circle\").foregroundColor(.white).font(.subheadline)\n                        Text(\"1234-1224-3234\")\n                            .font(.subheadline)\n                            .foregroundColor(.white)\n                    }\n                    HStack{\n                        Image(systemName: \"mappin.circle\").foregroundColor(.white).font(.subheadline)\n                        Text(\"United States\")\n                            .font(.subheadline)\n                            .foregroundColor(.white)\n                    }\n                }\n            }.background(Capsule().frame(height:200).frame(minWidth:500).offset(x:-10))\n            \n            VStack{\n                CircularImage(img: \"bg1\")\n            }.padding(.trailing,20)\n        }.frame(width:400,height: 200)\n            .background(Color.orange)\n        .cornerRadius(20)\n        .shadow(radius: 10)\n        \n    }\n    \n}\n\n\n\n\nstruct FrontCard: View {\n    var body: some View {\n        VStack{\n            Spacer()\n            HStack{\n                CircularImage(img: \"bg1\")\n                VStack{\n                    Text(\"DevTechie Interactive\")\n                        .font(.title)\n                        .foregroundColor(.white)\n                    HStack {\n                        Image(systemName: \"envelope\")\n                            .foregroundColor(.white)\n                        Text(\"DevTechie@Interactive.com\")\n                            .font(.subheadline)\n                            .foregroundColor(.white)\n                    }\n                }.padding()\n                    .background(Capsule().frame(width:400).offset(x:50))\n            }\n            Spacer()\n            Text(\"www.DevTechie.com\")\n                .foregroundColor(.white)\n                .frame(maxWidth: .infinity)\n                .background(Color.black)\n            }.frame(width:400,height: 200)\n            .background(Color.orange)\n        .cornerRadius(20)\n        .shadow(radius: 10)\n    }\n}\n\nstruct CircularImage: View {\n    var img:String\n    var body: some View {\n        Image(img)\n        .resizable()\n            .frame(width: 100, height: 100)\n        .clipShape(Circle())\n            .overlay(Circle().stroke(Color.white, lineWidth: 3))\n        .shadow(radius: 9)\n    }\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/613"}],"collection":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=613"}],"version-history":[{"count":2,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/613\/revisions"}],"predecessor-version":[{"id":615,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/613\/revisions\/615"}],"wp:attachment":[{"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}