SwiftUI 动画进阶 — Part 5：Canvas

Swift社区

发布于 2022-04-04 15:45:10

2.7K0

发布于 2022-04-04 15:45:10

文章被收录于专栏：Swift社区

前言

这个高级SwiftUI动画系列的第五部分将探索Canvas视图。从技术上讲，它不是一个动画视图，但当它与第四部分的 TimelineView 结合时，它带来了很多有趣的可能性，正如这个数字雨的例子所示。

我不得不把这篇文章推迟几周，因为 Canvas 视图有点不稳定。我们仍然处于测试阶段，所以这是可以预期的。然而，该视图产生的崩溃使这里的一些例子无法分享。虽然不是所有的问题都得到了解决，但现在每个例子都能顺利运行。在文章的最后，我将指出我找到的一些解决方法。

一个简单的 Canvas

简而言之，画布Canvas 是一个 SwiftUI 视图，它从一个渲染闭包中获得绘制指令。与 SwiftUI API 中的大多数闭包不同，它不是一个视图生成器。这意味着我们可以使用 Swift 语言且没有任何限制。

该闭包接收两个参数：上下文context 和尺寸size。上下文使用一个新的 SwiftUI 类型 GraphicsContext，它包含了很多方法和属性，可以让我们绘制任何东西。下面是一个关于如何使用 Canvas 的基本例子。

struct ContentView: View {
    var body: some View {
        Canvas { context, size in
            let rect = CGRect(origin: .zero, size: size).insetBy(dx: 25, dy: 25)

            // Path
            let path = Path(roundedRect: rect, cornerRadius: 35.0)

            // Gradient
            let gradient = Gradient(colors: [.green, .blue])
            let from = rect.origin
            let to = CGPoint(x: rect.width + from.x, y: rect.height + from.y)
            
            // Stroke path
            context.stroke(path, with: .color(.blue), lineWidth: 25)
            
            // Fill path
            context.fill(path, with: .linearGradient(gradient,
                                                     startPoint: from,
                                                     endPoint: to))
        }
    }
}

Canvas初始值设定项还有其他参数（不透明度opaque、颜色模式colorMode和渲染同步rendersAsynchronously）。请参阅苹果的文档以了解更多信息。

图形上下文 - GraphicsContext

GraphicsContext 有很多方法和属性，但我并不打算把这篇文章作为一个参考，把它们z一一列出。这是一个很长的列表，可能会让人有点不知所措。然而，当我在更新Companion for SwiftUI app 时，我确实不得不去浏览所有这些方法。这让我有了一个整体的想法。我将尝试对现有的东西进行分类，这样你就能得到同样的东西。

Drawing Paths
Drawing Images and Text
Drawing Symbols (aka SwiftUI views)
Mutating the Graphics Context
Reusing CoreGraphics Code
Animating the Canvas
Canvas Crashes

路径 - Paths

绘制路径的第一件事是创建它。从 SwiftUI 的第一个版本开始，路径可以通过多种方式创建和修改。一些可用的初始化器是：

let path = Path(roundedRect: rect, cornerSize: CGSize(width: 10, height: 50), style: .continuous)

let cgPath = CGPath(ellipseIn: rect, transform: nil)
let path = Path(cgPath)

let path = Path {
    let points: [CGPoint] = [
        .init(x: 10, y: 10),
        .init(x: 0, y: 50),
        .init(x: 100, y: 100),
        .init(x: 100, y: 0),
    ]
    
    $0.move(to: .zero)
    $0.addLines(points)
}

路径也可以从一个 SwiftUI 形状中创建。Shape 协议有一个路径方法，你可以用它来创建一个 path:

let path = Circle().path(in: rect)

当然，这也适用于自定义形状：

let path = MyCustomShape().path(in: rect)

填充路径

要填充一个路径，请使用 context.fill() 方法：

fill(_ path: Path, with shading: GraphicsContext.Shading, style: FillStyle = FillStyle())

