用 TextRenderer 构建绚丽动感的文字效果

@available(iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0, *)
public protocol TextRenderer : Animatable {
    // 核心方法，开发者可以在此对 Text 中的元素进行自定义渲染，添加效果
    func draw(layout: Text.Layout, in ctx: inout GraphicsContext)
    
    // 如果自定义效果改变了呈现尺寸，可以通过该方法给出新的需求尺寸
    @available(iOS 18.0, macOS 15.0, tvOS 18.0, watchOS 11.0, visionOS 2.0, *)
    func sizeThatFits(proposal: ProposedViewSize, text: TextProxy) -> CGSize
    
    // 如果通过 sizeThatFits 调整了需求尺寸，可以在此调整文本在新尺寸中的位置
    @available(iOS 18.0, macOS 15.0, tvOS 18.0, watchOS 11.0, visionOS 2.0, *)
    var displayPadding: EdgeInsets { get }
}

let textRenderer = Text("TextRenderer")
  .customAttribute(ColorfulEffect())
  .foregroundStyle(.pink)
  .bold()

Text("Build Visual Effects\nwith \(textRenderer)")
  .font(.system(.title, design: .rounded, weight: .semibold))
  .textRenderer(AppearanceEffectRenderer(elapsedTime: time, totalDuration: 0.8))

for line in layout {
  ctx.draw(line) // 直接绘制，不进行修改
}

for line in layout {
  for run in line {
    ctx.draw(run) // 直接绘制，不进行修改
  }
}

extension Text.Layout {
  var flattenedRuns: some RandomAccessCollection<Text.Layout.Run> {
    flatMap { line in
      line
    }
  }
}

for run in layout.flattenedRuns {
  ...
}

Text("Hello world") // 一个 Run

let name = Text("fatbobman").foregroundStyle(.pink)
Text("Hello \(name) !\(Image(systemName:"heart"))") // 四个 Run，'Hello ','fatbobman',' !' 和 'heart symbol'

// 扩展 Layout 协议，简化迭代操作
extension Text.Layout {
  var flattenedRunSlices: some RandomAccessCollection<Text.Layout.RunSlice> {
    flattenedRuns.flatMap(\.self)
  }
}

for slice in layout.flattenedRunSlices {
  ...
}

let copy = context
copy.opacity = 0.5
copy.draw(slice) // 绘制 RunSlice，透明度为原来的 50%

struct ColorfulRender: TextRenderer {
  func draw(layout: Text.Layout, in context: inout GraphicsContext) {
    // 遍历 RunSlice 及其索引
    for (index, slice) in layout.flattenedRunSlices.enumerated() {
      // 根据索引计算颜色调整的角度
      let degree = Angle.degrees(360 / Double(index + 1))
      // 创建 GraphicsContext 副本
      var copy = context
      // 应用色相旋转滤镜
      copy.addFilter(.hueRotation(degree))
      // 在上下文中绘制当前 Slice
      copy.draw(slice)
    }
  }
}

struct ColorfulDemo: View {
  var body: some View {
    Text("Hello World")
      .font(.title)
      .fontWeight(.heavy)
      .foregroundStyle(.red)
      .textRenderer(ColorfulRender())
  }
}

let heart = Image(systemName: "heart.fill")
Text("Hello \(heart) World")
  .font(.title)
  .fontWeight(.heavy)
  .foregroundStyle(.red)
  .textRenderer(ColorfulRender())

struct AnimatedSineWaveOffsetRender: TextRenderer {
  let timeOffset: Double // 时间偏移量
  func draw(layout: Text.Layout, in context: inout GraphicsContext) {
    let count = layout.flattenedRunSlices.count // 统计文本布局中所有 RunSlice 的数量
    let width = layout.first?.typographicBounds.width ?? 0 // 获取文本 Line 的宽度
    let height = layout.first?.typographicBounds.rect.height ?? 0 // 获取文本 Line 的高度
    // 遍历每个 RunSlice 及其索引
    for (index, slice) in layout.flattenedRunSlices.enumerated() {
      // 计算当前字符的正弦波偏移量
      let offset = animatedSineWaveOffset(
        forCharacterAt: index, 
        amplitude: height / 2, // 振幅设为行高的一半
        wavelength: width, 
        phaseOffset: timeOffset, 
        totalCharacters: count
      )
      // 创建上下文副本并进行平移
      var copy = context
      copy.translateBy(x: 0, y: offset)
      // 在修改后的上下文中绘制当前 RunSlice
      copy.draw(slice)
    }
  }

  // 根据字符索引计算正弦波偏移量
  func animatedSineWaveOffset(forCharacterAt index: Int, amplitude: Double, wavelength: Double, phaseOffset: Double, totalCharacters: Int) -> Double {    
    let x = Double(index)
    let position = (x / Double(totalCharacters)) * wavelength
    let radians = ((position + phaseOffset) / wavelength) * 2 * .pi
    return sin(radians) * amplitude
  }
}

struct AnimatedSineWaveDemo: View {
  @State var offset: Double = 0
  @State var timer = Timer.publish(every: 0.05, on: .main, in: .common).autoconnect()
  var body: some View {
    Text("Build Visual Effects with TextRenderer!")
      .font(.system(size: 16))
      .textRenderer(AnimatedSineWaveOffsetRender(timeOffset: offset))
      .onReceive(timer) { _ in
        if offset > 1_000_000_000_000 {
          offset = 0 // 重置时间偏移
        }
        offset += 10
      }
  }
}

