Cómo desactivar el efecto de paralaje. Efecto de paralaje en aplicaciones iOS

Otra nota informativa se referirá al paralaje, que apareció junto con la séptima versión de iOS. En este artículo intentaremos dar respuesta a las principales preguntas que preocupan al usuario. Entonces, ¿qué es este fondo de pantalla panorámico y cómo configurar un fondo de pantalla dinámico, cómo deshabilitar el efecto de paralaje?

Fotografías panorámicas en los "siete"

Las imágenes panorámicas ya estaban presentes en la primera versión beta de iOS 7. Esta función hizo posible establecer grandes panorámicas como fondo de pantalla en la pantalla de inicio o en la pantalla de bloqueo. Después de la instalación, el usuario podía girar su dispositivo iOS 7 en sus manos y la foto se movía en la pantalla según el ángulo en el que se giraba el teléfono inteligente o la tableta.

En la sexta versión beta, por alguna razón, se eliminó tal efecto de iOS 7. Es por eso que el iOS 7 puro original no tiene una función como panoramas. Usted, por supuesto, se sorprenderá y preguntará: "¿Dónde están?" Fueron reemplazados por el efecto de paralaje. Por supuesto, puede poner panorámicas, pero no verá el mismo efecto que estaba presente en iOS 7 beta 1.

Efecto de paralaje

Ahora echemos un vistazo al paralaje. Esta es una gran innovación que permite que los iconos y fondos de pantalla de la pantalla de inicio vivan una vida separada entre sí. El papel tapiz está en un plano y los íconos en otro. El dispositivo de iOS 7 lee la información del giroscopio y mueve estos dos planos entre sí para que, como resultado del movimiento, veamos aquellas partes de la imagen que antes estaban "detrás de escena". Debido a estas manipulaciones, el usuario tiene una sensación de profundidad y multidimensionalidad.

Cuando explicamos qué es el efecto de paralaje y cómo funciona en iOS 7, queda claro que definiciones como "fondos de pantalla panorámicos" o "fondos de pantalla de paralaje" engañan a los usuarios. De hecho, desde el punto de vista de la comprensión del proceso y del idioma ruso, estas son funciones diferentes, de hecho, son exactamente la misma acción. Los llamados "fondos de pantalla panorámicos" no son más que simples fotografías que se diferencian de otras imágenes solo en su resolución.

Para obtener estos "fondos de pantalla panorámicos", los usuarios solo tendrán que guardar cualquier foto en la resolución requerida y luego cargarla en su tableta, teléfono inteligente o reproductor iOS. Si no hace esto o coloca una foto que se usó en la sexta versión del sistema operativo, puede aparecer un defecto desagradable con el estiramiento.

Resoluciones de fotos, si desea obtener un efecto de paralaje en la pantalla de trabajo (entre paréntesis hemos indicado la resolución estándar recomendada para fotos sin paralaje de la sexta versión de iOS):

  • Tableta iPad 2 - 1424 x 1424 (1024 x 1024)
  • IPad Mini - 1424 x 1424 (1024 x 1024)
  • Aypad 3 - 2448 x 2448 (2048 x 2048)
  • IPad 4 - 2448 x 2448 (2048 x 2048)
  • IPhone 4S - 1360 x 1040 (960 x 640)
  • IPhone 5, 5S, 5C -1536 a 1040 (1136 x 640)
  • IPod de quinta generación: 1536 x 1040 (1136 x 640)
  • IPhone 4: no admite paralaje (960 x 640)

Ya en la actualidad, muchas personas se dedican a la creación de varias colecciones con estos protectores de pantalla, incluso existen aplicaciones "Salvapantallas dinámicos y de paralaje" a través de las cuales puede descargar nuevas imágenes. Pero ahora sabemos que todo es más sencillo de lo que parece. Estas aplicaciones son solo otro intento de ahorrar dinero.

¿Cómo hacer tú mismo fotos con este efecto?

Puedes hacer todo con un editor de imágenes. La opción más popular es, por supuesto, Photoshop. Lo principal que deberá hacer es elegir la resolución correcta adecuada para su dispositivo (arriba hemos escrito todos los permisos para todos los dispositivos). Una vez que tenga una imagen con la resolución deseada, deberá cargarla en su dispositivo de una de estas formas:

  1. Envíe la imagen a sí mismo por correo electrónico y luego guárdela en la película;
  2. Sube a Dropbox y vuelve a guardar en la galería de fotos;
  3. Descarga de acuerdo con el esquema estándar a través de iTunes.
¿Cómo apago el paralaje?

A algunos usuarios no les gusta esta innovación. Puede desactivarlo en la configuración. Configuración, luego Básico, luego Accesibilidad, luego Reducir movimiento. Haga clic en el interruptor "Reducir movimiento"; al presionarlo, puede apagar el prallax.

Imágenes dinámicas

