6.3_定义每帧的开始时间与持续时长

在 UIView 关键帧动画中，你可以精确地控制每一帧动画的开始时间和持续时长，从而创建出非常复杂和精细的动画效果。这就像电影制作一样，每一帧都经过精心设计，最终呈现出流畅的视觉体验。🎬

开始时间和持续时长的重要性

精确控制开始时间和持续时长，能让你实现更复杂的动画序列。例如，你可以让一个动画暂停一段时间，然后再继续，或者让不同的动画帧以不同的速度播放。这种控制力对于创建引人入胜的用户界面至关重要。

• 开始时间 (startTime)：定义了动画帧相对于整个动画序列的起始时间。
• 持续时长 (duration)：定义了该帧动画播放的时间长度。

如何定义开始时间和持续时长

使用 UIView.addKeyframe(withRelativeStartTime:relativeDuration:animations:) 方法，你可以定义每一帧的开始时间和持续时长。这两个参数都是相对值，范围从 0.0 到 1.0。

1. relativeStartTime：表示该帧动画的开始时间相对于整个动画时长的比例。例如，0.0 表示动画立即开始，0.5 表示动画在整个动画时长的一半时开始。
2. relativeDuration：表示该帧动画的持续时长相对于整个动画时长的比例。例如，0.25 表示该帧动画的持续时长为整个动画时长的四分之一。

UIView.animateKeyframes(withDuration: 2.0, delay: 0.0, options: [], animations: {
    UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.5, animations: {
        // 第一帧动画：在整个动画的前半段执行
        view.frame.origin.x = 100
    })
    UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5, animations: {
        // 第二帧动画：在整个动画的后半段执行
        view.frame.origin.y = 200
    })
}, completion: nil)

在这个例子中，整个动画时长为 2 秒。第一帧动画从 0 秒开始，持续 1 秒（2 秒 * 0.5）。第二帧动画从 1 秒开始，持续 1 秒。

实际应用场景

• 复杂的动画序列：你可以创建多个动画帧，每个帧都有不同的开始时间和持续时长，从而实现复杂的动画序列。例如，一个按钮可以先放大，然后缩小，最后移动到新的位置。
• 动画暂停和延迟：通过调整开始时间，你可以让动画在特定时间点暂停或延迟。这对于创建更自然和流畅的动画效果非常有用。
• 不同速度的动画：你可以让不同的动画帧以不同的速度播放，从而创建更具吸引力的动画效果。例如，一个物体可以先加速，然后减速。

示例：创建一个复杂的动画序列

假设你想创建一个动画，让一个视图先向右移动，然后放大，最后旋转。你可以使用以下代码实现：

UIView.animateKeyframes(withDuration: 3.0, delay: 0.0, options: [], animations: {
    UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.33, animations: {
        // 第一帧：向右移动
        view.frame.origin.x = 200
    })
    UIView.addKeyframe(withRelativeStartTime: 0.33, relativeDuration: 0.33, animations: {
        // 第二帧：放大
        view.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
    })
    UIView.addKeyframe(withRelativeStartTime: 0.66, relativeDuration: 0.34, animations: {
        // 第三帧：旋转
        view.transform = view.transform.rotated(by: .pi)
    })
}, completion: nil)

在这个例子中，整个动画时长为 3 秒。第一帧动画从 0 秒开始，持续 1 秒。第二帧动画从 1 秒开始，持续 1 秒。第三帧动画从 2 秒开始，持续 1 秒。每一帧动画都有不同的效果，最终组合成一个复杂的动画序列。🎉

通过灵活运用 relativeStartTime 和 relativeDuration，你可以创造出各种各样令人惊艳的动画效果，为你的应用增添更多活力和趣味。记住，实践是最好的老师，多尝试不同的数值组合，你就能掌握关键帧动画的精髓！🚀