着色shading表示如何填充形状（用颜色、渐变、平铺图像等）。如果你需要指示要使用的样式，请使用FillStyle类型（即偶数奇数/反义属性）。

路径描边 - Stroke

要描画一个路径，请使用这些GraphicsContext方法中的一个:

stroke(_ path: Path, with shading: GraphicsContext.Shading, style: StrokeStyle)
stroke(_ path: Path, with shading: GraphicsContext.Shading, lineWidth: CGFloat = 1)

你可以指定一个shading（颜色、渐变等）来表示如何描画路径。如果你需要指定破折号、线帽、连接等，请使用样式style。另外，你也可以只指定线宽。

关于如何描边和填充一个形状的完整例子，请看上面的例子（一个简单的 Canvas）。

图片和文本 - Image & Text

图像和文本是使用上下文draw()方法绘制的，有两个版本：

draw(image_or_text, at point: CGPoint, anchor: UnitPoint = .center)
draw(image_or_text, in rect: CGRect)

在图像的情况下，第二个draw()版本有一个额外的可选参数，style:

draw(image, in rect: CGRect, style: FillStyle = FillStyle())

在这些元素之一可以被绘制之前，它们必须被解析。通过解析，SwiftUI将考虑到环境（例如，颜色方案、显示分辨率等）。此外，解析这些元素会暴露出一些有趣的属性，这些属性可能会被进一步用于我们的绘制逻辑。例如，解析后的文本会告诉我们指定字体的最终尺寸。或者我们也可以在绘制之前改变已解析元素的阴影。要了解更多关于可用的属性和方法，请查看 ResolvedImage 和 ResolvedText 。

使用上下文的resolve()方法从Image中获得ResolvedImage，从Text中获得ResolvedText。

解析是可选的，draw()方法也接受Image和Text（而不是ResolvedImage和ResolvedText）。在这种情况下，draw()会自动解析它们。如果你对已解析的属性和方法没有任何用途，这很方便。

在这个例子中，文本被解决了。我们用它的大小来计算渐变，并用着色shading来应用这种渐变：

struct ExampleView: View {
    var body: some View {
        Canvas { context, size in
            
            let midPoint = CGPoint(x: size.width/2, y: size.height/2)
            let font = Font.custom("Arial Rounded MT Bold", size: 36)
            
            var resolved = context.resolve(Text("Hello World!").font(font))
            
            let start = CGPoint(x: (size.width - resolved.measure(in: size).width) / 2.0, y: 0)
            let end = CGPoint(x: size.width - start.x, y: 0)
            
            resolved.shading = .linearGradient(Gradient(colors: [.green, .blue]),
                                               startPoint: start,
                                               endPoint: end)
            
            context.draw(resolved, at: midPoint, anchor: .center)
        }
    }
}

符号 - Symbols

在谈Canvas时，符号Symbols指的只是任何的 SwiftUI。不要与SF符号相混淆，后者是完全不同的东西。Canvas 视图有一种引用 SwiftUI 视图的方式，将其解析为一个符号，然后绘制它。

要解决的视图是在ViewBuilder闭包中传递的，如下面的例子所示。为了引用一个视图，它需要被标记为一个唯一的可散列的标识符。请注意，一个被解析的符号可以在Canvas上绘制不止一次。

struct ExampleView: View {
    var body: some View {
        Canvas { context, size in
            
            let r0 = context.resolveSymbol(id: 0)!
            let r1 = context.resolveSymbol(id: 1)!
            let r2 = context.resolveSymbol(id: 2)!
            
            context.draw(r0, at: .init(x: 10, y: 10), anchor: .topLeading)
            context.draw(r1, at: .init(x: 30, y: 20), anchor: .topLeading)
            context.draw(r2, at: .init(x: 50, y: 30), anchor: .topLeading)
            context.draw(r0, at: .init(x: 70, y: 40), anchor: .topLeading)

        } symbols: {
            RoundedRectangle(cornerRadius: 10.0).fill(.cyan)
                .frame(width: 100, height: 50)
                .tag(0)
            
            RoundedRectangle(cornerRadius: 10.0).fill(.blue)
                .frame(width: 100, height: 50)
                .tag(1)

            RoundedRectangle(cornerRadius: 10.0).fill(.indigo)
                .frame(width: 100, height: 50)
                .tag(2)
        }
    }
}

