Android animation flip cover und ease up (open book animation)

Question

Ich habe ein paar Schaltflächen/Bilder dort. beim Klicken möchte ich solche Animation:

(Bild öffnet sich wie) Bucheinband öffnet, und verwandte Aktivität/Fragment öffnet sich mit Leichtigkeit in der Animation und bekommt Vollbild.

Irgendwelche Gedanken?

Etwas Ähnliches geschieht in Koch-App iOS, Verbindung von Koch App: https://itunes.apple.com/us/app/cook/id687560846?mt=8

P. S: Ich habe hinzugefügt Animation wird gif ununterbrochen laufen einmal vollständig geladen.

Answer 1

Sie diese Animation mit animiere Buch als Set mit Standard-Android-Animator implementieren von mehreren ImageViews - jeweils für die Seitendarstellung: Cover, BackCover, FirstPage. Und nachdem die Animation beendet ist, starten Sie die Aktivität oder zeigen Sie das Fragment an.

Animate mit:

• x und y-Skala, ObjectAnimator.ofFloat(mCover, "scaleY", ...)
• x und y-Transformation, ObjectAnimator.ofFloat(mCover, "x", ...)
• y-Rotation ObjectAnimator.ofFloat(mCover, "rotationY", ...)

Siehe mein Beispiel

(Sure , dieses Beispiel erfordert einige Optimierungen/Korrekturen, aber für bessere u ERSTÄNDIGUNG wäre genug):

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

und 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

Sie sollten die android.graphics.Movie Klasse verwenden können (und run) angezeigt werden ein animiertes gif.

Sie etwas Hilfe von der Klasse finden sich hier: http://developer.android.com/reference/android/graphics/Movie.html

Aber wahrscheinlich mehr helfen ist ein funktionierendes Beispiel hier: http://androidosbeginning.blogspot.com.au/2010/09/gif-animation-in-android.html