Merge pull request #363 from Esri/Caleb/Fix-Animate3DGraphicAnimation

[Fix] `Animate 3D graphic` animations

Author: CalebRas

Shared/Samples/Animate 3D graphic/Animate3DGraphicView.Model.swift

@@ -128,8 +128,15 @@ extension Animate3DGraphicView {
         @Published private(set) var cameraPropertyTexts: [CameraProperty: String] = [:]
 
         init() {
-            // Set up the mission and the graphics.
+            // Set up the mission, graphics, and animation.
             updateMission()
+            
+            let displayLink = CADisplayLink(target: self, selector: #selector(updatePositions))
+            animation.setup(displayLink: displayLink)
+        }
+        
+        deinit {
+            Task { await animation.displayLink?.invalidate() }
         }
 
         // MARK: Methods
@@ -155,24 +162,6 @@ extension Animate3DGraphicView {
             }
         }
 
-        /// Starts a new animation by creating a timer used to move the graphics.
-        func startAnimation() {
-            // Stop any previous on going animation.
-            animation.stop()
-            animation.isPlaying = true
-            
-            // Create a new timer to update the graphics' position each iteration.
-            let interval = 1 / Double(animation.speed)
-            animation.timer = Timer.scheduledTimer(
-                timeInterval: interval,
-                target: self,
-                selector: #selector(updatePositions),
-                userInfo: nil,
-                repeats: true
-            )
-            RunLoop.current.add(animation.timer!, forMode: .common)
-        }
-        
         /// Updates the text associated with a given camera controller property.
         /// - Parameters:
         ///   - property: The camera controller property associated with the text to update.
@@ -223,14 +212,18 @@ extension Animate3DGraphicView {
 
     /// A struct containing data for an animation.
     struct Animation {
-        /// The timer for the animation used to loop through the animation frames.
-        var timer: Timer?
+        /// The timer used to loop through the animation frames.
+        private(set) var displayLink: CADisplayLink?
 
-        /// The speed of the animation used to set the timer's time interval.
-        var speed = 50.0
+        /// The speed of the animation.
+        var speed = AnimationSpeed.medium
 
-        /// A Boolean that indicates whether the animation is currently playing.
-        var isPlaying = false
+        /// A Boolean value indicating whether the animation is currently playing.
+        var isPlaying = false {
+            didSet {
+                displayLink?.isPaused = !isPlaying
+            }
+        }
 
         /// The current frame of the animation.
         var currentFrame: Frame {
@@ -255,26 +248,31 @@ extension Animate3DGraphicView {
         /// The index of the current frame in the frames list.
         private var currentFrameIndex = 0
 
-        /// Stops the animation by invalidating the timer.
-        mutating func stop() {
-            timer?.invalidate()
-            isPlaying = false
+        /// Sets up the animation using a given display link.
+        /// - Parameter displayLink: The display link used to run the animation.
+        mutating func setup(displayLink: CADisplayLink) {
+            // Add the display link to main thread common mode run loop,
+            // so it is not effected by UI events.
+            displayLink.add(to: .main, forMode: .common)
+            displayLink.preferredFramesPerSecond = 60
+            self.displayLink = displayLink
         }
 
         /// Resets the animation to the beginning.
         mutating func reset() {
-            stop()
+            isPlaying = false
             currentFrameIndex = 0
         }
 
-        /// Increments the animation to the next frame.
+        /// Increments the animation to the next frame based on the speed.
         mutating func nextFrame() {
-            if currentFrameIndex >= framesCount - 1 {
+            // Increment the frame index using the current speed.
+            let nextFrameIndex = currentFrameIndex + speed.rawValue
+            if frames.indices.contains(nextFrameIndex) {
+                currentFrameIndex = nextFrameIndex
+            } else {
                 // Reset the animation when it has reached the end.
                 reset()
-            } else {
-                // Move the index to point to the next frame.
-                currentFrameIndex += 1
             }
         }
 
@@ -359,6 +357,13 @@ extension Animate3DGraphicView {
             }
         }
     }
+    
+    /// An enumeration representing the speed of the animation.
+    enum AnimationSpeed: Int, CaseIterable {
+        case slow = 1
+        case medium = 2
+        case fast = 4
+    }
 }
 
 private extension FormatStyle where Self == FloatingPointFormatStyle<Double> {

Shared/Samples/Animate 3D graphic/Animate3DGraphicView.swift

@@ -42,6 +42,7 @@ struct Animate3DGraphicView: View {
                         StatRow("Roll", value: model.animation.currentFrame.roll.formatted(.angle))
                     }
                     .frame(width: 170, height: 100)
+                    .padding([.leading, .trailing])
                     .background(.ultraThinMaterial)
                     .cornerRadius(10)
                     .shadow(radius: 3)
@@ -59,7 +60,9 @@ struct Animate3DGraphicView: View {
                         .attributionBarHidden(true)
                         .onSingleTapGesture { _, _ in
                             // Show/hide full map on tap.
-                            isShowingFullMap.toggle()
+                            withAnimation(.default.speed(2)) {
+                                isShowingFullMap.toggle()
+                            }
                         }
                         .frame(width: isShowingFullMap ? nil : 100, height: isShowingFullMap ? nil : 100)
                         .cornerRadius(10)
@@ -79,7 +82,7 @@ struct Animate3DGraphicView: View {
 
                 /// The play/pause button for the animation.
                 Button {
-                    model.animation.isPlaying ? model.animation.stop() : model.startAnimation()
+                    model.animation.isPlaying.toggle()
                 } label: {
                     Image(systemName: model.animation.isPlaying ? "pause.fill" : "play.fill")
                 }
@@ -93,15 +96,18 @@ struct Animate3DGraphicView: View {
         .task {
             await model.monitorCameraController()
         }
-        .onDisappear {
-            model.animation.stop()
-        }
     }
 
     /// The list containing the mission settings.
     private var missionSettings: some View {
         List {
             Section("Mission") {
+                VStack {
+                    StatRow("Progress", value: model.animation.progress.formatted(.rounded))
+                    ProgressView(value: model.animation.progress)
+                }
+                .padding(.vertical)
+                
                 Picker("Mission Selection", selection: $model.currentMission) {
                     ForEach(Mission.allCases, id: \.self) { mission in
                         Text(mission.label)
@@ -111,22 +117,14 @@ struct Animate3DGraphicView: View {
                 .labelsHidden()
             }
 
-            Section {
-                VStack {
-                    StatRow("Animation Speed", value: model.animation.speed.formatted())
-                    Slider(value: $model.animation.speed, in: 1...200, step: 1)
-                        .onChange(of: model.animation.speed) { _ in
-                            if model.animation.isPlaying {
-                                model.startAnimation()
-                            }
-                        }
-                        .padding(.horizontal)
-                }
-                VStack {
-                    StatRow("Mission Progress", value: model.animation.progress.formatted(.rounded))
-                    ProgressView(value: model.animation.progress)
-                        .padding()
+            Section("Speed") {
+                Picker("Animation Speed", selection: $model.animation.speed) {
+                    ForEach(AnimationSpeed.allCases, id: \.self) { speed in
+                        Text(String(describing: speed).capitalized)
+                    }
                 }
+                .pickerStyle(.inline)
+                .labelsHidden()
             }
         }
     }
@@ -183,7 +181,6 @@ extension Animate3DGraphicView {
                 Spacer()
                 Text(value)
             }
-            .padding([.leading, .trailing])
         }
     }
 }