Floating Animation Action Button 만들기

안녕하세요. 
블로그 주인장 후니입니다.
저는 사실 SwiftUI를 잘 알지를 못합니다. 
제가 여기에 기록하는 소스나 이런것은 단지 제가 하루 또는 며칠에 한번씩 기록하기 위한 것이니 참고하여주시기바랍니다. 

Action Button

화면 기록 2020-05-03 오후 10.01.08.mov

0.51MB

//
//  FloatingMenu.swift
//  PrjActionButton
//
//  Created by 이정훈 on 2020/05/01.
//  Copyright © 2020 이정훈. All rights reserved.
//

import SwiftUI

struct FloatingMenu: View {
    
     @State var showMenuItem1 = false
     @State var showMenuItem2 = false
     @State var showMenuItem3 = false
    
    var body: some View {
        VStack {
            Spacer()
            if showMenuItem1 {
                MenuItem(icon:"camera.fill")
            }
            if showMenuItem2 {
                MenuItem(icon:"photo.on.rectangle")
            }
            if showMenuItem3 {
                MenuItem(icon:"square.and.arrow.up.fill")
            }
            
            
            Button(action: {
                self.showMenu()
            }) {
                Image(systemName: "plus.circle.fill")
                    .resizable()
                    .frame(width:80,height:80)
                    .foregroundColor(Color(red:153/255, green:102/255, blue:255/255 ))
                    .shadow(color: .gray, radius: 0.3, x: 1, y: 1)
            }
        }
    }
    
    func showMenu(){
        withAnimation{
                showMenuItem3.toggle()
        }
        
        withAnimation{
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1){
                    self.showMenuItem2.toggle()
                }

        }
        withAnimation{
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.2){
            self.showMenuItem1.toggle()
        }
        
            
        }
        
    }
}

struct FloatingMenu_Previews: PreviewProvider {
    static var previews: some View {
        FloatingMenu()
    }
}

struct MenuItem: View {
    
    var icon: String // icon을 받아서 처리하도록 변경
    var body: some View {
        ZStack{
            Circle()
                .foregroundColor(Color(red:153/255, green:102/255, blue:255/255 ))
                .frame(width:55,height:55)
            Image(systemName: icon)
                .imageScale(.large)
                .foregroundColor(.white)
        }
        .shadow(color: .gray, radius: 0.3, x: 1, y: 1)
        .transition(.move(edge: .trailing))
    }
}

Floating Menu에 들어가는 아이콘은 SF Symbols를 사용했습니다.

위의 Swift를 만들고 나면 

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            Rectangle()
                .foregroundColor(.clear)
                .frame(maxWidth:.infinity, maxHeight: .infinity)
            
            FloatingMenu()
            .padding()
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ContentView에서 ZStack를 이용해서 배치만 시켜주시면 됩니다.

저는 이 내용을 youtube에서 따라가면서 했답니다. 
링크주소는 아래와 같습니다. ^^