L'animazione di Android capovolge la cover e la facilita (animazione di libri aperti)

Question

Ho alcuni pulsanti/immagini lì. Facendo clic su Mi piacerebbe un'animazione del genere:

(l'immagine si apre come) si apre la copertina del libro e l'attività/frammento correlati si apre con facilità in animazione e diventa a schermo intero.

Qualche idea?

Qualcosa di simile accade in cuoco iOS, link di Cook app: https://itunes.apple.com/us/app/cook/id687560846?mt=8

P.S: ho aggiunto l'animazione, gif verrà eseguito senza interruzioni, una volta caricato completamente.

Answer 1

È possibile implementare questa animazione utilizzando animatore Android di serie con l'animazione libro come un set di più ImageViews - ciascuno per la rappresentazione della pagina: Copertina, BackCover, FirstPage. E dopo che l'animazione è finita, avvia l'attività o mostra il frammento.

Animare con:

• x e la scala y, ObjectAnimator.ofFloat(mCover, "scaleY", ...)
• xey trasformano, ObjectAnimator.ofFloat(mCover, "x", ...)
• y-rotazione ObjectAnimator.ofFloat(mCover, "rotationY", ...)

Vedi il mio esempio

(Sure , questo esempio richiede alcune ottimizzazioni/correzioni, ma per te nderstanding basterebbe):

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

e Layout:

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

Answer 2

si dovrebbe essere in grado di utilizzare la classe android.graphics.Movie per visualizzare (ed eseguire) una GIF animata.

È possibile trovare qualche aiuto sulla classe qui: http://developer.android.com/reference/android/graphics/Movie.html

Ma probabilmente di maggiore aiuto è un esempio di lavoro qui: http://androidosbeginning.blogspot.com.au/2010/09/gif-animation-in-android.html