En las actualizaciones de iOS 7, aparecieron fotos dinámicas. Las imágenes dinámicas se pueden configurar en la configuración. Vaya a Configuración, allí encontramos la pestaña "Fondo de pantalla y brillo", luego encontramos allí "Selección de fondo de pantalla" - Dinámico. Las imágenes dinámicas se diferencian entre sí solo en color. Por el momento, Apple solo ofrece 7 opciones. Las imágenes dinámicas permiten que los elementos del fondo de pantalla se muevan / cambien la transparencia / disminuyan en tiempo real.

Quizás el consejo más importante es no actualizar a iOS 10 si tiene un iPhone o iPad antiguo. Aunque, dado que estás leyendo este artículo, es demasiado tarde para darte ese consejo. Pero no se desespere, ¡hay otras formas probadas!

Dale tiempo a iOS 10

El nuevo iOS está repleto de varias funciones que comienzan a indexar datos después del lanzamiento inicial y consumen una gran cantidad de recursos. Por ejemplo, la galería incorporada escanea todas sus fotos, detecta caras y puede causar desaceleración y una menor respuesta del sistema.

Para salvar sus nervios, solo necesita darle tiempo a iOS para completar todos los procesos después del lanzamiento inicial. Esto suele tardar unas ocho horas, por lo que es conveniente actualizar por la noche y dejar tu iPhone o iPad solo durante la noche. Por la mañana notarás que el sistema es más rápido.

Desactivar el efecto de paralaje

IOS 10 introduce aún más animación, lo que ejerce una presión significativa sobre los procesadores de iPhone y iPad, especialmente en dispositivos más antiguos. Si los iconos del escritorio no se mueven cuando inclina su teléfono inteligente o tableta, tiene muy poco que perder. Pero todo se abrirá mucho más rápido.

"Configuración" → "General" → "Accesibilidad" → "Reducir movimiento"

El interruptor de palanca que necesitamos está oculto en las profundidades de la configuración. Hacemos clic y disfrutamos.

Reducir la transparencia de la interfaz

Otro efecto decorativo. Hay muchos elementos semitransparentes en la interfaz de iOS 10, que van desde el dock hasta varias ventanas emergentes. Si lo desactiva, toda esta belleza con efectos de vidrio esmerilado será reemplazada por sustratos grises duros, pero no desperdiciará recursos adicionales en el renderizado.


"Configuración" → "General" → "Accesibilidad" → "Aumentar el contraste" → "Reducir la transparencia"

El interruptor de palanca de opacidad se encuentra en la sección Aumentar contraste junto a Disminuir movimiento.

Desactivar la actualización de la aplicación en segundo plano

Actualizar datos en segundo plano es algo útil, pero ¿valen la pena los tres segundos de espera por una transmisión en Twitter o Facebook la carga adicional de CPU en su dispositivo iOS, que ya está luchando por hacer frente? Además, también es una carga para la batería, privándote de varios minutos de duración de la batería.


"Configuración" → "General" → "Actualización de contenido"

Hay una sección completa en la configuración con una lista de todas las aplicaciones instaladas. Debe ir allí y asegurarse de que los interruptores de palanca estén encendidos solo frente a las aplicaciones realmente necesarias. Mejor aún, desactive la actualización por completo.

Libera espacio de almacenamiento

Probablemente sepa que iOS a veces se comporta de manera extraña cuando hay poco espacio libre en el disco. iOS 10 no es una excepción: si el almacenamiento de su iPhone o iPad está lleno, el sistema comienza a ralentizarse.


"Configuración" → "General" → "Uso de almacenamiento e iCloud"

Eche un vistazo a las estadísticas de uso y realice una auditoría. Es recomendable tener al menos 1 GB de espacio libre. Si desinstalar aplicaciones no da los resultados deseados, use la limpieza.

Reinicia tu iPhone o iPad

Si aún no lo ha hecho, asegúrese de reiniciar su dispositivo iOS. Después de habilitar, se eliminan los archivos temporales, el caché y otras cosas que pueden ralentizar el sistema. Un iOS 10 recién instalado tendrá una gran cantidad de esta basura, así que no sea perezoso para reiniciar y eliminar todo lo innecesario.


apple.com

Para reiniciar, debe presionar y mantener presionados simultáneamente el botón Inicio y el botón de encendido hasta que la pantalla se vuelva blanca y aparezca el logotipo de Apple. Alternativamente, puede simplemente apagar y encender su iPhone o iPad. El efecto será similar.

La idea de utilizar paralaje en el diseño de aplicaciones móviles no es nueva. Como muchos otros, vino a nosotros desde el mundo del diseño web, donde al principio se convirtió en una dirección muy común. Parallax le da al diseño un impresionante efecto de profundidad y volumen aparente. A estas alturas, debido a algunos inconvenientes asociados con las características específicas del desarrollo de aplicaciones web, la moda del paralaje en el diseño de sitios ha disminuido. Sin embargo, las aplicaciones móviles son una historia completamente diferente. El paralaje en el diseño móvil sigue vivo y no se irá a ninguna parte, e incluso se agrega de forma predeterminada a diseño del nuevo iOS 7 !

En este artículo te contaremos sobre nuestro componente DVParallaxView y demostraremos, usando su dispositivo como ejemplo, cómo agregar exactamente el mismo efecto de paralaje a la aplicación que en la pantalla de inicio en iOS 7. Y aún mejor.

