121 lines
3.3 KiB
Swift
121 lines
3.3 KiB
Swift
//
|
|
// CircularImageFrame.swift
|
|
// secant-testnet
|
|
//
|
|
// Created by Adam Stener on 9/29/21.
|
|
//
|
|
|
|
import SwiftUI
|
|
|
|
struct CircularFrame: View {
|
|
var body: some View {
|
|
GeometryReader { proxy in
|
|
let lineWidth = proxy.size.width * 0.07
|
|
|
|
Circle()
|
|
.stroke(lineWidth: lineWidth)
|
|
.foregroundColor(Asset.Colors.Onboarding.circularFrame.color)
|
|
// Add two points to the frame to properly mask edges
|
|
.frame(
|
|
width: proxy.size.width - lineWidth + 2,
|
|
height: proxy.size.height - lineWidth + 2,
|
|
alignment: .center
|
|
)
|
|
// Update the offset to account for the 2 extra points
|
|
.offset(x: lineWidth / 2 - 1, y: lineWidth / 2 - 1)
|
|
.shadow(radius: 10)
|
|
}
|
|
}
|
|
}
|
|
|
|
struct OnboardingCircularFrame: View {
|
|
@Binding var index: Int
|
|
let size: CGFloat
|
|
|
|
var body: some View {
|
|
ZStack {
|
|
CircularFrame()
|
|
.frame(width: size, height: size)
|
|
|
|
switch index {
|
|
case 0:
|
|
Asset.Assets.Icons.shield.image
|
|
.onboardingBadge(parentSize: size)
|
|
case 1:
|
|
Asset.Assets.Icons.profile.image
|
|
.onboardingBadge(parentSize: size)
|
|
case 2:
|
|
Asset.Assets.Icons.list.image
|
|
.onboardingBadge(parentSize: size)
|
|
default:
|
|
EmptyView()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
extension Image {
|
|
func onboardingBadge(parentSize: CGFloat) -> some View {
|
|
self
|
|
.resizable()
|
|
.frame(width: parentSize / 2, height: parentSize / 2)
|
|
.offset(y: parentSize * 0.47)
|
|
.zIndex(100)
|
|
}
|
|
}
|
|
|
|
struct CircularFramePreviewHelper: View {
|
|
@State var index = 0
|
|
private let size: CGFloat = 300
|
|
|
|
var body: some View {
|
|
VStack {
|
|
HStack(spacing: 25) {
|
|
Button("+") {
|
|
guard index < 2 else { return }
|
|
index += 1
|
|
}
|
|
|
|
Button("-") {
|
|
guard index != 0 else { return }
|
|
index -= 1
|
|
}
|
|
|
|
Text("\(index)")
|
|
}
|
|
|
|
GeometryReader { proxy in
|
|
VStack {
|
|
Spacer()
|
|
|
|
HStack {
|
|
Spacer()
|
|
|
|
OnboardingCircularFrame(index: $index, size: proxy.size.width / 2)
|
|
.animation(.easeInOut(duration: 2), value: index)
|
|
|
|
Spacer()
|
|
}
|
|
|
|
Spacer()
|
|
}
|
|
}
|
|
|
|
CircularFrame()
|
|
.backgroundImage(Asset.Assets.Backgrounds.callout1.image)
|
|
.frame(width: size, height: size)
|
|
.badgeIcon(.shield)
|
|
|
|
Spacer()
|
|
}
|
|
}
|
|
}
|
|
|
|
struct CircularFrame_Previews: PreviewProvider {
|
|
static var previews: some View {
|
|
CircularFramePreviewHelper()
|
|
.preferredColorScheme(.light)
|
|
.previewLayout(.device)
|
|
}
|
|
}
|