struct AnimatedSineWaveOffsetRender: TextRenderer {
  let fontSize: CGFloat // 字号信息，用于计算 displayPadding

  ...

  func sizeThatFits(proposal: ProposedViewSize, text: TextProxy) -> CGSize {
    let originalSize = text.sizeThatFits(proposal)
    return CGSize(width: originalSize.width, height: originalSize.height * 2) // 根据最大振幅调整尺寸
  }

  var displayPadding: EdgeInsets {
    let height = fontSize * 1.2
    return EdgeInsets(top: -height / 2, leading: 0, bottom: 0, trailing: 0) // 调整文本位置
  }
}

Text("Build Visual Effects with TextRenderer!")
  .font(.system(size: 16))
  .textRenderer(AnimatedSineWaveOffsetRender(timeOffset: offset, fontSize: 16))
  .border(.blue)

struct ColorfulAttribute: TextAttribute {}

struct ColorfulAttributeRender: TextRenderer {
  func draw(layout: Text.Layout, in context: inout GraphicsContext) {
    for (index, slice) in layout.flattenedRunSlices.enumerated() {
      // 检查当前 Slice 是否包含 ColorfulAttribute 属性
      if slice[ColorfulAttribute.self] != nil {
        let degree = Angle.degrees(360 / Double(i + 1))
        var copy = context
        copy.addFilter(.hueRotation(degree))
        copy.draw(slice)
      } else {
        // 无需调整，直接绘制
        context.draw(slice)
      }
    }
  }
}

struct ColorfulAttributeDemo: View {
  var body: some View {
    let weekly = Text("Fatbobman Swift Weekly")
      .bold()
      .foregroundStyle(.pink)
      .customAttribute(ColorfulAttribute())

    Text("Subscribe \(weekly) now!")
      .textRenderer(ColorfulAttributeRender())
  }
}

struct BlurAttribute: TextAttribute {}

struct BlurEffect: TextRenderer {
  func draw(layout: Text.Layout, in ctx: inout GraphicsContext) {
    for run in layout.flattenedRuns {
      if run[BlurAttribute.self] != nil {
        // 对具有 BlurAttribute 的 Run 应用模糊效果
        var blurContext = ctx
        let radius = run.typographicBounds.rect.height / 5
        blurContext.addFilter(.blur(radius: radius))
        blurContext.draw(run)
      }
      // 绘制所有 Run，不论是否添加模糊
      ctx.draw(run)
    }
  }
}

struct BlurEffectDemo: View {
  var body: some View {
    let weekly = Text("Fatbobman Swift Weekly")
      .bold()
      .foregroundStyle(.pink)
      .customAttribute(BlurAttribute())

    Text("Subscribe \(weekly) now!")
      .textRenderer(BlurEffect())
  }
}

struct LineByLineEffect: TextRenderer {
  var elapsedTime: TimeInterval // 已经过的时间
  var elementDuration: TimeInterval // 每行的持续时间
  var totalDuration: TimeInterval // 总持续时间

  func draw(layout: Text.Layout, in context: inout GraphicsContext) {
    // 根据 elapsedTime 来决定渲染逻辑
    ...
  }
}

let weekly = Text("Fatbobman's Swift Weekly")
  .foregroundStyle(.pink).bold()
let swiftui = Text("SwiftUI")
  .foregroundStyle(.green).bold()
Text("Get weekly handpicked updates on \(swiftui) from \(weekly)!")
  .font(.system(.title, design: .rounded, weight: .semibold))
  .textRenderer(LineByLineEffect(elapsedTime: 0.432, elementDuration: 0.6, totalDuration: 0.9))

struct LineByLineTransition: Transition {
  let duration: TimeInterval
  init(duration: TimeInterval = 1.0) {
    self.duration = duration
  }

  func body(content: Content, phase: TransitionPhase) -> some View {
    // 根据转场阶段设置 elapsedTime，转场将自动创建动画插值数据
    let elapsedTime = phase.isIdentity ? duration : 0
     // 创建 LineByLineEffect
    let renderer = LineByLineEffect(
      elapsedTime: elapsedTime,
      totalDuration: duration
    )

    content.transaction { t in
      // 根据 disablesAnimations 决定是否启用动画转场
      if !t.disablesAnimations {
        // 用 linear 覆盖 transaction 的默认动画
        t.animation = .linear(duration: duration)
      }
    } body: { view in
      view.textRenderer(renderer)
    }
  }
}

struct LineByLineEffect: TextRenderer {
  var animatableData: Double {
    get { elapsedTime }
    set { elapsedTime = newValue }
  }
}

let weekly = Text("Fatbobman's Swift Weekly")
  .foregroundStyle(.pink).bold()
let swiftui = Text("SwiftUI")
  .foregroundStyle(.green).bold()
Text("Get weekly handpicked updates on \(swiftui) from \(weekly)!")
  .font(.system(.title, design: .rounded, weight: .semibold))
  .transition(LineByLineTransition())