¿Cómo funciona el paralaje?

Divaguemos por un momento en el duro mundo de la física para comprender y estructurar mejor el mecanismo del efecto de paralaje. Esto nos ayudará a reproducirlo fielmente en la pantalla del teléfono.

Entonces, ¿cómo funciona el paralaje? Su esencia es bastante simple. El paralaje es un cambio en la posición del mismo objeto visto desde dos puntos diferentes en el espacio. Puede observar este efecto en el mundo real en cualquier momento. Todo lo que necesitas es algo grande que actúe como fondo (por ejemplo, la pared de una casa) y algún objeto observado contra este fondo, que esté más cerca de ti que el fondo (por ejemplo, un poste de luz o un árbol). Si camina a lo largo de la pared mientras observa el poste de luz, le parecerá que el poste de luz se está moviendo en relación con la pared. Este efecto se llama paralaje: el desplazamiento aparente del pilar en relación con la pared cuando mueve el punto de observación, es decir, usted. En este caso, cuanto más cerca esté el poste de usted, mayor será la velocidad de su desplazamiento. Por el contrario, si se mueve una distancia considerable del poste y trata de caminar a lo largo de la pared de la casa nuevamente, el poste prácticamente no se moverá en relación con la pared. Nuestros ojos están acostumbrados a evaluar la distancia a los objetos de muchas formas, y una de ellas es la velocidad relativa del desplazamiento del objeto. Si observa una escena en la que los objetos se mueven a diferentes velocidades a medida que usted se mueve, sus ojos le dicen inmediatamente a su cerebro que los objetos están a diferentes distancias de usted. Ésta es la belleza de usar paralaje en el diseño: simulándolo, agregará profundidad a una escena plana.

Entonces, en un sentido práctico para nosotros, el efecto de paralaje es que los objetos ubicados a diferentes distancias de usted se mueven en relación con usted a diferentes velocidades. Además, esta velocidad está inversamente relacionada con su distancia a los objetos. Si está cerca, la velocidad del objeto es alta, si está lejos, todo lo contrario.

Destaquemos los principales componentes de este efecto. En primer lugar, para un paralaje pronunciado, es deseable tener un fondo que sea idealmente estacionario, o cuyo desplazamiento sea insignificante en comparación con otros objetos. En segundo lugar, el paralaje solo se puede observar cuando hay objetos que llenan el espacio entre el fondo y el punto de observación. Y lo más importante en estos objetos es la diferencia en su distancia de ti. En otras palabras, los objetos deben formar una especie de jerarquía, alineándose a diferentes distancias desde el punto de vista al fondo. Y, finalmente, en tercer lugar, el paralaje es imposible sin el movimiento de los objetos en relación con el punto de observación a diferentes velocidades.

Con los tres puntos principales: fondo, objetos y movimiento relativo, observaremos el paralaje.

Desplazamiento de paralaje

Ahora que sabemos cómo funciona el paralaje, debemos decidir exactamente cómo lo implementaremos en el código.

El enfoque más obvio para implementar el paralaje es el desplazamiento de paralaje. ¿Jugaste viejos juegos de plataformas? Si es así, lo más probable es que recuerdes que mientras el personaje corría desde el extremo izquierdo del nivel hacia la derecha, los objetos del fondo se movían en la dirección opuesta a diferentes velocidades dependiendo de la distancia esperada desde el primer plano. Aquí tienes un enlace a Wikipedia para que recuerdes exactamente de qué estamos hablando.

El desplazamiento de Parallax en los juegos se diseñó de tal manera que la escena que ves en la pantalla consta de varias capas en las que se ubican los objetos. Dependiendo de la distancia estimada de la capa a la pantalla (la capa "bosque" está más cerca de usted que la capa de "nubes", que están más cerca de usted que la capa "sol"), las capas se desplazan a cierta velocidad. Esto le da cierta profundidad a lo que está sucediendo en la pantalla, haciendo que una imagen plana parezca más voluminosa. Es cierto que este enfoque encaja bastante bien con lo que hemos aprendido sobre el paralaje. De hecho, puede dividir mentalmente el espacio entre usted y el fondo en capas que contienen objetos en este espacio.

Es lógico suponer que la implementación del efecto de paralaje debe encapsularse en un componente contenedor que contiene otros componentes y tiene una especie de jerarquía de vistas, cuya posición cambiará una distancia dependiendo de la posición en la jerarquía. Pensemos en ello, ¿hay algún elemento en UIKit que ya contenga una característica similar? ¡Por supuesto que sí! Cualquier UIView contiene una jerarquía de otros UIViews colocados en él por el método addSubview :.

