salvapantallas - iOS 7.1 deslice para desbloquear la animación de texto
reloj analogico iphone (8)
Creo que es una vista semitransparente, pero es una vista especial en la que se anula el dibujo para colorear cada píxel de las letras con el mismo color (pero más fuerte para hacerlo visible) del píxel en la vista que se encuentra debajo. Imagina esto como la vista de aumento. muestra una versión ampliada de la vista debajo de ella.
No estoy seguro de si esto se ha preguntado antes, pero me cuesta mucho encontrarlo. Tal vez no esté usando los términos de búsqueda correctos, por lo que si ya existe una respuesta, si alguien pudiera apuntarme en la dirección correcta, ¡sería muy apreciado!
Acabo de notar que la animación de brillo en el texto "deslizar para desbloquear" de la pantalla de bloqueo ha cambiado con la actualización de iOS 7.1. El foco ahora tiene una forma ovular / diamante que cae en cascada sobre las letras sin aparecer en la vista detrás de él.
En el pasado, he replicado este tipo de característica cambiando el color de las letras individuales de forma secuencial, pero para esto, la animación pasa por la mitad de las letras. Sin afectar el fondo.
¿Cómo puedo replicar esto?
Debería poder usar la propiedad de mask de CALayer para crear un recorte de los contenidos de otra capa.
Configure la máscara para que contenga su texto (quizás un CATextLayer puede funcionar aquí). Esto es lo que Shimmer dice que usa.
Haz que el color de primer plano de tu etiqueta sea un UIColor iniciado con
+colorWithPatternImage o
-initWithPatternImage
utilizando una imagen animada y configurando el color de fondo de la etiqueta en transparente. No he probado esto, pero no veo por qué no funcionaría.
Haz una capa en la parte superior que tenga capas recortadas con un PNG animado o algo como fondo.
Bajo esta capa, tenga otra capa con exactamente la transparencia inversa (las letras son opacas y el espacio entre las letras es transparente).
De esta manera, el usuario ve a través de las letras a la animación, y entre las letras a lo que sea que las letras hayan terminado.
Solo asegúrese de tener código para mantener las capas en el orden correcto.
La forma más efectiva que he encontrado para recrear el efecto de texto brillante es usar el Shimmer Cocoapod creado por Facebook. A continuación se muestra la imagen de ejemplo del repositorio de Shimmer GitHub, que se encuentra en la siguiente URL: Shimmer
Hay instrucciones completas para instalar y usar Shimmer en el repositorio, pero lo esencial es que después de instalar el Cocoapod, agregará una subvista o capa especial a la que irán los contenidos que desea que tengan brillo / brillo, y luego establecerá el efecto comienzo.
La mejor manera de hacerlo es con un objeto de múltiples capas.
Arriba: UILabel con fondo opaco y texto claro.
- El texto claro se representa en drawRect: func a través de un complicado proceso de enmascaramiento
Medio: Vista del trabajador que realiza una animación repetida moviendo una imagen detrás de la etiqueta superior
Inferior: una vista UIV a la que agrega la subvista media y superior en ese orden. Puede ser del color que quieras que sea el texto.
Un ejemplo se puede ver aquí https://github.com/jhurray/AnimatedLabelExample
Puedes animar el texto de la etiqueta y usar un control deslizante personalizado para él, espero que te ayude a:
CALayer *maskLayer = [CALayer layer];
// Mask image ends with 0.15 opacity on both sides. Set the background color of the layer
// to the same value so the layer can extend the mask image.
maskLayer.backgroundColor = [[UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.15f] CGColor];
maskLayer.contents = (id)[[UIImage imageNamed:@"Mask.png"] CGImage];
// Center the mask image on twice the width of the text layer, so it starts to the left
// of the text layer and moves to its right when we translate it by width.
maskLayer.contentsGravity = kCAGravityCenter;
maskLayer.frame = CGRectMake(myLabel.frame.size.width * -1, 0.0f, myLabel.frame.size.width * 2, myLabel.frame.size.height);
// Animate the mask layer''s horizontal position
CABasicAnimation *maskAnim = [CABasicAnimation animationWithKeyPath:@"position.x"];
maskAnim.byValue = [NSNumber numberWithFloat:myLabel.frame.size.width];
maskAnim.repeatCount = 1e100f;
maskAnim.duration = 1.5f;
[maskLayer addAnimation:maskAnim forKey:@"slideAnim"];
myLabel.layer.mask = maskLayer;
Trate de tener un primer plano semitransparente con recortes transparentes para las letras. El "brillo" se puede mover a través de los recortes.