Created
December 29, 2022 17:57
-
-
Save mattyoung/36362ce42aa8e49081865e3848fc02be to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// SFSymbolDelayStart.swift | |
// VariableSFSymbolAnimation | |
// | |
// Created by Matthew Young on 12/27/22. | |
// | |
import SwiftUI | |
struct AnimatableVariableValueModifier: Animatable, ViewModifier { | |
let systemName: String | |
var animatableData: Double | |
init(systemName: String, variableValue: Double) { | |
self.systemName = systemName | |
animatableData = variableValue | |
} | |
func body(content: Content) -> some View { | |
Image(systemName: systemName, variableValue: animatableData) | |
.resizable() | |
.scaledToFit() | |
} | |
} | |
extension View { | |
func animatableVariableValue(systemName: String, variableValue: Double) -> some View { | |
modifier(AnimatableVariableValueModifier(systemName: systemName, variableValue: variableValue)) | |
} | |
} | |
struct SFSymbolImage: View { | |
let delay: TimeInterval | |
let systemName: String | |
let autoreverses: Bool | |
@Environment(\.colorScheme) var colorScheme | |
@State private var progress = 0.0 | |
init(delay: TimeInterval = 0, systemName: String, autoreverses: Bool = true) { | |
self.delay = delay | |
self.systemName = systemName | |
self.autoreverses = autoreverses | |
} | |
var body: some View { | |
Color.clear | |
.animatableVariableValue(systemName: systemName, variableValue: progress) | |
.animation(.linear(duration: 1).repeatForever(autoreverses: autoreverses), value: progress) | |
.onAppear { | |
if delay == 0 { | |
progress = 1 | |
} else { | |
DispatchQueue.main.asyncAfter(deadline: .now() + delay) { | |
progress = 1 | |
} | |
} | |
} | |
} | |
} | |
struct SFSymbolImageTrulyDemo: View { | |
var body: some View { | |
VStack { | |
HStack { | |
let autoreverses = true | |
SFSymbolImage(systemName: "timelapse", autoreverses: autoreverses) | |
.delayAppearance(bySeconds: 0) | |
SFSymbolImage(delay: 1, systemName: "timelapse", autoreverses: autoreverses) | |
.delayAppearance(bySeconds: 1) | |
SFSymbolImage(delay: 2, systemName: "timelapse", autoreverses: autoreverses) | |
.delayAppearance(bySeconds: 2) | |
SFSymbolImage(delay: 3, systemName: "timelapse", autoreverses: autoreverses) | |
.delayAppearance(bySeconds: 3) | |
SFSymbolImage(delay: 4, systemName: "timelapse", autoreverses: autoreverses) | |
.delayAppearance(bySeconds: 4) | |
} | |
HStack { | |
let autoreverses = true | |
SFSymbolImage(systemName: "timelapse", autoreverses: autoreverses) | |
.transaction { | |
$0.disablesAnimations = false | |
} | |
.delayAppearance(bySeconds: 0) | |
SFSymbolImage(delay: 1, systemName: "timelapse", autoreverses: autoreverses) | |
.transaction { | |
$0.disablesAnimations = false | |
} | |
.delayAppearance(bySeconds: 1) | |
SFSymbolImage(delay: 2, systemName: "timelapse", autoreverses: autoreverses) | |
.transaction { | |
$0.disablesAnimations = false | |
} | |
.delayAppearance(bySeconds: 2) | |
SFSymbolImage(delay: 3, systemName: "timelapse", autoreverses: autoreverses) | |
.transaction { | |
$0.disablesAnimations = false | |
} | |
.delayAppearance(bySeconds: 3) | |
SFSymbolImage(delay: 4, systemName: "timelapse", autoreverses: autoreverses) | |
.transaction { | |
$0.disablesAnimations = false | |
} | |
.delayAppearance(bySeconds: 4) | |
} | |
.transaction { | |
$0.disablesAnimations = true | |
} | |
} | |
} | |
} | |
struct SFSymbolDelayStart_Previews: PreviewProvider { | |
static var previews: some View { | |
SFSymbolImageTrulyDemo() | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment