Можно ли скрыть заднюю поверхность при использовании SwiftUI Rotation3DEffect?

Question

Рассмотрим этот простой пример:

import SwiftUI

struct RotationExample: View {

  var body: some View {
    ZStack {
      Color.red
      Text("Text I want to hide")
      .font(.system(size: 48))
    }
    .frame(width: size, height: size)
    .rotation3DEffect(Angle.degrees(180), axis: (x: 0, y:1, z: 0))
  }
}

struct RotationExample_Previews: PreviewProvider {
  static var previews: some View {
    RotationExample()
  }
}

При запуске этого кода текст отображается в обратном порядке. Я думал, когда было применено вращение, слои будут соблюдаться (ie. Слой переднего плана исчезнет за фоном)

Это Можно ли скрыть вид, когда это задняя поверхность повернута более чем на 90 градусов, или каким-то образом заставить слои переворачиваться во время вращения? Я пробовал использовать .drawingGroup() и устанавливать модификаторы .background, но ни один из них не работал.

Answer 1

rotation3DEffect - это просто преобразование в контекст рисования, ie. как рисовать контент , нет backface . Если вы хотите нарисовать другой контент, вы должны указать его явно, как в примере ниже.

struct RotationExample: View {
    @State private var flipped = false
    var body: some View {
        VStack {
            Button("Flip") { self.flipped.toggle() }
            ZStack {
                if flipped {   // 1st-side content
                    Color.red
                    Text("Text I want to hide")
                        .font(.system(size: 48))
                    .rotation3DEffect(Angle.degrees(180), axis: (x: 0, y:1, z: 0))
                } else {       // 2nd-side content
                    Color.blue
                }
            }
            .frame(width: 400, height: 100)
        }
    }
}

Answer 2

• 1000 Угол поворота зависит от жеста, затем прозрачность зависит от угла:

import SwiftUI

struct RotationExample: View {

  @State var translation: CGSize = .zero

  var textOpacity: Double {
    let theta: Double = abs(angle.degrees).truncatingRemainder(dividingBy: 360)
    return theta >= 90 && theta <= 270 ? 0 : 1
  }

  var textOpacity: Double {
    return abs(angle.degrees) >= 90 ? 0 : 1
  }

  var body: some View {
    ZStack {
      Color.red

      Text("Text I want to hide")
      .font(.system(size: 48))
      .multilineTextAlignment(.center)
      .opacity(textOpacity)
    }
    .frame(width: size, height: size)
    .rotation3DEffect(angle, axis: (x: 0, y:1, z: 0))
    .gesture(DragGesture()
      .onChanged { value in
        self.translation = value.translation
      })
  }
}

struct RotationExample_Previews: PreviewProvider {
  static var previews: some View {
    RotationExample()
  }
}