Android動畫翻蓋和緩解（打開書本動畫）

Question

那里有幾個按鈕/圖像。 點擊我想要這樣的動畫：

（圖像打開）書籍封面打開，相關的活動/片段在動畫中輕松打開，全屏。

有什么想法嗎 ？

在廚房應用程序iOS，廚師應用程序的鏈接發生類似的事情： https ： //itunes.apple.com/us/app/cook/id687560846？mt = 8

PS：我已添加動畫，gif將在完全加載后不間斷運行。

Answer 1

您可以使用標准的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>

Answer 2

你應該能夠使用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