Android анимация флип-обложки и легкость (открытая книжная анимация)

У меня здесь несколько кнопок / изображений. При нажатии я бы хотел такую ​​анимацию:

(Открывается открытое изображение) открывается обложка книги, а связанная с ней деятельность / фрагмент легко открывается в анимации и получает полный экран.

Есть предположения ?

Что-то подобное происходит в приложении cookie iOS, ссылка приложения cook: https://itunes.apple.com/us/app/cook/id687560846?mt=8

PS: Я добавил анимацию, gif будет работать без перерыва после полной загрузки.

анимация

Solutions Collecting From Web of "Android анимация флип-обложки и легкость (открытая книжная анимация)"

Вы можете реализовать эту анимацию, используя стандартный андроид-аниматор с анимационной книгой, как набор из нескольких ImageViews – каждый для представления страницы: Cover, BackCover, FirstPage. И после того, как анимация завершит действие запуска или фрагмент отображения.

Анимация:

  • X и y, ObjectAnimator.ofFloat(mCover, "scaleY", ...)
  • X и y, ObjectAnimator.ofFloat(mCover, "x", ...)
  • Y-rotation ObjectAnimator.ofFloat(mCover, "rotationY", ...)

См. Мой пример

(Конечно, этот пример требует некоторых оптимизаций / исправлений, но для лучшего понимания будет достаточно):

 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); } } 

И макет:

 <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> 

Пример анимации обложки книги

Вы должны иметь возможность использовать класс android.graphics.Movie для отображения (и запуска) анимированного gif.

Вы можете найти помощь в этом классе: http://developer.android.com/reference/android/graphics/Movie.html

Но, возможно, больше помощи здесь является рабочим примером: http://androidosbeginning.blogspot.com.au/2010/09/gif-animation-in-android.html