13.4_结合 TimelineView 和 Canvas 实现复杂动画

结合 TimelineView 和 Canvas 实现复杂动画

想不想让你的 SwiftUI 动画更上一层楼？🚀 结合 TimelineView 和 Canvas，你就能创造出令人惊叹的复杂动画效果！TimelineView 负责提供时间流，Canvas 负责绘制图形，两者结合，简直是动画界的黄金搭档！

TimelineView 的妙用

TimelineView 就像一个动画引擎，它会按照你设定的时间间隔，不断地触发视图的更新。你可以使用不同的 schedule 来控制更新频率，例如 .animation、.periodic 等。

• .animation: 依赖于系统的动画刷新率，通常是每秒 60 帧。
• .periodic(from:by:): 允许你自定义更新的时间间隔。

例如，你可以这样创建一个每秒更新一次的 TimelineView：

TimelineView(.periodic(from: .now, by: 1.0)) { timeline in
    // 在这里绘制你的动画
}

Canvas 的强大绘图能力

Canvas 提供了强大的绘图 API，你可以在其中绘制各种形状、图像和文本。它还支持使用 context 对象进行更高级的绘图操作，例如变换、裁剪和混合。

你可以使用 Canvas 绘制动态图形，例如：

Canvas { context, size in
    // 在这里绘制你的图形
}

结合 TimelineView 和 Canvas

现在，让我们把 TimelineView 和 Canvas 结合起来，创建一个简单的动画。例如，我们可以创建一个旋转的矩形：

1. 使用 TimelineView 提供时间流。
2. 在 Canvas 中，根据当前时间计算旋转角度。
3. 使用 context.rotate(by:) 方法旋转矩形。

TimelineView(.animation) { timeline in
    Canvas { context, size in
        let angle = timeline.date.timeIntervalSinceReferenceDate.truncatingRemainder(dividingBy: 2 * .pi)
        context.translateBy(x: size.width / 2, y: size.height / 2)
        context.rotate(by: Angle(radians: angle))
        context.fill(Path(CGRect(x: -50, y: -50, width: 100, height: 100)), with: .color(.red))
    }
}

进阶技巧

• 使用 GeometryReader 获取视图大小: 确保你的动画能够适应不同的屏幕尺寸。
• 利用 State 变量控制动画: 你可以使用 @State 变量来控制动画的属性，例如颜色、位置和大小。
• 尝试不同的混合模式: context.blendMode 可以让你创造出各种有趣的视觉效果。

通过结合 TimelineView 和 Canvas，你可以创造出无限可能的复杂动画。 尽情发挥你的想象力，打造出令人惊艳的 SwiftUI 动画吧！🎉