ViewBuilder也可以使用一个ForEach。同样的例子可以改写成这样:

struct ExampleView: View {
    let colors: [Color] = [.cyan, .blue, .indigo]
    
    var body: some View {
        Canvas { context, size in
            
            let r0 = context.resolveSymbol(id: 0)!
            let r1 = context.resolveSymbol(id: 1)!
            let r2 = context.resolveSymbol(id: 2)!
            
            context.draw(r0, at: .init(x: 10, y: 10), anchor: .topLeading)
            context.draw(r1, at: .init(x: 30, y: 20), anchor: .topLeading)
            context.draw(r2, at: .init(x: 50, y: 30), anchor: .topLeading)
            context.draw(r0, at: .init(x: 70, y: 40), anchor: .topLeading)

        } symbols: {
            ForEach(Array(colors.enumerated()), id: \.0) { n, c in
                RoundedRectangle(cornerRadius: 10.0).fill(c)
                    .frame(width: 100, height: 50)
                    .tag(n)
            }
        }
    }
}

符号的动画 - Animated Symbols

当我测试如果视图作为一个符号被解析为动画，会发生什么时，我感到非常惊喜。你猜怎么着，画布会不断地重绘它以保持动画效果。

struct ContentView: View {
    var body: some View {
        Canvas { context, size in
            
            let symbol = context.resolveSymbol(id: 1)!
            
            context.draw(symbol, at: CGPoint(x: size.width/2, y: size.height/2), anchor: .center)

        } symbols: {
            SpinningView()
                .tag(1)
        }
    }
}

struct SpinningView: View {
    @State private var flag = true
    
    var body: some View {
        Text("")
            .font(.custom("Arial", size: 72))
            .rotationEffect(.degrees(flag ? 0 : 360))
            .onAppear{
                withAnimation(.linear(duration: 1.0).repeatForever(autoreverses: false)) {
                    flag.toggle()
                }
            }
    }
}

改变图形上下文

图形上下文可以被改变，使用以下方法之一：

addFilter
clip
clipToLayer
concatenate
rotate
scaleBy
translateBy

如果你熟悉 AppKit 的 NSGraphicContext 或 CoreGraphic 的 CGContext，你可能习惯于从堆栈中推送（保存）和弹出（恢复）图形上下文状态。Canvas GraphicsContext 的工作方式有些不同，如果你想对上下文做一个临时的改变，你有好几个选择。

为了说明这一点，让我们看看下面的例子。我们需要用三种颜色画三座房子。只有中间的房子，需要被模糊化：

下面的所有例子将使用以下CGPoint扩展：

extension CGPoint {
    static func +(lhs: CGPoint, rhs: CGPoint) -> CGPoint {
        return CGPoint(x: lhs.x + rhs.x, y: lhs.y + rhs.y)
    }

    static func -(lhs: CGPoint, rhs: CGPoint) -> CGPoint {
        return CGPoint(x: lhs.x - rhs.x, y: lhs.y - rhs.y)
    }
}

这里有三种实现相同结果的方法：

1、通过对相应操作排序

在可能的情况下，你可以选择以一种适合你的方式对绘制操作进行排序。在这种情况下，最后绘制模糊的房子，就能解决问题。否则，只要你添加了模糊过滤器，所有的绘制操作都会继续模糊。

有时这可能是行不通的，即使可以，也可能变成难以阅读的代码。如果是这种情况，请检查其他选项。