Aquí llegamos a la idea principal detrás de nuestro componente DVParallaxView. La idea es que el componente sea descendiente de UIView, encapsulando el efecto de paralaje. El efecto en sí se implementará pasando un nuevo valor a la propiedad contentOffset de tipo CGPoint. Por lo tanto, DVParallaxView tiene un significado similar a UIScrollView. Cuando cambiamos el valor contentOffset, cambiaremos la posición de cada vista que está en la jerarquía DVParallaxView. La cantidad de desplazamiento estará inversamente relacionada con la distancia del elemento desde la "cima" de la jerarquía. Y dado que los elementos en la matriz de subvistas se almacenan comenzando desde el más bajo en la jerarquía (es decir, desde el más alejado de la pantalla), el desplazamiento será directamente proporcional al índice del elemento procesado durante un paso directo a través de la matriz. De esta forma, interpretamos la presencia de "distancia" entre elementos, como en el mundo real. Para controlar el valor de la distancia, enviaremos a la interfaz externa una propiedad que es un multiplicador por el cual se multiplicará el índice del elemento en la matriz. Al configurarlo, siempre puede ajustar el valor de paralaje como desee.

Bueno, el modelo propuesto parece viable, todos los puntos principales están pensados. Aquí podemos poner fin a nuestro conocimiento del dispositivo de paralaje conceptual en DVParallaxView y comenzar una historia sobre su implementación práctica.

Crear DVParallaxView

En este y los siguientes capítulos, analizaremos más de cerca la creación del componente DVParallaxView.

Antes de pasar directamente a la implementación, definamos un par de propiedades de la clase DVParallaxView.

Primero, el paralaje se ve mejor y con mayor frecuencia se realiza con el fondo de una imagen hermosa (recuerde, decidimos que uno de los componentes obligatorios del paralaje es el fondo). Por lo tanto, en nuestra clase, es necesario proporcionar la capacidad de establecer una imagen de fondo. En la raíz misma de la jerarquía de vistas, siempre habrá un elemento privado de la clase UIImageView, al que llamaremos backgroundImageView. Este elemento actuará como fondo en DVParallaxView. Su ubicación en la raíz de la jerarquía nos garantizará el desplazamiento relativo más pequeño, como corresponde al fondo, el objeto más lejano de la escena. Para pasar una imagen de fondo, la interfaz pública del componente tendrá una propiedad especial: backgroundImage de la clase UIImage.

En segundo lugar, el efecto de paralaje en iOS 7 no se trata solo del desplazamiento de fondo. Si miras más de cerca, notarás un detalle curioso: los iconos están desplazados en la dirección opuesta al desplazamiento del fondo. Esto se hace para mejorar el efecto de paralaje y el contraste entre el fondo cambiante y los iconos de la aplicación, que a primera vista son estacionarios. Dado que nos propusimos ponernos al día y superar el paralaje en iOS 7, simplemente tenemos que agregar dicha característica a nuestro componente. Para hacer esto, crearemos una propiedad frontView en la interfaz pública, a la cual transferiremos la vista que queremos cambiar en la dirección opuesta al paralaje.

Entonces, se han hecho todos los preparativos: se ha estudiado la teoría, se ha pensado el dispositivo del componente. Puede comenzar a crear DVParallaxView. Listo?

Cree un proyecto de vista única en Xcode, asígnele un nombre y cualquier otro atributo requerido. Dentro del proyecto, cree la clase DVParallaxView, que es descendiente de la clase UIView. Cree un archivo de encabezado DVParallaxView y rellénelo de la siguiente manera.

#importar @interface DVParallaxView: UIView @property (no atómico, fuerte) UIImage * backgroundImage; @property (no atómico, fuerte) UIView * frontView; @property (no atómico) float parallaxDistanceFactor; @property (no atómico) float parallaxFrontFactor; @property (no atómico) CGPoint contentOffset; @final

Todas las propiedades de la clase que ves aquí ya se han discutido anteriormente, por lo que su conjunto no debería sorprenderte con nada. Dos propiedades que no se discutieron explícitamente antes, parallaxDistanceFactor y parallaxFrontFactor, son los mismos factores que sirven para controlar la cantidad de compensación, respectivamente, de los elementos de la jerarquía y la vista frontal.

En el archivo de implementación de la clase, cree una interfaz privada. Debe poner la propiedad backgroundImageView en él, ya que la clase no necesita proporcionar acceso público a ella.

@interface DVParallaxView () @property (no atómico, fuerte) UIImageView * backgroundImageView; @final

Deje que el objeto de la clase se cree llamando al método initWithFrame:. En su llamada, debe realizar toda la configuración inicial.

- (id) initWithFrame: (CGRect) frame (self \u003d; if (self) (self.parallaxDistanceFactor \u003d 2.f; self.parallaxFrontFactor \u003d 20.f; self.backgroundColor \u003d ;; UIPanGestureRecognizer * panRecognizer \u003d [initWithTarget: auto acción : @selector (panHandler :)] ;;) return self;)

Establecemos estos valores multiplicadores en función de nuestras preferencias personales. Puede elegir otros valores si el paralaje le parece demasiado fuerte o, por el contrario, demasiado débil. Tenga en cuenta que el fondo es desde el principio en la jerarquía de vistas, incluso si no se especifica ninguna imagen para él.

