How to access current value of #Binding during .animation() - swiftui

Question

How do I access the current value of this animatable property scaleAmount?
struct ContentView: View {
#State private var scaleAmount: CGFloat = 1
var body: some View {
VStack {
Stepper("Scale amount", value: $scaleAmount.animation(), in: 1...5)
Circle()
.fill(Color.red)
.frame(width: 50, height: 50)
.scaleEffect(scaleAmount)
.onChange(of: scaleAmount) { value in
print(value)
}
}
}
}
Output:
2.0
3.0
4.0
5.0
These are the final values of the animatable property - not the interpolated values used for the animation. Those are what I need.
Is it possible to do this? I have also tried replacing the .onChange block to
.onChange(of: $scaleAmount.animation()) { value in
print(value)
}
But the compiler says that the Binding returned by the .animation() call must conform to Equatable.
I have also tried factoring out the Circle view into a custom view and only giving it a CGFloat to work with, and the animation happens. But the view drawing the circle has no binding in it. This gives the same output as the first code snippet.
struct ContentView: View {
#State private var scaleAmount: CGFloat = 1
var body: some View {
VStack {
Stepper("Scale amount", value: $scaleAmount.animation(), in: 1...5)
MyCircle(scaleAmount: scaleAmount)
}
}
}
struct MyCircle: View {
var scaleAmount: CGFloat
var body: some View {
print(scaleAmount)
return Circle()
.fill(Color.red)
.frame(width: 50, height: 50)
.scaleEffect(scaleAmount)
}
}
So, the question again: Is it possible to get the current value of scaleAmount property as it is being animated?

Answer 1

//
// Created by Eric Lightfoot on 2021-06-24.
//
import SwiftUI
/// Use .onBody(observedValue:onBody:) by passing an
/// animatable property along with a closure to execute
/// whenever that property is changed throughout the
/// animation
/// ---
// struct ContentView: View {
// #State private var scaleAmount: CGFloat = 1
// #State var scaleText: String = "1.000"
//
// var body: some View {
// VStack {
// Stepper("Scale amount", value: $scaleAmount.animation(), in: 1...5)
// ZStack {
// Circle()
// .fill(Color.red)
// .frame(width: 50, height: 50)
// Text(scaleText)
// .onBody(for: scaleAmount, onBody: { scaleText = "\($0)" })
// }
// .scaleEffect(scaleAmount)
// }
// }
// }
/// ---
struct AnimationProgressObserverModifier<Value>: AnimatableModifier where Value: VectorArithmetic {
/// Some experimenting led to observing the behaviour
/// that wrapping the observedValue with animatableData
/// (to conform to the protocol) caused this property
/// to be set continuously during the animation, instead
/// of only at the end
var animatableData: Value {
get {
observedValue
}
set {
observedValue = newValue
runCallbacks()
}
}
/// The animatable property to be observed
/// passed in at init
private var observedValue: Value
/// The block to execute on each animation progress
/// update
private var onBody: (Value) -> Void
init (observedValue: Value, onBody: #escaping (Value) -> Void) {
self.onBody = onBody
self.observedValue = observedValue
}
/// Run the onBody block provided at init
/// specifically passing animatable data,
/// NOT observedValue
private func runCallbacks () {
DispatchQueue.main.async {
onBody(animatableData)
}
}
func body (content: Content) -> some View {
/// No modification to view content
content
}
}
extension View {
/// Convenience method on View
func onBody<Value: VectorArithmetic> (for value: Value, onBody: #escaping (Value) -> Void)
-> ModifiedContent<Self, AnimationProgressObserverModifier<Value>> {
modifier(AnimationProgressObserverModifier(observedValue: value, onBody: onBody))
}
}