再看先看效果，

前言

在开发 iOS 应用时我们经常需要展示图片轮播或切换效果。虽然市面上有很多成熟的图片轮播库，但有时候我们只需要一个简单、优雅且带有动画效果的图片切换控件。

主要特性

• 呼吸式缩放动画图片在展示时会有类似 Ken Burns 效果的缓慢缩放动画
• 流畅切换过渡切换图片时旧图放大淡出，新图缩小淡入，视觉效果自然流畅
• 双重图片支持同时支持网络图片和本地资源图片
• 防抖机制内置防抖逻辑，避免快速切换导致的动画混乱
• SwiftUI 集成通过 UIViewRepresentable 封装，可无缝集成到 SwiftUI 项目中

效果预览

1. 待机状态：图片缓慢放大再缩小。循环播放
2. 切换动画：
   • 当前图片放大 + 淡出
   • 新图片从小到大 + 淡入
   • 切换完成后新图片继续播放呼吸动画

实现原理

整体架构

AnimatedImageView ├── currentImgView ├── willShowImgView ├── 缩放动画逻辑 ├── 切换动画逻辑 └── 图片加载机制

. 双 ImageView 架构

private var currentImgView = UIImageView // 当前显示的图片 private var willShowImgView = UIImageView // 待切换的图片

. 三种尺寸状态

private var originalBounds: CGRect = .zero // 原始尺寸 private var smallBounds: CGRect = .zero // 小尺寸 private var bigBounds: CGRect = .zero // 大尺寸

. 呼吸式缩放动画

private func addScaleAnimation { guard shouldContinueScaling else { return } let anim = CABasicAnimation anim.fromValue = originalBounds anim.toValue = bigBounds anim.duration = scaleDuration // 14秒 anim.autoreverses = true anim.repeatCount = .infinity // 无限循环 anim.timingFunction = CAMediaTimingFunction currentImgView.layer.add }

. 切换动画组合

private func animateSwitch -> Void) { let shrinkAnim = CABasicAnimation shrinkAnim.fromValue = originalBounds shrinkAnim.toValue = bigBounds shrinkAnim.duration = switchDuration - 0.05 let fadeAnim = CABasicAnimation fadeAnim.fromValue = 1.0 fadeAnim.toValue = 0.0 fadeAnim.duration = switchDuration - 0.05 let expandAnim = CABasicAnimation expandAnim.fromValue = smallBounds expandAnim.toValue = originalBounds expandAnim.duration = switchDuration let unfadeAnim = CABasicAnimation unfadeAnim.fromValue = 0.0 unfadeAnim.toValue=1.0 // ...省略相似代码...

. 防抖机制

private var debounceWorkItem: DispatchWorkItem?private let debounceDelay: TimeInterval = 0.15.. func setImage{ debounceWorkItem?.cancel pendingImages.removeAll pendingImages.append let workItem=DispatchWorkItem{ in..

. 图片加载

private func loadImage->Void){..

代码实现细节

主要控件 AnimatedImageView.swift

swift import UIKit

public final class AnimatedImageView : UIView {

// MARK:- 配置参数 private var switchDuration : CGFloat // 切换动画时长 private var scaleDuration : CGFloat // 缩放动画时长

private var shouldContinueScaling : Bool // 是否继续呼吸 private var originalBounds : CGRect // 原始 bounds private var smallBounds : CGRect // 小尺寸 bounds private var bigBounds : CGRect // 大尺寸 bounds

/* ----------- 状态管理 ----------- */

/// 正在执行切换？防止冲突 public fileprivate var isSwitching : Bool { didSet{ /* debug */ } }

/// 首次加载源，用于保证首屏无闪烁 fileprivate public var firstImgSource : String?

fileprivate lazy var debounceWorkItem : DispatchWorkItem?= nil

SwiftUI 封装 – UIViewRepresentable 的妙用

swift public struct SwiftUIAnimatedImageView : UIViewRepresentable {

 public init {
self.imageName=imageName }
public typealias UIViewType=AnimatedImageView
public func makeUIView -> AnimatedImageView{
return AnimatedImageView
}
public func updateUIView{
uiview.setImage
}

}

• 🛨使用者常见错误：🛨
  • No‑debounce → 点击过快导致多次弹窗/卡顿。其实，
  • MissingisSwitchingflag → 动画互相覆盖。
  • 未设置 contentMode 或 clipsToBounds → 图片边缘露出。
  `

使用方法 – 快速上手

struct ContentView:{@Statevar index=0}var body->some View{SwiftUIAnimatedImageView").ignoresSafeArea}}

完整示例 – 带按钮 & 网络支持 swift struct ContentPage:{@Statevar idx=1} let images= var body->some View{ SwiftUIAnimatedImageViews HStack{Button{idx=%images.count}} }

技术要点

• Smooth separation 娱乐ween breathing and switching animations.
• Status flag prevents overlapping.
• weak self keeps memory leak free.
• Makes sure image is larger than view to avoid bleed.
• CATransaction synchronizes multiple Core Animation actions.
• A debounce mechanism ensures user taps don’t break UI flow.

🔗 源码地址 ：