struct ExampleView: View {
    var body: some View {
        Canvas { context, size in
            
            // All drawing is done at x4 the size
            context.scaleBy(x: 4, y: 4)

            let midpoint = CGPoint(x: size.width / (2 * 4), y: size.height / (2 * 4))
            
            var house = context.resolve(Image(systemName: "house.fill"))

            // Left house
            house.shading = .color(.red)
            context.draw(house, at: midpoint - CGPoint(x: house.size.width, y: 0), anchor: .center)

            // Right house
            house.shading = .color(.blue)
            context.draw(house, at: midpoint + CGPoint(x: house.size.width, y: 0), anchor: .center)
            
            // Center house
            context.addFilter(.blur(radius: 1.0, options: .dithersResult), options: .linearColor)
            house.shading = .color(.green)
            context.draw(house, at: midpoint, anchor: .center)

        }
    }
}

2、通过拷贝上下文

由于图形上下文是一个值类型，你可以简单地创建一个副本。在副本上所做的所有改变，都不会影响到原始的上下文。一旦你完成了，你就可以继续在原始（未改变的）上下文上绘图。

struct ExampleView: View {
    var body: some View {
        Canvas { context, size in
            
            // All drawing is done at x4 the size
            context.scaleBy(x: 4, y: 4)

            let midpoint = CGPoint(x: size.width / (2 * 4), y: size.height / (2 * 4))
            
            var house = context.resolve(Image(systemName: "house.fill"))

            // Left house
            house.shading = .color(.red)
            context.draw(house, at: midpoint - CGPoint(x: house.size.width, y: 0), anchor: .center)

            // Center house
            var blurContext = context
            
            blurContext.addFilter(.blur(radius: 1.0, options: .dithersResult), options: .linearColor)
            house.shading = .color(.green)
            blurContext.draw(house, at: midpoint, anchor: .center)

            // Right house
            house.shading = .color(.blue)
            context.draw(house, at: midpoint + CGPoint(x: house.size.width, y: 0), anchor: .center)

        }
    }
}

3、通过使用图层上下文

最后，你可以使用 context 的方法：drawLayer。该方法有一个闭包，接收一个你可以使用的上下文的副本。所有对图层上下文的改变都不会影响原始的上下文：

struct ExampleView: View {
    var body: some View {
        Canvas { context, size in
            
            // All drawing is done at x4 the size
            context.scaleBy(x: 4, y: 4)

            let midpoint = CGPoint(x: size.width / (2 * 4), y: size.height / (2 * 4))
            
            var house = context.resolve(Image(systemName: "house.fill"))

            // Left house
            house.shading = .color(.red)
            context.draw(house, at: midpoint - CGPoint(x: house.size.width, y: 0), anchor: .center)

            // Center house
            context.drawLayer { layerContext in
                layerContext.addFilter(.blur(radius: 1.0, options: .dithersResult), options: .linearColor)
                house.shading = .color(.green)
                layerContext.draw(house, at: midpoint, anchor: .center)
            }
            
            // Right house
            house.shading = .color(.blue)
            context.draw(house, at: midpoint + CGPoint(x: house.size.width, y: 0), anchor: .center)

            
        }
    }
}

重用 CoreGraphics 代码

如果你已经有使用 CoreGraphics 的绘制代码，你可以使用它。Canvas上下文有一个withCGContext方法，可以在如下这种情况下拯救你：

struct ExampleView: View {
    
    var body: some View {
        Canvas { context, size in
            
            context.withCGContext { cgContext in
                
                // CoreGraphics code here
                
            }
        }
    }
}

对画布进行动画处理

通过将Canvas包裹在TimelineView内，我们可以实现一些相当有趣的动画。基本上，每一次时间线的更新，你都有机会绘制一个新的动画帧。

文章的其余部分假定你已经熟悉TimelineView，但如果你不熟悉，你可以查看本系列的第四部分来了解更多。

