2021-10-29 05:50:19 -07:00
|
|
|
//
|
|
|
|
// CircularFrameBackground.swift
|
|
|
|
// secant-testnet
|
|
|
|
//
|
|
|
|
// Created by Adam Stener on 10/29/21.
|
|
|
|
//
|
|
|
|
|
|
|
|
import SwiftUI
|
2021-11-09 03:59:03 -08:00
|
|
|
import ComposableArchitecture
|
2021-10-29 05:50:19 -07:00
|
|
|
|
2021-11-09 03:59:03 -08:00
|
|
|
struct CircularFrameBackgroundImages: Animatable, ViewModifier {
|
|
|
|
struct ViewState: Equatable {
|
|
|
|
let index: Int
|
|
|
|
let images: [Image]
|
|
|
|
}
|
|
|
|
|
|
|
|
let store: Store<ViewState, Never>
|
|
|
|
|
|
|
|
func body(content: Content) -> some View {
|
|
|
|
WithViewStore(self.store) { viewStore in
|
|
|
|
ZStack {
|
|
|
|
ForEach(0..<viewStore.images.count - 1) { imageIndex in
|
|
|
|
viewStore.images[imageIndex]
|
|
|
|
.resizable()
|
|
|
|
.aspectRatio(1.3, contentMode: .fill)
|
|
|
|
.opacity(imageIndex == viewStore.index ? 1 : 0)
|
|
|
|
.offset(x: imageIndex <= viewStore.index ? 0 : 25)
|
|
|
|
.mask(Circle())
|
|
|
|
}
|
|
|
|
|
|
|
|
content
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
struct CircularFrameBackgroundImage: Animatable, ViewModifier {
|
2021-10-29 05:50:19 -07:00
|
|
|
let image: Image
|
2021-11-09 03:59:03 -08:00
|
|
|
|
2021-10-29 05:50:19 -07:00
|
|
|
func body(content: Content) -> some View {
|
|
|
|
ZStack {
|
|
|
|
image
|
|
|
|
.resizable()
|
|
|
|
.aspectRatio(1.3, contentMode: .fill)
|
|
|
|
.mask(Circle())
|
|
|
|
|
|
|
|
content
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
extension CircularFrame {
|
|
|
|
func backgroundImage(_ image: Image) -> some View {
|
|
|
|
modifier(CircularFrameBackgroundImage(image: image))
|
|
|
|
}
|
2021-11-09 03:59:03 -08:00
|
|
|
|
|
|
|
func backgroundImages(_ store: Store<CircularFrameBackgroundImages.ViewState, Never>) -> some View {
|
|
|
|
modifier(CircularFrameBackgroundImages(store: store))
|
|
|
|
}
|
2021-10-29 05:50:19 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
struct CircularFrameBackground_Previews: PreviewProvider {
|
|
|
|
static let size: CGFloat = 300
|
|
|
|
static var previews: some View {
|
|
|
|
Group {
|
|
|
|
CircularFrame()
|
|
|
|
.backgroundImage(Asset.Assets.Backgrounds.callout0.image)
|
|
|
|
.frame(width: 300, height: 300)
|
|
|
|
|
|
|
|
CircularFrame()
|
|
|
|
.backgroundImage(Asset.Assets.Backgrounds.callout1.image)
|
|
|
|
.frame(width: 300, height: 300)
|
|
|
|
|
|
|
|
CircularFrame()
|
|
|
|
.backgroundImage(Asset.Assets.Backgrounds.callout2.image)
|
|
|
|
.frame(width: 300, height: 300)
|
|
|
|
|
|
|
|
CircularFrame()
|
|
|
|
.backgroundImage(Asset.Assets.Backgrounds.callout3.image)
|
|
|
|
.frame(width: 300, height: 300)
|
|
|
|
}
|
|
|
|
.preferredColorScheme(.light)
|
|
|
|
.previewLayout(.fixed(width: size + 50, height: size + 50))
|
|
|
|
}
|
|
|
|
}
|