Retroceso de la interfaz de usuario: creación de una barra de progreso retro para iOS usando CALayers

Me encanta crear componentes de interfaz de usuario. Me da una especie de placer estético verlos y usarlos después de realizar una construcción. Esto también se combina con mi amor por el ecosistema MacOS/iOS en general. Recientemente, me encargaron la tarea de crear una barra de progreso personalizada usando . No es gran cosa, pero probablemente el 99% de hayan creado uno desde cero en algún momento de sus carreras. En mi caso, quería hacer algo más que simplemente crear un par de con animaciones basadas en un rango de valores de 0 a 1. Buscaba una solución que fuera adecuada para muchos escenarios donde se necesita una barra de progreso. . UIKit los desarrolladores de iOS CALayer Quiero regresar a los días en que los componentes de la interfaz de usuario en el mundo de Apple se veían así: Reflexionando sobre la evolución del diseño de la interfaz de usuario, ha pasado casi una década desde que los elementos de la interfaz de usuario en el mundo Apple adoptaron un diseño plano con la introducción de iOS 7 en 2014. Entonces, dejemos que la nostalgia por las versiones anteriores de Mac OS e iOS y creemos una hermosa barra de progreso juntos. Si le gusta usar pero aún no está seguro de cómo manipular CALayers, este artículo le resultará útil. Aquí, analizaremos los desafíos típicos de diseño, animación y dibujo, brindando información y soluciones para ayudarlo en el camino. UIKit Desde UIView hasta la API de CALayers. La barra de progreso puede parecer sencilla, pero si profundizamos en los detalles, comprenderá que requiere muchas subcapas. No voy a profundizar en en detalle aquí. Puede consultar este artículo donde describí brevemente qué son y cómo funcionan: . CALayers CALayers https://hackernoon.com/rolling-numbers-animation-using-only-calayers Entonces, dividámoslo en pequeñas capas: Capa de fondo general Capa de máscara (parte animable) Capa de fondo de progreso Capa de resplandor Capa brillante La capa de fondo tiene dos capas secundarias adicionales: Capa de sombra interior Capa de degradado de borde Estructurémoslo correctamente: RetroProgressBar [UIView] |--General background [CALayer] |--Inner Shadow [CALayer] |--Border Gradient [CALayer] |--Progress Background Layer [CALayer] |--Animated Mask Layer [CALayer] |--Glare [CALayer] |--Shimering [CALayer] Brevemente, así es como debería funcionar: La barra de progreso debería reaccionar a un valor entre 0,0 y 1,0. Cuando el valor cambia, necesitamos ajustar el ancho de una capa según este valor: bounds.width * value Usando este simple cálculo, podemos modificar el ancho usando . Pero antes de hacer esto, debemos comprender qué capas deberían cambiar cuando cambia el valor. Revisemos la estructura e identifiquemos las capas que deben responder a los cambios de valores. CATransaction RetroProgressBar [UIView] |--General background [CALayer] |--Inner Shadow [CALayer] |--Border Gradient [CALayer] |--Progress Background Layer [CALayer] |--Animated Mask Layer [CALayer] : [Animated Width] |--Glare [CALayer] : [Animated Width] |--Shimering [CALayer] : [Animated Width] Parece que necesitamos desarrollar un protocolo que puedan adoptar las capas que necesitan un ancho animado según el valor. Protocolo ProgressAnimatable En protocolo, solo necesitamos dos métodos: cambiar el ancho de la capa con animación y sin ella. protocol ProgressAnimatable: CALayer { /// Sets the layer's width instantly to the specified value. func setToWidth(_ width: CGFloat) /// Animates the layer's width to the specified value. func animateToWidth(_ width: CGFloat, duration: TimeInterval, animationType: CAMediaTimingFunctionName, completion: (() -> Void)?) } Implementación: extension ProgressAnimatable { func setToWidth(_ width: CGFloat) { guard width >= 0 else { return } removeAllAnimations() CATransaction.begin() CATransaction.setDisableActions(true) self.bounds.size.width = width CATransaction.commit() } func animateToWidth(_ width: CGFloat, duration: TimeInterval, animationType: CAMediaTimingFunctionName = .easeInEaseOut, completion: (() -> Void)? = nil) { guard width >= 0, width != self.bounds.width else { completion?() return } let animation = CABasicAnimation(keyPath: "bounds.size.width") animation.fromValue = bounds.width animation.toValue = width animation.duration = duration animation.fillMode = .forwards animation.isRemovedOnCompletion = false animation.timingFunction = CAMediaTimingFunction(name: animationType) CATransaction.begin() CATransaction.setCompletionBlock { self.bounds.size.width = width completion?() } self.add(animation, forKey: "widthChange") CATransaction.commit() } } Ambos métodos utilizan . El primer método puede parecer extraño porque sólo necesitamos cambiar un valor sin animación. Entonces, ¿por qué es necesaria ? CATransaction CATransaction Intente crear un básico y cambiar su ancho o alto sin ninguna animación. Cuando ejecuta una compilación, notará que cambia con una animación. ¿Cómo es esto posible? En Core Animation, los cambios en las propiedades de la capa (como límites, posición, opacidad, etc.) generalmente se animan según la acción predeterminada asociada con esa propiedad. Este comportamiento predeterminado tiene como objetivo proporcionar transiciones visuales fluidas sin la necesidad de animaciones explícitas para cada cambio de propiedad. CALayer CALayer Esto significa que debemos deshabilitar explícitamente las acciones en . Al configurar , se asegura de que el ancho de la capa se actualice instantáneamente al nuevo valor sin ninguna transición animada intermedia. CALayer CATransaction.setDisableActions(true) El segundo método ofrece una forma flexible y reutilizable de animar el ancho de cualquier capa que cumpla con el protocolo . Proporciona control sobre la duración y el ritmo de la animación e incluye una opción para una acción de finalización. Esto lo hace adecuado para diversas necesidades de animación dentro del marco UIKit. ProgressAnimatable Nuestros candidatos para ajustarse a este protocolo serán tres capas: Capa de máscara animada, Capa de deslumbramiento y Capa brillante. Sigamos adelante y lo implementemos. Capa de máscara de progreso Es hora de ajustarnos a nuestro protocolo, y la capa más importante en esta configuración será nuestra general. ¿Por qué necesitamos esta máscara? ¿Por qué no puede ser simplemente un con un ancho animado? Como , especialmente uno que se centra en el desarrollo front-end, a menudo necesita anticipar posibles casos de uso para sus componentes. En mi caso, hay una capa de fondo de progreso. Este no es un animado, pero ¿y si estuviera animado con algo como ? Si le preocupa el rendimiento, probablemente considere que dicha capa debe renderizarse una vez y luego simplemente realizar su animación. Por eso esta mascarilla puede resultar de gran utilidad. Permite una renderización eficiente y al mismo tiempo ofrece la flexibilidad necesaria para diversos escenarios de animación. CAShapeLayer CALayer ingeniero de iOS CALayer CAReplicatorLayer final class ProgressMaskLayer: CAShapeLayer, ProgressAnimatable { override init() { super.init() backgroundColor = UIColor.black.cgColor anchorPoint = CGPoint(x: 0, y: 0.5) } override init(layer: Any) { super.init(layer: layer) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } } Echemos un vistazo a esta línea: anchorPoint = CGPoint(x: 0, y: 0.5) Esta línea es crucial para nuestra barra de progreso. De forma predeterminada, están centradas, con el ubicado en el centro de la capa, no en el medio del borde izquierdo como comúnmente se supone. El es el punto alrededor del cual ocurren todas las transformaciones de la capa. Para una capa utilizada como barra de progreso, esta configuración generalmente significa que cuando el ancho de la capa cambia, se expande igualmente en ambas direcciones desde el . Sin embargo, si ajustamos el al centro del borde izquierdo, la capa se expandirá solo hacia la derecha mientras el borde izquierdo permanece fijo en su lugar. Este comportamiento es esencial para una barra de progreso, ya que garantiza que el crecimiento de la barra aparezca desde un lado y no desde ambos. CALayers anchorPoint anchorPoint anchorPoint anchorPoint private let progressMaskLayer = ProgressMaskLayer() private let progressBackgroundLayer = ProgressBackgroundLayer() public init() { super.init(frame: .zero) layer.addSublayer(progressMaskLayer) layer.addSublayer(progressBackgroundLayer) progressBackgroundLayer.mask = progressMaskLayer } En el fragmento anterior, inicializamos dos partes principales de la barra de progreso: y . Echemos un vistazo al segundo. ProgressMaskLayer ProgressBackgroundLayer final class ProgressBackgroundLayer: CAGradientLayer { override init() { super.init() locations = [0, 0.5, 1] } override init(layer: Any) { super.init(layer: layer) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func layoutSublayers() { super.layoutSublayers() colors = [ backgroundColor?.lightened(by: 0.3), backgroundColor, backgroundColor?.darkened(by: 0.5) ].compactMap({ $0 }) } } Como puede ver, es un que presenta tres colores. Esta implementación transforma un color inyectado en un degradado vertical, mejorando la visibilidad de la barra de progreso y dándole una apariencia más voluminosa. CAGradientLayer Para que esto sea posible, preparé dos métodos en una extensión . Por diversión, elegí no convertir nuevamente a , sino jugar únicamente dentro del ámbito de : CGColor CGColor UIColor CGColor extension CGColor { func darkened(by value: CGFloat) -> CGColor { guard let colorSpace = self.colorSpace, let components = self.components, colorSpace.model == .rgb, components.count >= 3 else { return self } let multiplier = 1 - min(max(value, 0), 1) let red = components[0] * multiplier let green = components[1] * multiplier let blue = components[2] * multiplier let alpha = components.count > 3 ? components[3] : 1.0 return CGColor( colorSpace: colorSpace, components: [red, green, blue, alpha] ) ?? self } func lightened(by value: CGFloat) -> CGColor { guard let colorSpace = self.colorSpace, let components = self.components, colorSpace.model == .rgb, components.count >= 3 else { return self } let red = min(components[0] + value, 1.0) let green = min(components[1] + value, 1.0) let blue = min(components[2] + value, 1.0) let alpha = components.count > 3 ? components[3] : 1.0 return CGColor( colorSpace: colorSpace, components: [red, green, blue, alpha] ) ?? self } } Como puedes ver, no es demasiado complicado. Solo necesitamos obtener , ( , , y ) y . Esto significa que, en función del valor, podemos calcular un nuevo color: más oscuro o más claro. colorSpace components red green blue alpha model Capa de resplandor Avancemos para hacer que nuestra barra de progreso tenga un aspecto más 3D. Ahora necesitamos agregar otra capa, a la que llamaremos Glare. Es una implementación sencilla, pero debe ajustarse al protocolo . ProgressAnimatable final class ProgressGlareLayer: CALayer, ProgressAnimatable { override init() { super.init() backgroundColor = UIColor.white.withAlphaComponent(0.3).cgColor anchorPoint = CGPoint(x: 0, y: 0.5) } override init(layer: Any) { super.init(layer: layer) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } } Para simplificar las cosas, aquí solo necesitamos que el color de fondo sea blanco con un alfa de 0,3. Little Nice Shimmering (capa brillante) Sé que algunos podrían decir que MacOS X o iOS anteriores a la versión 6 no tenían componentes de interfaz de usuario con efectos brillantes como este. Pero, como dije, esto es como una película inspirada en una historia real. Este brillo acentúa el efecto 3D y lo hace más visible. final class ShimmeringLayer: CAGradientLayer, ProgressAnimatable { let glowColor: UIColor = UIColor.white private func shimmerAnimation() -> CABasicAnimation { let animation = CABasicAnimation(keyPath: "locations") animation.fromValue = [-1.0, -0.5, 0.0] animation.toValue = [1.0, 1.5, 2.0] animation.duration = 1.5 animation.repeatCount = Float.infinity return animation } private func opacityAnimation() -> CABasicAnimation { let animation = CABasicAnimation(keyPath: "opacity") animation.fromValue = 1.0 animation.toValue = 0.0 animation.duration = 0.1 // Quick transition to transparent animation.beginTime = shimmerAnimation().duration animation.fillMode = .forwards animation.isRemovedOnCompletion = false return animation } private func animationGroup() -> CAAnimationGroup { let pauseDuration = 3.0 // Duration of pause between shimmering let shimmerAnimation = shimmerAnimation() let opacityAnimation = opacityAnimation() let animationGroup = CAAnimationGroup() animationGroup.animations = [shimmerAnimation, opacityAnimation] animationGroup.duration = shimmerAnimation.duration + pauseDuration animationGroup.repeatCount = Float.infinity return animationGroup } override init() { super.init() setupLayer() } override init(layer: Any) { super.init(layer: layer) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func layoutSublayers() { super.layoutSublayers() startAnimation() } private func setupLayer() { let lightColor = UIColor.white.withAlphaComponent(0.7).cgColor let darkColor = UIColor.white.withAlphaComponent(0).cgColor colors = [ darkColor, lightColor, darkColor ] anchorPoint = CGPoint(x: 0, y: 0.5) locations = [0.0, 0.5, 1.0] startPoint = CGPoint(x: 0.0, y: 0.5) endPoint = CGPoint(x: 1.0, y: 0.5) shadowColor = glowColor.cgColor shadowRadius = 5.0 shadowOpacity = 1 shadowOffset = .zero } private func startAnimation() { if animation(forKey: "shimmerEffect") == nil { let animationGroup = animationGroup() add(animationGroup, forKey: "shimmerEffect") } } } Aquí, necesitamos dos animaciones (Opacidad y Ubicación) combinadas en un . Además, usar nos permite organizar una pausa entre sesiones de animación. Esta característica es bastante útil porque es posible que los clientes también quieran controlar esta propiedad. CAAnimationGroup CAAnimationGroup Como puedes ver en la imagen, esto añade más efectos 3D, pero no es suficiente. Sigamos adelante. Capa de fondo Necesitamos trabajar con nuestra capa de fondo estática, que se encuentra debajo de la Línea de Progreso animada. Si recuerdas, tenemos dos subcapas adicionales allí: la Sombra interior y el Degradado del borde. |--General background [CALayer] |--Inner Shadow [CALayer] |--Border Gradient [CALayer] Yo diría que estas dos capas fueron bastante populares en las consultas de búsqueda hace varios años, posiblemente debido a las tendencias de la interfaz de usuario. Creemos nuestras propias versiones e inmortalicémoslas en este artículo para las generaciones futuras :) Capa de sombra interior La clase está diseñada para crear una capa con un efecto de sombra interior, que puede ser una forma visualmente atractiva de agregar profundidad a los elementos de la interfaz de usuario. final class InnerShadowLayer: CAShapeLayer { override init() { super.init() masksToBounds = true shadowRadius = 3 shadowColor = UIColor.black.cgColor shadowOffset = CGSize(width: 0.0, height: 1.0) shadowOpacity = 0.5 } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func layoutSublayers() { super.layoutSublayers() // Creates a path for the shadow that extends slightly outside the bounds of the layer. let shadowPath = UIBezierPath(roundedRect: bounds.insetBy(dx: -5, dy: -5), cornerRadius: cornerRadius) // Creates a cutout path that is the inverse of the layer's bounds. let cutoutPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).reversing() shadowPath.append(cutoutPath) self.shadowPath = shadowPath.cgPath } } Necesitamos un porque tenemos que configurar . Para eso, necesitamos crear un camino para la sombra que se extienda ligeramente fuera de los límites de la capa usando from limits. Y luego otro : un camino recortado que es el inverso de los límites de la capa. CAShapeLayer shadowPath insetBy UIBezierPath En la ilustración, ya casi está allí. Pero necesitamos la última capa, que nos devolverá a MacOS X Leopard. Capa de degradado de borde Es una subclase de diseñada para crear un borde degradado alrededor de una capa. Utiliza como máscara para lograr el efecto de borde. está configurado con un color de trazo (inicialmente negro) y sin color de relleno y se usa como máscara para . Esta configuración permite que el degradado sea visible solo donde la tiene un trazo, creando efectivamente un borde de degradado. CAGradientLayer CAShapeLayer shapeLayer BorderGradientLayer shapeLayer final class BorderGradientLayer: CAGradientLayer { let shapeLayer: CAShapeLayer = { let layer = CAShapeLayer() layer.strokeColor = UIColor.black.cgColor // Temporary color layer.fillColor = nil return layer }() init(borderWidth: CGFloat, colors: [UIColor]) { super.init() self.mask = shapeLayer self.colors = colors.map { $0.cgColor } self.setBorderWidth(borderWidth) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func layoutSublayers() { super.layoutSublayers() shapeLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath } func setBorderWidth(_ borderWidth: CGFloat) { self.shapeLayer.lineWidth = borderWidth } } El inicializador de acepta un y una matriz de para el degradado. Configura los colores del degradado, aplica el ancho del borde a y usa como máscara para restringir el degradado al área del borde. BorderGradientLayer borderWidth UIColor shapeLayer shapeLayer El método garantiza que la ruta de se actualice para que coincida con los límites de la capa y el radio de las esquinas, asegurándose de que el borde se ajuste a la capa correctamente. El método permite el ajuste dinámico del ancho del borde después de la inicialización. layoutSublayers shapeLayer setBorderWidth Mucho mejor. De acuerdo. Dejemos de hacer cosas visuales y trabajemos en la lógica. Todos juntos Ahora es el momento de combinar todas estas capas y dejarlas cobrar vida. private lazy var backgroundLayer = BackgroundLayer( borderWidth: borderWidth, colors: borderColors ) private let glareLayer = ProgressGlareLayer() private let shimmeringLayer = ShimmeringLayer() private let progressMaskLayer = ProgressMaskLayer() private let progressBackgroundLayer = ProgressBackgroundLayer() public init() { super.init(frame: .zero) layer.backgroundColor = UIColor.white.cgColor layer.masksToBounds = true layer.addSublayer(progressMaskLayer) layer.addSublayer(progressBackgroundLayer) layer.insertSublayer(backgroundLayer, at: 0) progressBackgroundLayer.addSublayer(shimmeringLayer) progressBackgroundLayer.addSublayer(glareLayer) progressBackgroundLayer.mask = progressMaskLayer } Echemos un vistazo a cómo vamos a tratar con todas las capas que deberían cambiar su ancho con la animación: public func setValueWithAnimation(_ value: Double, duration: TimeInterval = 1.0, animationType: CAMediaTimingFunctionName = .easeInEaseOut, completion: (() -> Void)? = nil) { let newWidth = calculateProgressWidth(value) let animationGroup = DispatchGroup() animationGroup.enter() shimmeringLayer.animateToWidth( newWidth - WIDTH_ANIMATABLE_INSET, duration: duration, animationType: animationType, completion: animationGroup.leave ) animationGroup.enter() progressMaskLayer.animateToWidth( newWidth, duration: duration, animationType: animationType, completion: animationGroup.leave ) animationGroup.enter() glareLayer.animateToWidth( newWidth - WIDTH_ANIMATABLE_INSET, duration: duration, animationType: animationType, completion: animationGroup.leave ) animationGroup.notify(queue: .main) { completion?() } } Primero, necesitamos preparar un ancho a partir de un valor. El valor debe ser menor que 0 y mayor que 1. Además, debemos tener en cuenta el posible ancho del borde. fileprivate func normalizeValue(_ value: Double) -> Double { max(min(value, 1), 0) } private func calculateProgressWidth(_ value: Double) -> CGFloat { let normalizedValue = normalizeValue(value) let width = bounds.width * normalizedValue - borderWidth return width } Para lograr el efecto 3D correcto, las capas de brillo y brillo deben tener un poco de relleno en los lados derecho e izquierdo: newWidth - WIDTH_ANIMATABLE_INSET Y finalmente, el método utiliza un grupo de animación ( ) para sincronizar las animaciones de tres capas: , y . El ancho de cada capa se anima al ancho calculado (ajustado por para y para ajustarse al diseño) durante la duración especificada y con la curva de animación especificada. DispatchGroup shimmeringLayer progressMaskLayer glareLayer WIDTH_ANIMATABLE_INSET shimmeringLayer glareLayer Las animaciones se coordinan mediante , lo que garantiza que todas las animaciones comiencen simultáneamente y que el cierre de finalización se llame solo después de que todas las animaciones hayan finalizado. Este método proporciona una forma visualmente atractiva de actualizar el valor de la barra de progreso con una animación fluida y sincronizada en sus diversas capas decorativas. DispatchGroup Código fuente La última versión existe como paquete Swift y Pod. Así que puedes obtenerlo desde aquí . Por cierto, ¡las contribuciones son bienvenidas! Repositorio de Retro Progress Bar Uso Crea una instancia de RetroProgressBar. Puede agregarlo a su jerarquía de vistas como lo haría con cualquier UIView. let progressBar = RetroProgressBar() Personalización: progressBar.progressColor = UIColor.systemBlue progressBar.cornerRadius = 5.0 progressBar.borderWidth = 2.0 progressBar.borderColors = [UIColor.white, UIColor.gray] Para cambiar el valor con animación: progressBar.setValueWithAnimation(0.75, duration: 1.0, animationType: .easeInEaseOut) { print("Animation Completed") } Sin animación: progressBar.setValue(0.5) Pensamientos finales Recrear esta barra de progreso de estilo antiguo ha sido una inmersión nostálgica en la estética que extraño profundamente. Trabajar con UIKit y me recordó la versatilidad y el poder de nuestras herramientas como desarrolladores. Este proyecto no se trataba sólo de implementación técnica; fue un viaje de regreso a una querida era del diseño, demostrando que todavía podemos crear cualquier cosa, incluido el encanto atemporal de los diseños más antiguos. CALayer Esta experiencia ha sido un conmovedor recordatorio de que en , la simplicidad y la nostalgia pueden coexistir maravillosamente, uniendo el pasado y el presente. el diseño de la interfaz de usuario ¡Feliz codificación!