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.

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.

animación

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> 

Ejemplo de animación de portada

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

  • Android - Animar el diálogo emergente con efecto de rebote
  • ¿Cuál es la forma óptima de animar un dibujable dentro de una vista utilizando las clases de animación?
  • Animación al cambiar Actividad en Android?
  • ¿Cómo animar la posición de desplazamiento? ¿Cómo desplazarse sin problemas?
  • Cómo crear movimiento / cambiar el tamaño de las animaciones en Android?
  • Rendimiento deficiente de la animación de zoom personalizado de Android
  • Sacudidas de animación en el dispositivo android en titanio
  • Mostrando los dos lados de una moneda que se está volteando utilizando la animación estándar de Android
  • ¿Cómo llenar una vista con otra con Material Design Animation?
  • Android Lollipop's BeginDelayedTransition no siempre funciona
  • La animación al inicio de la actividad omite los marcos
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.