Cómo hacer que una aplicación iOS inicie una animación de arranque en capas
1. Primero, necesitamos crear un scrollView que aloje toda la escena de la animación
scrollView tiene varias propiedades clave que deben configurarse: marco, tamaño del contenido, alwaysBounceHorizontal,
paginEnabled (si esta propiedad es "No", el efecto elástico entre páginas desaparecerá),
delegar (debe configurarse para obtener el estado de desplazamiento de la vista de desplazamiento) , etc.
2. Agregar elementos de página
3. Hacer que la primera página se mueva~~
Cuando se acaba de mostrar la primera página, queremos que los elementos tengan un movimiento. efecto. label_page1_2.transform = CGAffineTransformMakeTranslation(100, 0);
self.label_page1_3.transform = CGAffineTransformMakeTranslation(- 120, 0);
[UIView animateWithDuration:0.7
animaciones:^{
self.girlImageView.transform = CGAffineTransformMakeTranslation(0, 0);
}];
Como puedes ver, nosotros Los cuatro A los elementos de la primera página se les asignan diferentes desplazamientos horizontales y luego se espera que se muevan a sus posiciones iniciales después de 0,7 segundos. Esto completa la animación de dislocación de las primeras 4 capas.
Luego, esperamos que cuando deslicemos el dedo sobre la vista de desplazamiento, los cuatro elementos de la primera página puedan tener animaciones de dislocación en capas correspondientes, y luego necesitamos obtener el desplazamiento de la vista de desplazamiento actual. Ese es el importante contentOffset mencionado anteriormente. Este valor se puede obtener en tiempo real en:
- (void) scrollViewDidScroll:(UIScrollView *)scrollView
.
Por favor, vea cómo hacer esto.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat currentX = scrollView.contentOffset.x;
if ( currentX <= kScreenWidth)
{
self.girlImageView.transform = CGAffineTransformMakeTranslation((kScreenWidth + 100.0f) * currentX / kScreenWidth, 0);
self.label_page1_2.transform = CGAffineTransformMakeTranslation(- 200 * currentX / kScreenWidth, 0);
}
}
Oh, es feo, ¿verdad?
La siguiente es una explicación, primero descartando dos teoremas:
Teorema 1: durante el proceso de deslizamiento de la vista de desplazamiento, visualmente, la dirección de movimiento de los elementos en la vista de desplazamiento es consistente con El dedo se desliza en la dirección opuesta y se mueve la misma distancia que se desliza el dedo. Sin embargo, la posición física de todos los elementos en la vista de desplazamiento no cambia.
Teorema 2: Durante el proceso de deslizamiento de la vista de desplazamiento, la posición visual del elemento en la vista de desplazamiento se mantendrá si y sólo si el movimiento físico del elemento en la vista de desplazamiento es igual a y opuesta a la distancia del dedo deslizándose constante.
Entonces tenemos dos requisitos:
Primero, esperamos que cuando la pequeña deslice su dedo, se mueva visualmente hacia la derecha en lugar de hacia la izquierda hasta que desaparezca, y luego, cuando ingresa a la segunda página, se mueve hacia el lado derecho de la pantalla.
Debemos tener claro que el movimiento de la niña sólo puede ser el movimiento de la posición en la vista de desplazamiento. Según el teorema 2, podemos saber que si la posición visual de la niña se mantiene sin cambios, el desplazamiento físico real de la niña en la vista de desplazamiento debería ser:
Fórmula 4.3.1 baseDistance = kScreenWidth ScreenWidth
Entonces, si queremos ver la posición visual de la niña moverse 100 píxeles hacia la derecha después de pasar a la segunda página, entonces la posición de la niña en la vista de desplazamiento también se moverá 100 píxeles hacia la derecha.
Fórmula 4.3.2 distancia = baseDistance + 100
Desde la primera página hasta la segunda página, el primer desplazamiento **** de la vista de desplazamiento es kScreenWidth, y el desplazamiento actual El desplazamiento de la vista es contentOffset. x, se puede obtener que la proporción del desplazamiento actual:
Fórmula 4.3.3 estado = scrollView.contentOffest.x / distancia
Se puede obtener de 4.3.1 4.3 .2 4.3.3, configuramos el desplazamiento de la niña de la siguiente manera:
self.girlImageView.transform = CGAffineTransformMakeTranslation((kScreenWidth + 100.0f) * currentX / kScreenWidth, 0);
El El segundo requisito es que espero que la segunda pestaña de la primera página se mueva hacia la izquierda más rápido que las otras dos pestañas.
Basándonos en el Teorema 2 y usando un método similar al pushback (derivación) anterior, también podemos obtener fácilmente el método de movimiento de la segunda etiqueta:
self.label_page1_2.transform = CGAffineTransformMakeTranslation(- 200 * currentX / kScre)