Skip to content

Instantly share code, notes, and snippets.

@CodeSlicing
Created September 18, 2021 11:16
Show Gist options
  • Save CodeSlicing/382501c5373a3e7e2325775317f51157 to your computer and use it in GitHub Desktop.
Save CodeSlicing/382501c5373a3e7e2325775317f51157 to your computer and use it in GitHub Desktop.
Source code for CodeSlicing episode on advanced activity indicators - modifier extraction
//
// CircularActivityIndicatorAdvancedDemo.swift
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
// of the Software, and to permit persons to whom the Software is furnished to do so,
// subject to the following conditions:
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
// PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
// AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// Copyright © 2021 Adam Fordyce. All rights reserved.
//
import PureSwiftUI
struct CircularActivityIndicatorAdvancedDemo: View {
var body: some View {
GeometryReader { (geo: GeometryProxy) in
Capsule()
.fillColor(.black)
.frame(geo.sizeScaled(0.15, 0.3))
.greedyFrame()
.renderAsActivityIndicator(numSegments: 8, offset: geo.heightScaled(0.35), duration: 1, fadeFactor: 0.8, maintainOrientation: false)
}
}
}
private struct ActivityIndicatorModifier: ViewModifier {
private let numSegments: Int
private let offset: CGFloat
private let duration: Double
private let fadeFactor: Double
private let maintainOrientation: Bool
private let rotationPerSegment: Angle
private let delayPerSegment: Double
@State private var animating = false
init(numSegments: Int, offset: CGFloat, duration: Double, fadeFactor: Double = 1, maintainOrientation: Bool = false) {
self.numSegments = numSegments
self.offset = offset
self.duration = duration
self.fadeFactor = fadeFactor
self.maintainOrientation = maintainOrientation
let fractionPerSegment = 1 / numSegments.asDouble
self.rotationPerSegment = .cycles(fractionPerSegment)
self.delayPerSegment = duration * fractionPerSegment
}
func body(content: Content) -> some View {
ZStack {
ForEach(0..<numSegments) { index in
let rotation = rotationPerSegment * index
let delay = delayPerSegment * index.asDouble
content
.rotateIf(maintainOrientation, -rotation)
.yOffset(-offset)
.rotate(rotation)
.opacityIfNot(animating, 0)
.animation(Animation.linear(duration: 0.001).delay(delay))
.modifier(OpacityFadingModifier(fadeFactor: fadeFactor, animating: animating))
.animation(Animation.linear(duration: duration).repeatForever(autoreverses: false).delay(delay))
}
}
.onAppear {
animating = true
}
}
}
private extension View {
func renderAsActivityIndicator(numSegments: Int, offset: CGFloat, duration: Double, fadeFactor: Double = 1, maintainOrientation: Bool = false) -> some View {
modifier(ActivityIndicatorModifier(numSegments: numSegments, offset: offset, duration: duration, fadeFactor: fadeFactor, maintainOrientation: maintainOrientation))
}
}
private struct OpacityFadingModifier: AnimatableModifier {
private let fadeFactor: Double
var animatableData: Double
init(fadeFactor: Double = 1, animating: Bool) {
self.fadeFactor = fadeFactor
animatableData = animating ? 1 : 0
}
private var animatedOpacity: Double {
(fadeFactor - animatableData) / fadeFactor
}
func body(content: Content) -> some View {
content
.opacity(animatedOpacity)
.animation(nil)
}
}
struct CircularActivityIndicatorAdvancedDemo_Previews: PreviewProvider {
struct CircularActivityIndicatorAdvancedDemo_Harness: View {
var body: some View {
CircularActivityIndicatorAdvancedDemo()
.frame(300)
}
}
static var previews: some View {
CircularActivityIndicatorAdvancedDemo_Harness()
.previewDevice(.iPhone_12_Pro_Max)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment