第3章 UIView动画进阶

3、UIView动画进阶：Spring动画的参数调优、关键帧动画的缓动曲线设计、过渡动画的实战应用

好，咱们直接进入正题。UIView动画这块，很多人用了一两年还是只会个 animate(withDuration:)。说实话，这就像开车只会挂一档——能走，但永远跑不快。今天我把三个最实用的进阶技巧掰开揉碎讲给你听。

3.1 Spring动画：不只是「弹一下」那么简单

Spring动画，说白了就是带物理弹性的动画。iOS 7开始就有了，但直到现在，我见过太多人把参数调得乱七八糟。

3.1.1 核心参数解读

先看最常用的API：

UIView.animate(
    withDuration: 0.6,
    delay: 0,
    usingSpringWithDamping: 0.5,
    initialSpringVelocity: 0.3,
    options: .curveEaseInOut,
    animations: { /* 你的动画代码 */ },
    completion: nil
)

这两个参数是关键：

usingSpringWithDamping：阻尼系数，范围0~1。值越小，弹得越欢。0.1就像果冻，1.0就像铁块。
initialSpringVelocity：初始速度。0表示从静止开始，正数表示有初速度。

我的经验值：

按钮点击反馈：damping=0.6, velocity=0.5
列表出现动画：damping=0.8, velocity=0.3
拖拽松手回弹：damping=0.4, velocity=1.0

3.1.2 避坑指南

我曾经踩过的坑：

把damping设成0.01，结果动画弹了5秒才停。用户都以为App卡死了。记住，damping不要低于0.1，除非你故意要做搞笑效果。

还有个细节——initialSpringVelocity的单位是「每秒移动的距离/总距离」。什么意思？如果你的视图要移动200pt，velocity=1.0就表示初始速度是200pt/s。嗯，这里要注意，这个值不是随便填的。

3.2 关键帧动画：让动画「活」起来

关键帧动画，就是给动画设定几个「关键节点」，中间的过程让系统帮你算。但问题来了——怎么算才好看？

3.2.1 缓动曲线设计

iOS提供了几种内置曲线：

曲线类型	适用场景	我的评价
.curveEaseInOut	大部分通用动画	最安全，但有点无聊
.curveEaseIn	物体离开屏幕	像被弹出去
.curveEaseOut	物体进入屏幕	像缓缓停稳
.curveLinear	进度条、加载动画	匀速，别的地方少用

但说实话，内置曲线太「标准」了。我个人习惯用自定义贝塞尔曲线：

UIView.animateKeyframes(
    withDuration: 1.0,
    delay: 0,
    options: .calculationModeCubic,
    animations: {
        // 第1段：快速启动
        UIView.addKeyframe(
            withRelativeStartTime: 0,
            relativeDuration: 0.3,
            animations: {
                view.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
            }
        )
        // 第2段：回弹微调
        UIView.addKeyframe(
            withRelativeStartTime: 0.3,
            relativeDuration: 0.4,
            animations: {
                view.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
            }
        )
        // 第3段：稳定到位
        UIView.addKeyframe(
            withRelativeStartTime: 0.7,
            relativeDuration: 0.3,
            animations: {
                view.transform = .identity
            }
        )
    }
)

小技巧：

关键帧的relativeDuration总和不一定非要等于1。你想想看，如果总和小于1，最后一段会匀速补完；如果大于1，后面的帧会被截断。我一般控制在0.9~1.0之间，留点余量。

3.2.2 实战：弹跳进入效果

我在做一个电商App时，需要商品卡片从底部弹入。用普通动画太死板，用Spring又控制不好节奏。最后用关键帧搞定了：

func bounceInAnimation(for view: UIView) {
    view.transform = CGAffineTransform(translationX: 0, y: 300)
    view.alpha = 0
    
    UIView.animateKeyframes(
        withDuration: 0.8,
        delay: 0,
        options: .calculationModeCubicPaced,
        animations: {
            // 冲上来
            UIView.addKeyframe(
                withRelativeStartTime: 0,
                relativeDuration: 0.4
            ) {
                view.transform = CGAffineTransform(translationX: 0, y: -20)
                view.alpha = 1
            }
            // 过头了，拉回来
            UIView.addKeyframe(
                withRelativeStartTime: 0.4,
                relativeDuration: 0.2
            ) {
                view.transform = CGAffineTransform(translationX: 0, y: 10)
            }
            // 微调到位
            UIView.addKeyframe(
                withRelativeStartTime: 0.6,
                relativeDuration: 0.2
            ) {
                view.transform = .identity
            }
        }
    )
}

为什么用.calculationModeCubicPaced？因为它会让关键帧之间的速度更平滑，不会出现「突然加速」的突兀感。

3.3 过渡动画：页面切换的「魔法」

过渡动画，就是从一个界面状态切换到另一个状态时的动画。UIView提供了transition系列方法，但很多人只用了皮毛。

3.3.1 三种过渡方式

视图替换过渡：transition(from:to:)，适合整个页面的切换
视图内部过渡：transition(with:)，适合同一个视图的内容变化
自定义过渡：配合UIViewPropertyAnimator实现更复杂的交互

我最常用的是第二种，比如图片加载时的渐变切换：

UIView.transition(
    with: imageView,
    duration: 0.3,
    options: [.transitionCrossDissolve, .curveEaseInOut],
    animations: {
        imageView.image = newImage
    },
    completion: nil
)

注意：

transitionCrossDissolve是交叉溶解，效果最自然。但如果你要的是「翻页」效果，可以用.transitionFlipFromLeft或.transitionFlipFromRight。我建议不要用.transitionCurlUp，那个太像iBooks了，用在普通App里反而奇怪。

3.3.2 实战：列表刷新动画

我记得有一次做新闻App，列表刷新时直接reloadData()，闪一下特别生硬。后来改成这样：

UIView.transition(
    with: tableView,
    duration: 0.35,
    options: [.transitionCrossDissolve, .allowAnimatedContent],
    animations: {
        self.tableView.reloadData()
    }
)

加上.allowAnimatedContent后，每个cell的插入、删除、移动都会自带动画。嗯，这里要注意，如果你的数据变化很大，这个动画可能会有点卡。建议配合performBatchUpdates使用。

3.3.3 自定义过渡：更精细的控制

当内置过渡满足不了你时，就用UIViewPropertyAnimator。它支持中断、反转、调整进度，非常适合交互式过渡。

let animator = UIViewPropertyAnimator(
    duration: 0.5,
    dampingRatio: 0.7
)

animator.addAnimations {
    // 你的动画代码
    view.alpha = 1
    view.transform = .identity
}

animator.addCompletion { position in
    if position == .end {
        print("动画完成")
    }
}

// 可以随时暂停、继续
animator.pauseAnimation()
animator.continueAnimation(withTimingParameters: nil, durationFactor: 0.5)

我的习惯：

在做拖拽手势驱动的动画时，我会用fractionComplete属性来控制进度。这样用户拖到哪，动画就跟到哪，松手后再决定是完成还是回退。体验比固定动画好太多了。

3.4 总结

好了，三个进阶技巧都讲完了。说白了，Spring动画控制「弹性」，关键帧动画控制「节奏」，过渡动画控制「切换」。把它们组合起来，你的App动效就能从「及格」变成「优秀」。

最后送你一句话：动画不是为了炫技，而是为了让用户觉得「嗯，这个App用起来很顺手」。下次写动画时，多想想用户会怎么操作，而不是单纯追求「好看」。