¿Cómo implementar elegantemente la vista previa de iOS en Android?

Cualquiera que haya usado iOS sabe que los efectos de rebote pseudofísicos son muy comunes en él, porque es un marco de interfaz de usuario compatible con el sistema iOS, pero Android no lo tiene. Tomemos como ejemplo el navegador de imágenes. El efecto de iOS es que se siente como si una imagen estuviera atada a un dispositivo de resorte y se deslizara naturalmente. Android no tiene su propio visor de imágenes, debes implementarlo tú mismo.

Los principales navegadores de imágenes del mercado no tienen efecto rebote, en parte porque no es necesario y en parte porque es más problemático de implementar. Este es el mejor plan, creo.

Se le pide al espectador de imágenes que deslice Fling y rebote cuando toque el límite, lo que tiene el efecto de rebotar fuera de los límites. Admite pellizcar para hacer zoom y tocar dos veces para hacer zoom.

A primera vista, los requisitos deberían ser fáciles de escribir. Utilice Scroller para resolverlos. El efecto de rebote se resuelve directamente con ValueAnimator. Parece simple, pero debido a que es un efecto de imitación física, implica el problema de la convergencia de velocidad desde el desplazamiento hasta el rebote (la animación del desplazamiento cambia a la animación ValueAnimator). Parece que no hay brusquedad desde el desplazamiento hasta el rebote hasta el final, y el procesamiento de límites de juicio en el medio es engorroso e implica escalamiento, por lo que esta solución no se considera.

Dado que se trata de simular los efectos físicos en la realidad, ¿por qué no obtener la aceleración correspondiente en cada cuadro en función del estado actual y luego calcular la posición del estado del siguiente cuadro, de modo que pueda lograrse mediante Al simular la aceleración física en la realidad, se pueden observar esos juicios de límites y cosas similares.

Una vez determinado el plan, el siguiente paso es elegir la ecuación de aceleración. Para simular el efecto de un resorte, la tensión es simple. ¡Usa la ley de Hooke! F = k * dx, ¿qué pasa con la fricción? Ff = µ*FN? Aquí hay una solución mejor, que está tomada de la biblioteca de animación de primavera de Facebook, Rebound. Establezca un valor objetivo y cambiará al valor objetivo según la tensión, la fricción y la velocidad actuales. La ecuación de aceleración es

donde la tensión es el coeficiente elástico y la fricción es el coeficiente de fricción. ¿Por qué la fricción debería ser proporcional a la velocidad? Si la fricción es proporcional a la velocidad, entonces no hay fricción estática, es decir, no existe una situación en la que la fuerza de tracción sea menor que la fuerza de fricción cuando el objeto está estacionario (porque cuando la velocidad es 0, a menos que la fuerza de tracción sea 0 , la resistencia es 0), y el objeto definitivamente se acercará a la ubicación, lo que hace que el objeto no pueda llegar a su destino debido a demasiada fricción.

Para poder acceder cómodamente a varias vistas, se ha diseñado una clase ZoomableGestureHelper.

Para fines de diseño, solo necesito conocer los límites de tamaño y los límites internos de la vista, y luego calcular una nueva matriz de transformación.

Para el estado físico, necesitamos una clase SpringPhysicsState para almacenar. Esta clase contiene velocidad, coeficiente de tensión y coeficiente de fricción. No guardamos la posición porque getBounds calcula la posición dinámicamente.

La velocidad se descompone en la dirección horizontal y la dirección vertical. Dado que el método de procesamiento es el mismo, a continuación solo se describe el cálculo en la dirección vertical.

Estado 1: Un lado está fuera de límites.

Analiza la posición en la imagen de arriba. La parte azul es la imagen interna, que ha sido arrastrada fuera de los límites. En este momento, la fuerza resultante debe ser fuerza de tracción * dx - fuerza de fricción * v, donde v es la velocidad de la imagen en la dirección del eje Y. (DX y V son vectores, por lo que configuro temporalmente la derecha y la inferior en positivo), y luego llamo a invalid() directamente. , puedes reproducir animaciones.

Estado 2: Ninguna de las partes ha cruzado la línea.

No debes estar nervioso en este momento porque ambas partes no han cruzado la línea. Se puede considerar que dx es 0 en este momento y la fuerza de fricción necesita atención. Debido a que puede soportar el movimiento de la cola, la fricción en este momento es menor que durante el rebote transfronterizo. En cuanto a los valores específicos, se darán al final del artículo.

Estado 3: Ambas partes están estupendas.

En este momento, ambos lados están fuera del límite y el área azul está vinculada al centro del área roja. Entonces el dx en este momento es dxBottom-dxTop (tenga en cuenta el símbolo, porque dx es). un vector, no puede ser dxTop -dxBottom).

El método de escala es consistente con el movimiento. Establezca la tensión y la fricción, y establezca el límite en el cuadro rojo exterior. Cuando el área azul no puede llenar el área roja de un lado, hay tensión; de lo contrario, no hay tensión y la fricción siempre estará ahí. En cuanto a hacer doble clic para acercar y alejar, solo necesita establecer una velocidad inicial para el estado de zoom al hacer doble clic y luego invalidar (); ¡listo! ¿No es esto muy simple?

El tiempo es un parámetro muy importante en los cálculos, que está relacionado con el cambio numérico del estado diferencial actual. Si se utiliza el método de Euler para simular los cambios en velocidad y posición, x' = x v * dt, v' = v a * dt, se puede ver en la fórmula que el tiempo determina la velocidad de la animación. Para aproximar el tiempo físico real, la unidad de tiempo utilizada aquí son los segundos (comúnmente utilizados en las computadoras).

Se determina la unidad y es necesario controlar el rango numérico del intervalo de tiempo. No podemos permitir que el tiempo entre desplazamientos de la computadora sea demasiado corto o demasiado largo. La estrategia adoptada aquí es fijar el intervalo de tiempo entre dos tiradas de cálculo. Si el intervalo de tiempo entre dos tiradas de cálculo es menor que este intervalo de tiempo, guarde el intervalo de tiempo acumulado, espere la siguiente tirada de cálculo hasta que sea mayor o igual al intervalo de tiempo fijo y luego use un bucle while para calcular el paso. a paso.

El juicio del punto final es el único inconveniente, porque la computadora solo simula los cambios en la velocidad y el desplazamiento dentro del tiempo dt, no mediante cálculos, y hay errores. Por ejemplo, x ' y v ' x ' = x v * dt y v' = v a * dt calculados por el método de Euler son valores aproximados. Los cambios en dt durante este período se consideran un movimiento uniforme de velocidad variable.

Por lo tanto, es necesario establecer un umbral para poner fin a la sentencia. Cuando la velocidad y el desplazamiento son inferiores a este valor, se puede considerar que se ha alcanzado el destino.

Existen algunos problemas con la adaptabilidad de ViewPager. Si requestDisallow true se mueve a los bordes izquierdo y derecho, y requestDisallow false, ViewPager tendrá una mutación (las mutaciones son vergonzosas pero útiles) y puede fallar con varios dedos. Este es un error del navegador. Consulte el código fuente para obtener más detalles.