├── Images └── preview.gif ├── Tests └── SwiftUIAnimationObserverTests │ └── SwiftUIAnimationObserverTests.swift ├── .swiftpm └── xcode │ └── package.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ └── IDEWorkspaceChecks.plist ├── Package.swift ├── LICENSE ├── README.md ├── .gitignore └── Sources └── SwiftUIAnimationObserver └── SwiftUIAnimationObserver.swift /Images/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/globulus/swiftui-animation-observer/HEAD/Images/preview.gif -------------------------------------------------------------------------------- /Tests/SwiftUIAnimationObserverTests/SwiftUIAnimationObserverTests.swift: -------------------------------------------------------------------------------- 1 | import XCTest 2 | @testable import SwiftUIAnimationObserver 3 | 4 | final class SwiftUIAnimationObserverTests: XCTestCase { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /.swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.swiftpm/xcode/package.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Package.swift: -------------------------------------------------------------------------------- 1 | // swift-tools-version:5.5 2 | // The swift-tools-version declares the minimum version of Swift required to build this package. 3 | 4 | import PackageDescription 5 | 6 | let package = Package( 7 | name: "SwiftUIAnimationObserver", 8 | platforms: [ 9 | .iOS(.v13), .macOS(.v10_15) 10 | ], 11 | products: [ 12 | .library( 13 | name: "SwiftUIAnimationObserver", 14 | targets: ["SwiftUIAnimationObserver"]), 15 | ], 16 | dependencies: [ 17 | ], 18 | targets: [ 19 | .target( 20 | name: "SwiftUIAnimationObserver", 21 | dependencies: []), 22 | .testTarget( 23 | name: "SwiftUIAnimationObserverTests", 24 | dependencies: ["SwiftUIAnimationObserver"]), 25 | ] 26 | ) 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Gordan Glavaš 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SwiftUI Animation Observer 2 | 3 | Track SwiftUI animation progress and completion via callbacks! For an animated value (offset, opacity, etc.), get its current value as the animation progresses and then get notified when the animation is completed. 4 | 5 | ![Preview](https://github.com/globulus/swiftui-animation-observer/blob/main/Images/preview.gif?raw=true) 6 | 7 | ## Installation 8 | 9 | This component is distributed as a **Swift package**. Just add this repo's URL to XCode: 10 | 11 | ```text 12 | https://github.com/globulus/swiftui-animation-observer 13 | ``` 14 | 15 | ## How to use 16 | 17 | Add the `animationObserver` modifier to your view. Pass the **property whose value is changed by the animation** and two optional callbacks: 18 | 1. `onProgress` is called on each animation frame and reports the current value of the animated property. 19 | 1. `onComplete` is called when the animation is completed. 20 | 21 | ```swift 22 | struct AnimationObserverTest: View { 23 | @State private var offset = 0.0 24 | @State private var offsetSpan: ClosedRange = 0...1 25 | @State private var progressPercentage = 0.0 26 | @State private var isDone = false 27 | 28 | var body: some View { 29 | GeometryReader { geo in 30 | VStack { 31 | Text("Loading: \(progressPercentage)%") 32 | Rectangle() 33 | .foregroundColor(.blue) 34 | .frame(height: 50) 35 | .offset(x: offset) 36 | .animationObserver(for: offset) { progress in // HERE 37 | progressPercentage = 100 * abs(progress - offsetSpan.lowerBound) / (offsetSpan.upperBound - offsetSpan.lowerBound) 38 | } onComplete: { 39 | isDone = true 40 | } 41 | 42 | if isDone { 43 | Text("Done!") 44 | } else if progressPercentage >= 50 { 45 | Text("Woooooah, we're half way there...") 46 | } 47 | 48 | Button("Reload") { 49 | isDone = false 50 | offset = -geo.size.width 51 | offsetSpan = offset...0 52 | withAnimation(.easeIn(duration: 5)) { 53 | offset = 0 54 | } 55 | } 56 | } 57 | } 58 | } 59 | } 60 | ``` 61 | 62 | ## Recipe 63 | 64 | Check out [this recipe](https://swiftuirecipes.com/blog/swiftui-animation-observer) for in-depth description of the component and its code. Check out [SwiftUIRecipes.com](https://swiftuirecipes.com) for more **SwiftUI recipes**! 65 | 66 | ## Changelog 67 | 68 | * 1.0.0 - Initial release. 69 | 70 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Xcode 2 | # 3 | # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore 4 | 5 | ## User settings 6 | xcuserdata/ 7 | 8 | ## compatibility with Xcode 8 and earlier (ignoring not required starting Xcode 9) 9 | *.xcscmblueprint 10 | *.xccheckout 11 | 12 | ## compatibility with Xcode 3 and earlier (ignoring not required starting Xcode 4) 13 | build/ 14 | DerivedData/ 15 | *.moved-aside 16 | *.pbxuser 17 | !default.pbxuser 18 | *.mode1v3 19 | !default.mode1v3 20 | *.mode2v3 21 | !default.mode2v3 22 | *.perspectivev3 23 | !default.perspectivev3 24 | 25 | ## Obj-C/Swift specific 26 | *.hmap 27 | 28 | ## App packaging 29 | *.ipa 30 | *.dSYM.zip 31 | *.dSYM 32 | 33 | ## Playgrounds 34 | timeline.xctimeline 35 | playground.xcworkspace 36 | 37 | # Swift Package Manager 38 | # 39 | # Add this line if you want to avoid checking in source code from Swift Package Manager dependencies. 40 | # Packages/ 41 | # Package.pins 42 | # Package.resolved 43 | # *.xcodeproj 44 | # 45 | # Xcode automatically generates this directory with a .xcworkspacedata file and xcuserdata 46 | # hence it is not needed unless you have added a package configuration file to your project 47 | # .swiftpm 48 | 49 | .build/ 50 | 51 | # CocoaPods 52 | # 53 | # We recommend against adding the Pods directory to your .gitignore. However 54 | # you should judge for yourself, the pros and cons are mentioned at: 55 | # https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control 56 | # 57 | # Pods/ 58 | # 59 | # Add this line if you want to avoid checking in source code from the Xcode workspace 60 | # *.xcworkspace 61 | 62 | # Carthage 63 | # 64 | # Add this line if you want to avoid checking in source code from Carthage dependencies. 65 | # Carthage/Checkouts 66 | 67 | Carthage/Build/ 68 | 69 | # Accio dependency management 70 | Dependencies/ 71 | .accio/ 72 | 73 | # fastlane 74 | # 75 | # It is recommended to not store the screenshots in the git repo. 76 | # Instead, use fastlane to re-generate the screenshots whenever they are needed. 77 | # For more information about the recommended setup visit: 78 | # https://docs.fastlane.tools/best-practices/source-control/#source-control 79 | 80 | fastlane/report.xml 81 | fastlane/Preview.html 82 | fastlane/screenshots/**/*.png 83 | fastlane/test_output 84 | 85 | # Code Injection 86 | # 87 | # After new code Injection tools there's a generated folder /iOSInjectionProject 88 | # https://github.com/johnno1962/injectionforxcode 89 | 90 | iOSInjectionProject/ 91 | -------------------------------------------------------------------------------- /Sources/SwiftUIAnimationObserver/SwiftUIAnimationObserver.swift: -------------------------------------------------------------------------------- 1 | import SwiftUI 2 | 3 | public struct AnimationObserverModifier: AnimatableModifier { 4 | private let observedValue: Value 5 | private let onChange: ((Value) -> Void)? 6 | private let onComplete: (() -> Void)? 7 | 8 | public var animatableData: Value { 9 | didSet { 10 | notifyProgress() 11 | } 12 | } 13 | 14 | public init(for observedValue: Value, 15 | onChange: ((Value) -> Void)?, 16 | onComplete: (() -> Void)?) { 17 | self.observedValue = observedValue 18 | self.onChange = onChange 19 | self.onComplete = onComplete 20 | animatableData = observedValue 21 | } 22 | 23 | public func body(content: Content) -> some View { 24 | content 25 | } 26 | 27 | private func notifyProgress() { 28 | DispatchQueue.main.async { 29 | onChange?(animatableData) 30 | if animatableData == observedValue { 31 | onComplete?() 32 | } 33 | } 34 | } 35 | } 36 | 37 | public extension View { 38 | func animationObserver(for value: Value, 39 | onChange: ((Value) -> Void)? = nil, 40 | onComplete: (() -> Void)? = nil) -> some View { 41 | self.modifier(AnimationObserverModifier(for: value, 42 | onChange: onChange, 43 | onComplete: onComplete)) 44 | } 45 | } 46 | 47 | struct AnimationObserverTest: View { 48 | @State private var offset = 0.0 49 | @State private var offsetSpan: ClosedRange = 0...1 50 | @State private var progressPercentage = 0.0 51 | @State private var isDone = false 52 | 53 | var body: some View { 54 | GeometryReader { geo in 55 | VStack { 56 | Text("Loading: \(progressPercentage)%") 57 | Rectangle() 58 | .foregroundColor(.blue) 59 | .frame(height: 50) 60 | .offset(x: offset) 61 | .animationObserver(for: offset) { progress in 62 | progressPercentage = 100 * abs(progress - offsetSpan.lowerBound) / (offsetSpan.upperBound - offsetSpan.lowerBound) 63 | } onComplete: { 64 | isDone = true 65 | } 66 | 67 | if isDone { 68 | Text("Done!") 69 | } else if progressPercentage >= 50 { 70 | Text("Woooooah, we're half way there...") 71 | } 72 | 73 | Button("Reload") { 74 | isDone = false 75 | offset = -geo.size.width 76 | offsetSpan = offset...0 77 | withAnimation(.easeIn(duration: 5)) { 78 | offset = 0 79 | } 80 | } 81 | } 82 | } 83 | } 84 | } 85 | 86 | struct AnimationProgressTest_Previews: PreviewProvider { 87 | static var previews: some View { 88 | AnimationObserverTest() 89 | } 90 | } 91 | 92 | 93 | --------------------------------------------------------------------------------