如何在Swift中为环形排列的UIImageView实现逐个闪烁指针效果

Hey there! I get that using an array of transparent images was causing timing chaos for your pointer-like blink effect. Let's switch to a more controlled approach using UIView animations with completion handlers—this way we can make sure each UIImageView finishes its blink before the next one starts, with precise duration control for each.

Step 1: Set Up Your Variables #

First, organize your UIImageViews in an array (in the order they should blink around the circle) and define specific durations for each blink:

// Assume these are your 6 circular UIImageViews, ordered clockwise/counter-clockwise
let circularImageViews: [UIImageView] = [imageView1, imageView2, imageView3, imageView4, imageView5, imageView6]

// Customize each blink's total duration (adjust these values as needed)
let blinkDurations: [TimeInterval] = [0.3, 0.4, 0.3, 0.5, 0.4, 0.3]

Step 2: Create a Recursive Sequential Blink Function #

This recursive function handles one blink at a time, using completion handlers to trigger the next animation only after the current one finishes:

func startSequentialPointerBlink(at index: Int = 0) {
    // Stop if we've gone through all views (remove this line if you want infinite looping)
    guard index < circularImageViews.count else { return }
    
    let currentView = circularImageViews[index]
    let totalBlinkDuration = blinkDurations[index]
    
    // Blink animation: fade out then fade back in
    UIView.animate(withDuration: totalBlinkDuration / 2, animations: {
        currentView.alpha = 0.0
    }, completion: { _ in
        UIView.animate(withDuration: totalBlinkDuration / 2, animations: {
            currentView.alpha = 1.0
        }, completion: { _ in
            // Move to the next view after the current blink completes
            self.startSequentialPointerBlink(at: index + 1)
            
            // Optional: Add a small delay between blinks
            // DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
            //     self.startSequentialPointerBlink(at: index + 1)
            // }
        })
    })
    
    // If you prefer switching between normal/highlighted images instead of fading:
    // UIView.animate(withDuration: totalBlinkDuration / 2, animations: {
    //     currentView.image = currentView.highlightedImage // Your bright/pointer image
    // }, completion: { _ in
    //     UIView.animate(withDuration: totalBlinkDuration / 2, animations: {
    //         currentView.image = currentView.normalImage // Original image
    //     }, completion: { _ in
    //         self.startSequentialPointerBlink(at: index + 1)
    //     })
    // })
}

Step 3: Start the Animation #

Call this function whenever you want the pointer blink sequence to kick off:

// Trigger the animation when your view loads or a button is tapped
startSequentialPointerBlink()

Pro Tips #

• Infinite Looping: If you want the sequence to repeat endlessly, replace the guard statement's return with:

  guard index < circularImageViews.count else {
      startSequentialPointerBlink(at: 0)
      return
  }
  

• Adjust Animation Style: You can tweak the animation curves by adding an options parameter to UIView.animate, like .curveEaseInOut, for smoother transitions.
• Verify Order: Double-check that your circularImageViews array is ordered correctly around the ring—this ensures the blink follows the pointer path you want.

内容的提问来源于stack exchange，提问作者w.y