Si ya ha hecho la pregunta "¿Cómo vamos a iniciar el desplazamiento de vistas en un componente?", Entonces ya puede ver la respuesta en el código de inicialización - UIPanGestureRecognizer. Sí, recordamos que en iOS 7, el paralaje se producía al inclinar el teléfono. Todo tiene su tiempo.

El selector de método panHandler: se pasó a UIPanGestureRecognizer. Escribamos este método de inmediato para que no nos olvidemos de hacerlo más tarde.

#pragma mark - Gesture handler - (void) panHandler: (UIPanGestureRecognizer *) pan (CGPoint translation \u003d ;;;)

Nada inusual. Leemos el movimiento del toque y establecemos el mismo valor de compensación en nuestro DVParallaxView. No olvide restablecer el desplazamiento resultante al final.

Ahora viene la parte divertida. Hasta ahora no pasa nada para cambiar contentOffset, arreglemos eso. Cree un método de establecimiento setContentOffset como se muestra a continuación.

- (void) setContentOffset: (CGPoint) contentOffset (BOOL backgroundReachedEdgeX \u003d NO; BOOL backgroundReachedEdgeY \u003d NO; double contentDivider; // 1 if (self.backgroundImageView) (contentDivider \u003d self.subviews.count * self.parallaxDistanceFactor \u003d CGPointGPoint newCakeenter (self.backgroundImageView.center.x + (contentOffset.x - _contentOffset.x) / contentDivider, self.backgroundImageView.center.y - (contentOffset.y - _contentOffset.y) / contentDivider); if ((newCenter.x - self .backgroundImageView.frame.size.width / 2.f)\u003e 0.f || (newCenter.x + self.backgroundImageView.frame.size.width / 2.f)< self.bounds.size.width) { newCenter.x = self.backgroundImageView.center.x; backgroundReachedEdgeX = YES; } if ((newCenter.y - self.backgroundImageView.frame.size.height/2.f) > 0.f || (newCenter.y + self.backgroundImageView.frame.size.height / 2.f)< self.bounds.size.height) { newCenter.y = self.backgroundImageView.center.y; backgroundReachedEdgeY = YES; } self.backgroundImageView.center = newCenter; } // //2 for (int i = 1; i

Entonces, echemos un vistazo más de cerca al método. Las variables backgroundReachedEdgeX y backgroundReachedEdgeY sirven para indicar que hemos alcanzado el borde de la imagen compensando el fondo. Si se establece el fondo, entonces tiene sentido verificar si hemos ido más allá de backgroundImage. Después de todo, no queremos que los usuarios contemplen el "recorte" de la imagen, parece poco natural. Por lo tanto, consideramos necesario limitar la región de paralaje al tamaño de la imagen de fondo, si la hubiera. Por lo tanto, el bloque // 1 contiene una comprobación para salir de la imagen.

El bloque // 2 es un paso por todos los elementos de la jerarquía de vistas con el cálculo de los valores de desplazamiento de sus centros en función de su posición en la jerarquía. Además, si estamos en el borde de la imagen de fondo a lo largo de los ejes X o Y, entonces no habrá desplazamiento a lo largo de estos ejes.

Se crea la lógica de desplazamiento principal, no queda mucho: establecer métodos de acceso para las propiedades principales y también sobrecargar el método addSubview.

#pragma mark - Getters - (UIImageView *) backgroundImageView (if (! _backgroundImageView) (_backgroundImageView \u003d [init]; _backgroundImageView.contentMode \u003d UIViewContentModeCenter; _backgroundImageView.center \u003d CGPointMake (CGRectGet selfMidX, CGR.bidct) ;) return _backgroundImageView;) #pragma mark - Setters - (void) setParallaxDistanceFactor: (float) parallaxDistanceFactor (_parallaxDistanceFactor \u003d MAX (0.f, parallaxDistanceFactor);) - (void) setParallaxFrontFactor \u003d parallaxFactor .f, parallaxFrontFactor);) - (void) setBackgroundImage: (UIImage *) backgroundImage (_backgroundImage \u003d backgroundImage ;; CGPoint origin \u003d CGPointMake (CGRectGetMidX (self.bounds) - background.size.width / 2.f, CGRectGetMidY (self límites) - backgroundImage.size.height / 2.f); self.backgroundImageView.frame \u003d (CGRect) (. origin \u003d origin, .size \u003d backgroundImage.size);) - (void) setFrontView: (UIView *) frontView ( _frontView \u003d frontView; ; ) #pragma mark - Overriding - (void) addSubview: (UIView *) view (if (self.frontView); else;)

Vayamos en orden. Con el captador para backgroundImageView, todo está claro: una instanciación perezosa ordinaria, creamos un objeto solo si es necesario. La configuración de los valores de ParallaxDistanceFactor y ParallaxFrontFactor comprobará automáticamente los valores negativos. El definidor de backgroundImage establece la imagen de fondo en backgroundImageView y simultáneamente centra su posición en la pantalla. El definidor de frontView agrega frontView a la jerarquía de subvistas al mismo tiempo, por lo que no tiene sentido agregarlo manualmente. Finalmente, el método addSubview: sobrecargado funciona como de costumbre si el frontView no está definido en DVParallaxView, pero si está definido, cualquier vista estará una posición debajo de ella en la jerarquía. Después de todo, se supone que el frontView siempre está por delante.

Detengámonos en esto por ahora y cambiemos al viewController principal de nuestro proyecto de prueba. Es hora de conectar nuestro nuevo componente y probarlo en acción. Como queremos parecernos a la nueva pantalla de inicio en iOS 7, intentaremos recrearla en el proyecto de prueba. Para hacer esto, necesitamos una imagen de fondo (preferiblemente con una imagen de espacio) e iconos de aplicaciones. Además, dado que nuestro componente admite otros objetos entre el fondo y el primer plano, también los agregaremos. Dado que el fondo es el espacio, entonces desarrollaremos un tema espacial y reviviremos un pequeño espacio desértico con el planeta Tierra y su satélite, la Luna. Puede encontrar todas las imágenes necesarias en Internet o recogerlas de nuestro proyecto de prueba en github.

En iOS 7, los iconos de las aplicaciones están en primer plano, por lo que en DVParallaxView tenemos que colocarlos en el frontView. Para ello crearemos una UIView donde colocaremos todos los iconos. Para no tener que crear y colocar manualmente todos estos componentes, cree un contenedor e íconos en el guión gráfico, luego conéctelos al controlador.

Así es como se ve la vista frontal en nuestra aplicación de prueba. Vincule el contenedor UIView como IBOutlet al controlador y asígnele el nombre frontView. Comencemos a crear una instancia de DVParallaxView.

Cree una propiedad parallaxView en la interfaz privada de su controlador. Cree un captador para esta propiedad.

- (DVParallaxView *) parallaxView (if (! _ParallaxView) (_parallaxView \u003d [initWithFrame: self.view.bounds]; [_parallaxView setBackgroundImage:]; UIImageView * earth \u003d [initWithImage:]; earth.frame \u003d (CGRect) (. O \u003d CGPointMake (CGRectGetMidX (self.view.bounds) - earth.image.size.width / 2.f, CGRectGetMidY (self.view.bounds) - earth.image.size.height / 2.f), .size \u003d earth .frame.size); [_parallaxView addSubview: earth]; UIImageView * moon \u003d [initWithImage:]; moon.frame \u003d (CGRect) (.origin \u003d CGPointMake (CGRectGetMidX (self.view.bounds) + 30.f, CGRectGetMidY ( self.view.bounds) + 30.f), .size \u003d moon.frame.size); [_parallaxView addSubview: moon]; [_parallaxView setFrontView: self.frontView];) return _parallaxView;)

En el código, puede ver cómo después de crear una instancia de la clase DVParallaxView, se le asigna el fondo "galaxy2", luego se agregan imágenes de la Tierra y la Luna a la jerarquía de vistas. Luego, la propiedad frontView se establece como primer plano. Ahora todo lo que tenemos que hacer es agregar nuestro componente a la jerarquía de vistas del controlador. Agregue esta línea al método viewDidLoad:

;

Parallax está listo, puedes comenzar el proyecto. Como puede ver, el componente que creamos ya en esta etapa de su desarrollo da un efecto de paralaje completamente confiable.

Solo queda un detalle. Hasta ahora, mover elementos se realiza tocando. Es hora de arreglar eso. Es hora de conectar un giroscopio a DVParallaxView.

Conectando Core Motion

Si ha leído nuestro artículo, ya tiene todas las habilidades necesarias para usar un giroscopio en este proyecto, y también sabe que para conectar un giroscopio, debe agregar el marco Core Motion al proyecto. Pero, ¿cómo vamos a utilizar exactamente los datos del sensor? En nuestro proyecto, elegimos RotationRate para indicar la inclinación del teléfono. Es decir, contentOffset cambiará si hay una tasa de rotación angular distinta de cero.

Conecte el marco al archivo de implementación de la clase DVParallaxView.

#importar

Luego, cree las propiedades de motionManager y displayLink en la interfaz privada de la clase.

@property (no atómico, fuerte) CMMotionManager * motionManager;

@property (no atómico, fuerte) CADisplayLink * displayLink;

CMMotionManager es la clase principal de CoreMotion que se utiliza para acceder a los datos de los sensores. CADisplayLink es un temporizador que funciona con la frecuencia de actualización de la pantalla, que llamará al método para actualizar los datos del giroscopio.

Ahora agreguemos métodos de acceso para las nuevas propiedades.

- (CADisplayLink *) displayLink (if (! _DisplayLink) (_displayLink \u003d;) return _displayLink;) - (CMMotionManager *) motionManager (if (! _MotionManager) (_motionManager \u003d [init]; _motionManager.deviceMotionUpdate) return ;)

Obviamente, un desarrollador que usa el componente DVParallaxView no necesariamente siempre necesita usar un giroscopio. Puede haber otras condiciones y acciones para cambiar el valor contentOffset. Por lo tanto, el componente debe proporcionar la capacidad de elegir si controlar o no el paralaje a través del giroscopio. Para proporcionar esta opción, mostraremos la propiedad gyroscopeControl en la interfaz pública, que será de tipo BOOL. Si se establece en SÍ, el componente comienza a leer las lecturas del giroscopio y desplaza la jerarquía cuando se inclina el dispositivo. Si se establece en NO, el componente deja de responder a los cambios en la velocidad angular del dispositivo. Al mismo tiempo, las propiedades motionManager y displayLink deben detener su actividad para no desperdiciar los recursos del procesador.

Como acordamos, cree una propiedad gyroscopeControl en la interfaz pública.

@property (no atómico, fuerte) BOOL gyroscopeControl;

Luego crea un setter para ello.

- (void) setGyroscopeControl: (BOOL) gyroscopeControl (if (_gyroscopeControl \u003d\u003d gyroscopeControl) return; _gyroscopeControl \u003d gyroscopeControl; if (gyroscopeControl) (; forMode: NSDefaultRunLoopMode];) else (;; self.motionManager) \u003d n

Tenga en cuenta que cuando la propiedad se establece en YES, motionManager comienza a recibir lecturas del deviceMotion, no del giroscopio. Las razones de esta elección se describen en detalle en el artículo. Cuando se establece en NO, se detiene la recepción de datos, displayLink se elimina de todos los subprocesos llamando al método invalidate y el propio motionManager se establece en nil.

Ahora solo tenemos que escribir un método para convertir datos del giroscopio en datos para contentOffset, así como implementar el método displayLinkHandler, que se llama en el temporizador displayLink.

# marca de pragma - Giroscopio para compensar - (CGPoint) contentOffsetWithRotationRate: (CMRotationRate) rotaciónRate (doble xOffset \u003d (fabs (rotaciónRate.y)\u003e DV_ROTATION_THRESHOLD)? rotacionRate.y * DV_ROTATION_MULTIPLIER: 0.f; fabs de doble conjunto x)\u003e DV_ROTATION_THRESHOLD)? rotationRate.x * DV_ROTATION_MULTIPLIER: 0.f; CGPoint newOffset \u003d CGPointMake (self.contentOffset.x + xOffset, self.contentOffset.y + yOffset); return newOffset;) - (Handler) (displayLinkLinkLinkLinkL )

No olvide al principio del archivo de implementación describir las dos constantes definidas que usamos en el método de transformación.

#define DV_ROTATION_THRESHOLD 0.1f

#define DV_ROTATION_MULTIPLIER 2.5f

En la clase de controlador, al crear un objeto DVParallaxView, establezca su propiedad gyroscopeControl en YES.

Entonces, el giroscopio está conectado, los datos que contiene ahora deberían convertirse correctamente en un desplazamiento. Ahora puede compilar el proyecto y ejecutarlo en el dispositivo. Se ve genial, ¿no? Tenga en cuenta que el giroscopio solo funcionará en un dispositivo real.

Conclusión

Si está leyendo este párrafo, entonces acaba de crear un componente separado con el efecto de paralaje, como en iOS 7. Y aún más: el efecto en el componente DVParallaxView es más completo, ya que cambia no solo el fondo y el primer plano, sino también toda la jerarquía de elementos entre ellos. Como puede ver, su dispositivo no fue nada complicado.

DVParallaxView fue creado por nosotros para uso gratuito y subido a nuestro repositorio. ¡Utilice, mejore, estaremos encantados de recibir sus sugerencias!

Intentemos responder las preguntas candentes que los lectores hacen y hacen en los comentarios. Y estamos felices de responderles.

Empecemos por los fondos de pantalla panorámicos en iOS 7. O mejor dicho, con su ausencia ...

Fondos de pantalla panorámicos en iOS 7

Los fondos de pantalla panorámicos aparecieron en iOS 7 beta 1. Esta función permitía configurar fotos panorámicas (hay ejemplos de panorámicas en nuestro foro) como fondo de pantalla en el escritorio o en la pantalla de bloqueo. Los usuarios giraron el dispositivo iOS 7 en sus manos y la foto se movió en la pantalla según el ángulo en el que se encuentre el dispositivo en ese momento.

En iOS 7 beta 6, por alguna razón, Apple eliminó esta funcionalidad del firmware. Es por eso en la versión final de iOS 7.0 NO existe la función de "Fondo de pantalla panorámico".

Por supuesto, puede configurar panoramas en lugar de fondos de pantalla. El sistema le permitirá hacer esto, pero no le dará "ese mismo" efecto. Solo verá el efecto Parallax.

Efecto de paralaje en iOS 7

Efecto de paralaje - una hermosa innovación en iOS 7. El efecto Parallax permite que los fondos de pantalla y los íconos en el escritorio existan como si estuvieran separados entre sí. Los iconos están en un plano y los fondos de pantalla en otro. El dispositivo iOS 7 lee datos del giroscopio y mueve estos planos entre sí. Como resultado de los movimientos, vemos aquellas partes del papel tapiz que han quedado detrás de escena. Hay un sentimiento de multidimensionalidad y profundidad.

Ahora que he explicado cómo funciona el efecto de paralaje en iOS 7, resulta obvio que conceptos como “Fondo de pantalla de paralaje” o “Fondo de pantalla con efecto de paralaje” desde el punto de vista del idioma ruso y la comprensión del proceso, son erróneos y solo engañan a los usuarios. Los llamados "fondos de pantalla Parallax" no son más que fondos de pantalla estándar ordinarios, que solo difieren en resolución.

Basta con guardar la foto en la resolución requerida, subirla al iPad, iPhone o iPod Touch y tendrá el efecto de paralaje en iOS 7. Si no hace esto o usa el fondo de pantalla que fue creado para iOS 6, entonces un desagradable efecto de estiramiento de imagen por lo que muchos de nuestros lectores no pudieron dormir bien.

Resoluciones de instantáneas si desea un efecto de paralaje en el fondo de pantalla (entre paréntesis está la resolución estándar recomendada para instantáneas sin efecto de paralaje en iOS 6 y versiones anteriores):

ipad 21424 x 1424 (1024 x 1024)

ipad mini1424 x 1424 (1024 x 1024)

ipad 32448 x 2448 (2048 x 2048)

iPad 42448 x 2448 (2048 x 2048)

iphone 4s1360 x 1040 (960 x 640)

iPhone 5, 5S, 5C1536 al 1040 (1136 x 640)

iPod Touch 5Gen1536 al 1040 (1136 x 640)

iphone 4no admite el efecto de paralaje (960 x 640)

Los camaradas emprendedores ya están fascinando colecciones de fondos de pantalla especiales de paralaje e incluso creando tales aplicaciones. Pero tú y yo ahora sabemos que todo es más fácil de lo que parece y esta aplicación es solo un intento de cortar dinero rápidamente en una ola de ignorancia.

¿Cómo hacer papel tapiz tú mismo?

Es muy fácil hacer un papel tapiz usted mismo, incluso con efecto de paralaje, incluso sin él.

En nuestro sitio ha habido durante mucho tiempo instrucciones paso a paso sobre el ejemplo de Photoshop: Cómo hacer un fondo de pantalla para iPad. La instrucción no ha perdido su relevancia ahora. Lo principal es elegir la resolución correcta para su dispositivo (la resolución recomendada está justo arriba en este artículo).

Una vez creada la imagen con la resolución requerida, puede:

1) envíelo a usted mismo por correo y luego guárdelo en la película

