Animación de Android flip cubierta y facilitar hasta (animación de libro abierto)
Tengo pocos botones / imágenes allí. en el tecleo quisiera tal animación:
(la imagen se abre como) se abre la cubierta del libro, y la actividad relacionada / fragmento se abre con facilidad en animación y se pone a pantalla completa.
- Cómo hacer la animación de marco suave en Android?
- Animación alfa de Android: Permanecer en el último cuadro de animación cuando se completa la animación
- Aplicación de animaciones al cambiar la visibilidad de una vista
- Circular Revelar no funciona cuando la gravedad FAB es inferior
- Cómo crear una animación de "relleno" en Android
Alguna idea ?
Algo similar sucede en la aplicación cook iOS, Enlace de cook app: https://itunes.apple.com/us/app/cook/id687560846?mt=8
PS: He añadido animación, gif se ejecutará sin interrupción una vez completamente cargado.
- Animar un cuadro de diálogo personalizado
- Android - Arrastrar y soltar - Animación sombra a destino
- La transición parpadea después del cambio de orientación
- ¿Cómo crear animaciones 3D como esta en Android?
- ¿Cómo hago algo cuando termina una animación?
- Cómo animar un camino en el lienzo - android
- Uso de la función "con"
- como puedo parar la animacion
Puede implementar esta animación utilizando el animador androide estándar con el libro de animación como un conjunto de múltiples ImageViews
– cada uno para la representación de la página: Cover, BackCover, FirstPage. Y después de que la animación termine la actividad de lanzamiento o el fragmento de visualización.
Animar con:
- x e y,
ObjectAnimator.ofFloat(mCover, "scaleY", ...)
- x y transformar y,
ObjectAnimator.ofFloat(mCover, "x", ...)
- y-rotation
ObjectAnimator.ofFloat(mCover, "rotationY", ...)
Vea mi ejemplo
(Claro, esta muestra requiere algunas optimizaciones / correcciones, pero para una mejor comprensión sería suficiente):
public class MainActivity extends AppCompatActivity { private ImageView mPage1; private ImageView mCover; private ImageView mCoverFullScreen; private AnimatorSet mAnimIncrease; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mCoverFullScreen = (ImageView) findViewById(R.id.cover_full_screen); mPage1 = (ImageView) findViewById(R.id.page1); mCover = (ImageView) findViewById(R.id.cover); mCover.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mAnimIncrease.start(); } }); mCoverFullScreen.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { if (mCover.getMeasuredHeight() <= 0 || mCoverFullScreen.getMeasuredHeight() <= 0) { return; } if (Build.VERSION.SDK_INT >= 16) { mCoverFullScreen.getViewTreeObserver().removeOnGlobalLayoutListener(this); } else { mCoverFullScreen.getViewTreeObserver().removeGlobalOnLayoutListener(this); } initAnimator(1000); } }); } private void initAnimator(long animationDuration) { mAnimIncrease = new AnimatorSet(); TimeInterpolator interpolator = new LinearInterpolator(); float deltaX = mCover.getMeasuredWidth() / 2f; float deltaY = mCoverFullScreen.getY() - mCover.getY(); float scale = mCoverFullScreen.getMeasuredHeight() / (float) mCover.getMeasuredHeight(); float scaleMiddle = (scale + 1) / 2f; float xStart = mCover.getX(); float xEnd = xStart + deltaX; float xMiddle = xStart + deltaX * interpolator.getInterpolation(0.5f); float xScaledEnd = xStart + deltaX * scale; float yStart = mCover.getY(); float yEnd = yStart + deltaY; float yMiddle = yStart + deltaY * interpolator.getInterpolation(0.5f); AnimatorSet coverFrontSet = new AnimatorSet(); coverFrontSet.setDuration(animationDuration / 2); coverFrontSet.playTogether( ObjectAnimator.ofFloat(mCover, "rotationY", 0f, -90f), ObjectAnimator.ofFloat(mCover, "pivotX", 0f), ObjectAnimator.ofFloat(mCover, "x", xStart, xMiddle), ObjectAnimator.ofFloat(mCover, "y", yStart, yMiddle), ObjectAnimator.ofFloat(mCover, "scaleY", 1, scaleMiddle), ObjectAnimator.ofFloat(mCover, "scaleX", 1, scaleMiddle) ); coverFrontSet.addListener(new AnimatorListenerStub() { @Override public void onAnimationStart(Animator animation) { super.onAnimationStart(animation); mCover.setImageResource(R.drawable.cover); } @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); mCover.setImageResource(R.drawable.cover_back); } }); AnimatorSet coverBackSet = new AnimatorSet(); coverBackSet.setDuration(animationDuration / 2); coverBackSet.playTogether( ObjectAnimator.ofFloat(mCover, "rotationY", -90f, -180f), ObjectAnimator.ofFloat(mCover, "pivotX", 0f), ObjectAnimator.ofFloat(mCover, "x", xMiddle, xEnd), ObjectAnimator.ofFloat(mCover, "y", yMiddle, yEnd), ObjectAnimator.ofFloat(mCover, "scaleY", scaleMiddle, scale), ObjectAnimator.ofFloat(mCover, "scaleX", scaleMiddle, scale) ); AnimatorSet coverSet = new AnimatorSet(); coverSet.play(coverBackSet).after(coverFrontSet); AnimatorSet page1Set = new AnimatorSet(); page1Set.setDuration(animationDuration); page1Set.playTogether( ObjectAnimator.ofFloat(mPage1, "scaleX", 1, scale), ObjectAnimator.ofFloat(mPage1, "scaleY", 1, scale), ObjectAnimator.ofFloat(mPage1, "x", xStart, xScaledEnd) ); mAnimIncrease.play(coverSet).with(page1Set); mAnimIncrease.setInterpolator(interpolator); } }
Y Disposición:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <ImageView android:id="@+id/page1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/page1" /> <ImageView android:id="@+id/cover" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/cover" /> <ImageView android:id="@+id/cover_full_screen" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
deberías poder usar la clase android.graphics.Movie para mostrar (y ejecutar) un gif animado.
Puedes encontrar ayuda en la clase aquí: http://developer.android.com/reference/android/graphics/Movie.html
Pero probablemente de más ayuda es un ejemplo de trabajo aquí: http://androidosbeginning.blogspot.com.au/2010/09/gif-animation-in-android.html
- Cómo forzar a GridView a generar celdas cuadradas en Android
- ¿Cómo puedo actualizar la conexión de red del emulador de Android después de que el host cambie de red?