Como desenvolvedores de aplicativos, não somos apenas codificadores – somos criadores, construtores e, às vezes, ilusionistas. A arte do desenvolvimento de aplicativos vai além de apenas código e design. Às vezes, trata-se de criar um elemento de surpresa e ilusão que capte a atenção dos usuários e crie uma experiência imersiva. Desta vez, estamos saindo de nossa zona de conforto do mundo 2D e dando um salto ousado para o cativante mundo . 3D O UIKit é mais do que um conjunto de ferramentas para construir interfaces de usuário. É um kit de ferramentas poderoso que, quando usado corretamente, pode criar efeitos visuais incríveis. Neste artigo, vamos nos aprofundar no UIKit e mostrar uma técnica para criar um reflexo semelhante a um espelho. Esse efeito pode dar ao seu aplicativo uma aparência visualmente impressionante e envolvente que normalmente parece alcançável apenas com ferramentas gráficas complexas, mas é criado com nada além de código. O resultado final Confira este lindo cubo brilhante. Nunca enferrujará, pois não usa nenhum metal. Agora, vamos aprender como criá-lo usando código. Algumas noções básicas primeiro Para nossos propósitos, o UIKit serve como uma camada fina sobre o Quartz Core, fornecendo acesso gratuito aos seus recursos 3D. Um contém uma referência a um objeto , que é o componente real que o sistema operacional usa para renderização na tela. Existem três propriedades de que influenciam sua apresentação na tela: posição, limites e transformação. Os dois primeiros são bastante auto-explicativos, enquanto pode ser inicializada com qualquer matriz 4x4 arbitrária. Quando várias camadas 3D precisam ser apresentadas simultaneamente, devemos empregar um CATransformLayer especializado, que preserva exclusivamente o espaço 3D de suas camadas filhas em vez de achatá-las em um plano 2D. UIView CALayer CALayer transform um cubo Vamos começar desenhando um cubo simples. Primeiro, criaremos uma função auxiliar para ajustar a posição de cada lado: func setupFace( layer: CALayer, size: CGFloat, baseTransform: CATransform3D, translation: (x: CGFloat, y: CGFloat, z: CGFloat), rotation: (angle: CGFloat, x: CGFloat, y: CGFloat, z: CGFloat) ) { layer.bounds = CGRect(origin: CGPoint(), size: CGSize(width: size, height: size)) var transform = baseTransform transform = CATransform3DTranslate(transform, translation.x, translation.y, translation.z) transform = CATransform3DRotate(transform, rotation.angle, rotation.x, rotation.y, rotation.z) layer.transform = transform } Em seguida, no corpo da função do nosso ViewController, vamos montar todos os seis lados do cubo: viewDidLoad let cubeLayer = CATransformLayer() cubeLayer.position = CGPoint(x: view.bounds.midX, y: view.bounds.midY) view.layer.addSublayer(cubeLayer) let cubeSize: CGFloat = 200.0 var baseTransform = CATransform3DIdentity baseTransform = CATransform3DRotate(baseTransform, 0.5, 0.0, 1.0, 0.0) baseTransform = CATransform3DRotate(baseTransform, -0.5, 1.0, 0.0, 0.0) let frontFace = CALayer() frontFace.isDoubleSided = false frontFace.backgroundColor = UIColor.blue.cgColor setupFace(layer: frontFace, size: cubeSize, baseTransform: baseTransform, translation: (0.0, 0.0, cubeSize * 0.5), rotation: (0.0, 0.0, 1.0, 0.0)) cubeLayer.addSublayer(frontFace) let backFace = CALayer() backFace.isDoubleSided = false backFace.backgroundColor = UIColor.red.cgColor setupFace(layer: backFace, size: cubeSize, baseTransform: baseTransform, translation: (0.0, 0.0, -cubeSize * 0.5), rotation: (-.pi, 0.0, 1.0, 0.0)) cubeLayer.addSublayer(backFace) let leftFace = CALayer() leftFace.isDoubleSided = false leftFace.backgroundColor = UIColor.green.cgColor setupFace(layer: leftFace, size: cubeSize, baseTransform: baseTransform, translation: (-cubeSize * 0.5, 0.0, 0.0), rotation: (-.pi * 0.5, 0.0, 1.0, 0.0)) cubeLayer.addSublayer(leftFace) let rightFace = CALayer() rightFace.isDoubleSided = false rightFace.backgroundColor = UIColor.yellow.cgColor setupFace(layer: rightFace, size: cubeSize, baseTransform: baseTransform, translation: (cubeSize * 0.5, 0.0, 0.0), rotation: (.pi * 0.5, 0.0, 1.0, 0.0)) cubeLayer.addSublayer(rightFace) let topFace = CALayer() topFace.isDoubleSided = false topFace.backgroundColor = UIColor.cyan.cgColor setupFace(layer: topFace, size: cubeSize, baseTransform: baseTransform, translation: (0.0, -cubeSize * 0.5, 0.0), rotation: (.pi * 0.5, 1.0, 0.0, 0.0)) cubeLayer.addSublayer(topFace) let bottomFace = CALayer() bottomFace.isDoubleSided = false bottomFace.backgroundColor = UIColor.gray.cgColor setupFace(layer: bottomFace, size: cubeSize, baseTransform: baseTransform, translation: (0.0, cubeSize * 0.5, 0.0), rotation: (-.pi * 0.5, 1.0, 0.0, 0.0)) cubeLayer.addSublayer(bottomFace) Veja como esse código se parece em ação: É inegavelmente 3D, mas algo parece errado, não é? O conceito de perspectiva 3D na arte foi dominado pela primeira vez por pintores renascentistas italianos no século XV. Felizmente, podemos obter um efeito semelhante usando apenas uma matriz de projeção em perspectiva: var baseTransform = CATransform3DIdentity baseTransform.m34 = -1.0 / 400.0 baseTransform = CATransform3DRotate(baseTransform, 0.5, 0.0, 1.0, 0.0) baseTransform = CATransform3DRotate(baseTransform, -0.5, 1.0, 0.0, 0.0) Agora vamos ver o resultado: Melhor, não é? O termo em m34 é o que cria o efeito de perspectiva. Para a matemática real, consulte -1.0 / 400.0 https://www.scratchapixel.com/lessons/3d-basic-rendering/perspective-and-orthographic-projection-matrix/building-basic-perspective-projection-matrix.html Mapeando o ambiente Nosso objetivo é demonstrar um efeito de espelho, então precisaremos de algo para refletir. Em gráficos 3D, mapas de cubo são comumente usados para simular superfícies reflexivas. Em nosso exemplo, podemos criar um usando o cubo real que criamos anteriormente. Primeiro, atribuímos imagens aos rostos correspondentes: frontFace.contents = UIImage(named: "front")?.cgImage backFace.contents = UIImage(named: "back")?.cgImage leftFace.contents = UIImage(named: "left")?.cgImage rightFace.contents = UIImage(named: "right")?.cgImage topFace.contents = UIImage(named: "up")?.cgImage bottomFace.contents = UIImage(named: "down")?.cgImage Em seguida, para cada face, definimos e aumentamos o tamanho do cubo para . Isso basicamente coloca a "câmera" dentro do cubo: isDoubleSided = true cubeSize: CGFloat = 2000.0 Em seguida, como vamos criar vários cubos de uma só vez, vamos simplificar as funções de configuração: enum CubeFace: CaseIterable { case front case back case left case right case top case bottom func translationAndRotation(size: CGFloat) -> (translation: (x: CGFloat, y: CGFloat, z: CGFloat), rotation: (angle: CGFloat, x: CGFloat, y: CGFloat, z: CGFloat)) { switch self { case .front: return ((0.0, 0.0, size * 0.5), (0.0, 0.0, 1.0, 0.0)) case .back: return ((0.0, 0.0, -size * 0.5), (-.pi, 0.0, 1.0, 0.0)) case .left: return ((-size * 0.5, 0.0, 0.0), (-.pi * 0.5, 0.0, 1.0, 0.0)) case .right: return ((size * 0.5, 0.0, 0.0), (.pi * 0.5, 0.0, 1.0, 0.0)) case .top: return ((0.0, -size * 0.5, 0.0), (.pi * 0.5, 1.0, 0.0, 0.0)) case .bottom: return ((0.0, size * 0.5, 0.0), (-.pi * 0.5, 1.0, 0.0, 0.0)) } } func texture() -> UIImage? { ... } func color() -> UIColor { ... } } func setupFace( layer: CALayer, size: CGFloat, baseTransform: CATransform3D, face: CubeFace, textured: Bool ) { layer.bounds = CGRect(origin: CGPoint(), size: CGSize(width: size, height: size)) layer.isDoubleSided = textured let (translation, rotation) = face.translationAndRotation(size: size) var transform = baseTransform transform = CATransform3DTranslate(transform, translation.x, translation.y, translation.z) transform = CATransform3DRotate(transform, rotation.angle, rotation.x, rotation.y, rotation.z) layer.transform = transform if textured { layer.contents = face.texture()?.cgImage } else { layer.backgroundColor = face.color().cgColor } } func setupCube( view: UIView, size: CGFloat, textured: Bool, baseTransform: CATransform3D, faces: [CubeFace] ) -> CATransformLayer { let cubeLayer = CATransformLayer() cubeLayer.position = CGPoint(x: view.bounds.midX, y: view.bounds.midY) for face in faces { let faceLayer = CALayer() setupFace(layer: faceLayer, size: size, baseTransform: baseTransform, face: face, textured: textured) cubeLayer.addSublayer(faceLayer) } return cubeLayer } Agora, vamos renderizar o mapa do cubo e um cubo pequeno simultaneamente: var baseTransform = CATransform3DIdentity baseTransform.m34 = -1.0 / 400.0 baseTransform = CATransform3DRotate(baseTransform, 0.5, 0.0, 1.0, 0.0) view.layer.addSublayer(setupCube(view: view, size: 2000.0, textured: true, baseTransform: baseTransform)) view.layer.addSublayer(setupCube(view: view, size: 100.0, textured: false, baseTransform: baseTransform)) Reflexões O UIKit é uma estrutura robusta, mas carece de recursos integrados para efeitos visuais complexos. No entanto, oferece a capacidade de aplicar máscaras arbitrárias aos objetos, e é exatamente isso que vamos explorar para criar o efeito de espelho. Essencialmente, renderizaremos o ambiente seis vezes, cada uma mascarada pela face correspondente do cubo. O aspecto complicado é que não podemos mascarar diretamente um . No entanto, podemos contornar essa limitação aninhando-o dentro de um contêiner : CATransformLayer CALayer func setupReflectiveFace( view: UIView, size: CGFloat, baseTransform: CATransform3D, face: CubeFace ) -> CALayer { let maskLayer = CALayer() maskLayer.frame = view.bounds maskLayer.addSublayer(setupCube(view: view, size: size, textured: false, baseTransform: baseTransform, faces: [face])) let colorLayer = CALayer() colorLayer.frame = view.bounds colorLayer.mask = maskLayer colorLayer.addSublayer(setupCube(view: view, size: 2000.0, textured: true, baseTransform: baseTransform, faces: [.front, .back, .left, .right, .top, .bottom])) return colorLayer } E agora, nosso viewDidLoad deve ficar assim: var baseTransform = CATransform3DIdentity baseTransform.m34 = -1.0 / 400.0 baseTransform = CATransform3DRotate(baseTransform, 0.5, 0.0, 1.0, 0.0) for face in CubeFace.allCases { view.layer.addSublayer(setupReflectiveFace(view: view, size: 100.0, baseTransform: baseTransform, face: face)) } Esta imagem já se parece muito com o que pretendíamos alcançar, mas neste ponto, o cubo é apenas uma máscara 3D sobre o mapa do cubo. Então, como podemos transformá-lo em um espelho real? A dimensão do espelho Acontece que existe um método direto para espelhar o mundo em relação a um plano arbitrário no espaço 3D. Sem entrar em complexa, esta é a matriz que procuramos: matemática func mirrorMatrix(planePoint: Vector4D, planeTransform: CATransform3D, planeNormal: Vector4D) -> CATransform3D { let pt = applyTransform(transform: planeTransform, point: planePoint) let normalTransform = CATransform3DInvert(planeTransform).transposed let normal = applyTransform(transform: normalTransform, point: planeNormal).normalized() let a = normal.x let b = normal.y let c = normal.z let d = -(a * pt.x + b * pt.y + c * pt.z) return CATransform3D([ 1 - 2 * a * a, -2 * a * b, -2 * a * c, -2 * a * d, -2 * a * b, 1 - 2 * b * b, -2 * b * c, -2 * b * d, -2 * a * c, -2 * b * c, 1 - 2 * c * c, -2 * c * d, 0.0, 0.0, 0.0, 1.0 ]).transposed } Em seguida, incorporamos o seguinte código na função de configuração do cubo: func setupCube( view: UIView, size: CGFloat, textured: Bool, baseTransform: CATransform3D, faces: [CubeFace], mirrorFace: CubeFace? = nil ) -> CATransformLayer { ... if let mirrorFace { let mirrorPlane = mirrorFace.transform(size: size, baseTransform: baseTransform) let mirror = mirrorMatrix(planePoint: Vector4D(x: 0.0, y: 0.0, z: 0.0, w: 1.0), planeTransform: mirrorPlane, planeNormal: Vector4D(x: 0.0, y: 0.0, z: 1.0, w: 1.0)) cubeLayer.sublayerTransform = mirror } } E, finalmente, podemos contemplar o cubo brilhante que tanto almejamos: Por que UIKit? Claro, alcançar o mesmo efeito pode parecer mais fácil com Metal ou uma estrutura baseada em Metal como o SceneKit. Mas esses vêm com seu próprio conjunto de limites. O grande? Você não pode trazer visualizações UIKit ao vivo para o conteúdo 3D desenhado pelo Metal. O método que vimos neste artigo nos permite exibir todos os tipos de conteúdo em uma configuração 3D. Isso inclui mapas, vídeos e exibições interativas. Além disso, ele pode se misturar suavemente com qualquer animação UIKit que você queira usar. O código-fonte deste artigo, juntamente com algumas funções auxiliares, pode ser encontrado em https://github.com/petertechstories/uikit-mirrors Codificação feliz!