在下面的例子中，我们的 Canvas 绘制了一个给定日期的模拟时钟。通过将Canvas放在TimelineView内，并使用时间线更新日期，我们得到了动画时钟。以下屏幕截图的一部分是加速的，以显示分针和时针是如何移动的，否则就不容易观察到效果：

当我们用 Canvas 创建动画时，通常会使用时间线时间表的 .animation。这可以尽可能快地更新，每秒重绘我们的 Canvas 几次。然而，在可能的情况下，我们应该使用 minimumInterval 参数来限制每秒的更新次数。这样对CPU的要求会低一些。例如，在这种情况下，使用.animation和.animation(minimumInterval: 0.06)在视觉上没有明显的区别。然而，在我的测试硬件上，CPU使用率从30%下降到14%。使用更高的最小间隔时间可能开始变得视觉上明显，所以你可能需要做一些错误的试验，以找到最佳值。

为了进一步提高性能，你应该考虑Canvas中是否有一些部分不需要不断重绘。在我们的例子中，只有时钟指针在移动，其他部分保持静止。因此，明智的做法是把它分成两个重叠的画布。一个画除了钟针以外的所有东西（在时间线视图之外），另一个只画钟针，在时间线视图之内。通过实施这一改变，CPU从16%下降到6%。

struct Clock: View {
    var body: some View {
        ZStack {
            ClockFaceCanvas()
            
            TimelineView(.animation(minimumInterval: 0.06)) { timeline in
                ClockHandsCanvas(date: timeline.date)
            }
        }
    }
}

通过仔细分析我们的画布，并做了些许改动，我们成功地将CPU的使用率提高到了5倍（从30%降到6%）。顺便说一下，如果你能接受每秒更新的秒针，你将进一步减少CPU的使用，使其低于1%。你应该通过测试来找到最适合你的效果。

该时钟的完整代码可以在这里找到。

分治

一旦我们了解了Canvas，我们可能会想用它来画一切。然而，有时最好的选择是选择做什么和在哪里做。下面这个Matrix Digital Rain动画就是一个很好的例子。

数字雨的完整代码可以在这里找到。

我们来分析一下其中的内容。我们有一列字符出现，字符数量增长，慢慢滑落，最后减少其字符，直到消失。每一列都是用渐变绘制的。还有一种深度感，通过使靠近观察者的柱子滑动得更快和稍大。为了增加效果，柱子越靠后，它就越显得失焦（模糊）。

在 Canvas 中实现所有这些要求是完全可能的。然而，如果我们把这些任务分割开来（分而治之），任务就会变得容易得多。正如我们在本文的符号的动画部分已经看到的，一个带动画的SwiftUI视图可以通过一个draw()调用被绘制到Canvas中。因此，并不是所有的东西都要在Canvas里面处理。

每一列都被实现为一个单独的SwiftUI视图。叠加字符和用渐变绘图是由视图处理的。当我们在画布上使用渐变时，起始/结束点或任何其他几何参数都是相对于整个画布的。对于柱状渐变，在视图中实现它比较容易，因为它将相对于视图的原点。

每一列都有许多参数：位置（x、y、z）、字符、从顶部删除多少个字符，等等。这些值在每次TimelineView更新后都会被变更。

最后，Canvas负责解析每个视图，在它们的（x，y）位置上绘制，并根据其z值添加模糊和缩放效果。我在代码中添加了一些注释，以帮助你浏览它，如果你有兴趣的话。

Canvas 崩溃

不幸的是，在写这篇文章的时候，我遇到了 Canvas 的一些崩溃问题。幸运的是，它们在每个测试版中都有很大的改进。我希望在iOS15正式发布时，它们都能得到解决。这条信息通常是这样的。

-[MTLDebugRenderCommandEncoder validateCommonDrawErrors:]:5252: failed assertion `Draw Errors Validation Fragment Function(primitive_gradient_fragment): argument small[0] from buffer(3) with offset(65460) and length(65536) has space for 76 bytes, but argument has a length(96).

我设法解决了这些崩溃的问题，至少使用了其中一个方法：