¿Cómo deshabilitar el efecto Parallax en iOS 7?

A algunos usuarios no les gusta el efecto de paralaje. Puede desactivarlo en la configuración.

Configuración-\u003e General-\u003e Acceso universal-\u003e Reducir movimiento. Encienda el interruptor "Reducir movimiento".

Fondos de pantalla dinámicos en iOS 7

IOS 7 introduce fondos de pantalla dinámicos integrados en el sistema. Algunos los llaman "en vivo" o "dinámicos". Pero Apple dijo Dynamic, lo que significa que nos ceñiremos a la terminología oficial.

Puede instalarlos en la configuración ( Configuración-\u003e Fondo de pantalla y brillo-\u003e Selección de fondo de pantalla-\u003e Dinámico). Por tipo, los fondos de pantalla dinámicos se diferencian entre sí solo en color. Ahora hay 7 colores para elegir.

En todos los fondos de pantalla, las bolas se mueven / disminuyen / aumentan / cambian la transparencia en tiempo real (todos ya conocen el amor de Apple por las bolas).

Propio único ¡Los fondos de pantalla dinámicos para iOS 7 no se pueden crear oficialmente ahora! Usa lo que tienes. En el futuro, habrá formas de configurar su propio fondo de pantalla dinámico.

Después del lanzamiento del increíblemente popular, según algunos camaradas, iOS 7, otros camaradas comenzaron a sentirse mareados. Ya sea por el éxito o por el torbellino en la pantalla del iPhone. De hecho, a veces tocas el menú con el dedo y él se retuerce, pero no puede hacer nada, o el teléfono en sí no entiende lo que se requiere de él, o la mayoría de los usuarios realmente dicen la verdad: el nuevo efecto de paralaje solo interfiere con los trabajo. Y la pregunta es: ¿cómo apagar todos estos efectos de parpadeo, torsión, acercamiento, deslizamiento, colisión, en una palabra, todas estas bellezas innecesarias?

Tenga en cuenta que cualquier efecto gráfico adicional tiene un efecto muy notable en la batería del iPhone; para realizarlos se utilizan poderes adicionales muy serios del dispositivo. Por lo tanto, apagar toda esta mierda aumentará la duración de la batería. En el caso del iPhone, incluso un minuto extra a veces es esencial, ¿verdad? Mirando cómo se agotan los porcentajes de carga de la batería, a veces me dan ganas de llorar.

Entonces, ¡apágalo!

1. Configuración de iOS -\u003e General

2. Básico -\u003e Accesibilidad

3. Acceso universal -\u003e Reducir el movimiento

4. Disminuya el movimiento -\u003e control deslizante hacia la derecha