Cómo implementar la ampliación de animación en elemento compartido en la transición de actividad
Deseo implementar la animación de escala sobre elementos compartidos sobre transiciones de actividad como en este enlace .
Pero no pudo encontrar ninguna buena referencia para este efecto específico y cómo implementarlo. ¿Es esto una transición personalizada o un valor predeterminado? Tal vez alguien podría ayudar o publicar tutoriales más detallados sobre esto en lugar de documentación oficial.
- ¿Es válida la guía de diseño de iconografía Android para Android 5 / Diseño de material
- Cómo agregar un degradado a un ImageView anidado en un CollapsingToolbar
- Sugerencias de diseño de material para listas con avatar, texto e icono
- ¿Hay una biblioteca de diseño / overlay / showcase de Android Material Design onboarding / tutorial?
- ¿Cómo se puede agregar una línea de divisor en un Android RecyclerView?
- ? Attr / no establecer el color correcto en la barra de herramientas
- Android: cambiar dinámicamente el icono FAB (botón de acción flotante) del código
- ¿Cómo iniciar la transición de elementos compartidos usando Fragmentos?
- Android 5 Lollipop dirección sombra o desplazamiento y
- Error: (2, 0) Plugin con id 'com.github.dcendents.android-maven' no encontrado
- El título de la barra de aplicaciones no se muestra en android 5.0 y superior
- Parte del fragmento dentro de ViewPager se corta en la parte inferior de la pantalla (Android)
- La elevación no funciona en un LinearLayout
Permítanme darles un breve tutorial aquí 🙂
Lo que realmente quieres es una transición de elemento compartido entre dos actividades. En realidad no comparte ninguna vista, ambas actividades tendrán árboles de vista independientes. Pero pasaremos la información sobre el elemento compartido, como su vista y su tamaño, a la nueva actividad.
Durante el lanzamiento, la nueva actividad hará transparentes todas sus vistas y localizará la vista compartida. Cambia sus atributos para que coincidan con los pasados de la actividad de lanzamiento y hace que solo vista sea visible. A continuación, ejecuta animaciones para transitar la vista compartida de este estado a su posición natural en el diseño. A medida que la transición avanza, el fondo de la ventana y el resto de los elementos no compartidos se desvanecen lentamente hasta que son totalmente opacos. Todo esto se hace automáticamente.
Ahora para marcar una vista como conjunto compartido esta propiedad:
<ImageView ... android:transitionName="@string/transition_photo" />
En ambos diseños de la actividad.
Ahora, al iniciar tu nueva actividad de la vieja actividad, define una animación de transición:
Bundle bundle = ActivityOptions.makeSceneTransitionAnimation( this, sharedView, sharedView.getTransitionName()) .toBundle(); startActivity(intent,bundle);
También puede especificar varias vistas para la transición. Incluso puede cambiar vistas compartidas entre diferentes aplicaciones.
Por defecto, la animación utilizada es move :
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeBounds/> <changeTransform/> <changeClipBounds/> <changeImageTransform/> </transitionSet>
Pero también puede configurar sus animaciones personalizadas en styles.xml:
<style name="AppTheme.Details"> <item name="android:windowSharedElementEnterTransition">@transition/shared_photo</item> </style>
A continuación, se muestra un ejemplo práctico de la transición de elemento compartido como se muestra arriba: https://github.com/anshchauhan/SharedElementTransition
https://www.youtube.com/watch?v=CPxkoe2MraA
Este video explica cómo lograr el mismo resultado. La idea principal es
1) Para anular la animación predeterminada personalizada. Aquí 0 significa que no se reproduce ninguna animación por defecto.
overridePendingTransition(0, 0);
2) Traducir y escalar la segunda imagen de la actividad a su imagen GridView de modo que se superponga completamente y luego aplicar la animación a la imagen de la actividad para mover su posición original y la escala.
También echa un vistazo a la transición de actividad de elemento compartido – https://guides.codepath.com/android/Shared-Element-Activity-Transition
Cree su animación en xml y use el código siguiente:
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); overridePendingTransition(animation_in, animation_out); }
Res / anim / in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator"> <scale android:duration="700" android:fillBefore="false" android:fromXScale="0.0" android:fromYScale="0.0" android:toXScale="1.0" android:toYScale="1.0" /> </set>
Res / anim / out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator"> <scale android:duration="700" android:fillBefore="false" android:fromXScale="1.0" android:fromYScale="1.0" android:toXScale="0.0" android:toYScale="0.0" /> </set>
1: encontrar ver especificaciones:
int[] location = new int[2]; view.getLocationOnScreen(location); int viewHeight = view.getHeight(); int viewWidth = view.getWidth();
2: crear una actividad transparente y pasar los valores superiores a la nueva actividad
3: agrega tuVisualizar a una nueva actividad y haz algo como esto:
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) yourView.getLayoutParams(); layoutParams.topMargin = location[1]; layoutParams.leftMargin = location[0]; layoutParams.height = viewHeight; layoutParams.width = viewWidth; yourView.setLayoutParams(layoutParams);
4: utilice una animación como @Neo para escalar la pantalla
- Android: Rara y no reproducible ClassNotFoundException
- Selector de cuenta iOS de inicio de sesión de Google