如何實(shí)現(xiàn)仿iOS淘寶產(chǎn)品詳情頁(yè)選擇屬性規(guī)格的動(dòng)畫(huà)

小編給大家分享一下如何實(shí)現(xiàn)仿iOS淘寶產(chǎn)品詳情頁(yè)選擇屬性規(guī)格的動(dòng)畫(huà)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

關(guān)鍵代碼

@TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
private void startContentViewAnim(boolean isSmall)
{
    // 設(shè)置旋轉(zhuǎn)的中心點(diǎn)
    float pivotX = mContentView.getWidth() / 2.0f;
    float pivotY = mContentView.getHeight();
    mContentView.setPivotX(pivotX);
    mContentView.setPivotY(pivotY);
    final ViewPropertyAnimator animate = mContentView.animate();
    if (isSmall)
    {
        // 變大
        final android.view.ViewPropertyAnimator viewPropertyAnimator = animate
                .rotationX(5f).scaleX(1.0f).scaleY(1.0f).y(0);
        viewPropertyAnimator.setListener(new android.animation.AnimatorListenerAdapter()
        {
            @Override
            public void onAnimationEnd(android.animation.Animator animation)
            {
                animate.rotationX(0);
                viewPropertyAnimator.setListener(null);
            }
        });
    }
    else
    {
        // 縮小
        final ViewPropertyAnimator viewPropertyAnimator = animate
                .rotationX(5);
        viewPropertyAnimator.setListener(new android.animation.AnimatorListenerAdapter()
        {
            @Override
            public void onAnimationEnd(android.animation.Animator animation)
            {
                animate.rotationX(0).scaleX(0.85f).scaleY(0.85f).y(-(mContentView.getHeight() * 0.15f / 2.0f));
                viewPropertyAnimator.setListener(null);
            }
        });
    }
}

分析動(dòng)畫(huà)，拆解開(kāi)來(lái)看

1. window進(jìn)入變暗退出變亮

2. 選擇框進(jìn)入自下而上，退出自上而下

3. activity布局旋轉(zhuǎn)變小

前兩點(diǎn)比較簡(jiǎn)單常見(jiàn)，分析第三點(diǎn)

可以看成是：

  1. 以底部為軸，旋轉(zhuǎn)適當(dāng)角度；

  2. 上個(gè)動(dòng)畫(huà)結(jié)束后緊跟著的是以底部為軸，旋轉(zhuǎn)回來(lái)，同時(shí)布局縮小，同時(shí)，整個(gè)布局向上移動(dòng)；

回來(lái)就是一個(gè)相反的過(guò)程

完整代碼 下載地址https://github.com/shaodong618/AnimDemos

<!-- ============= 我是分割線 ============ -->

寫(xiě)完之后，上網(wǎng)搜索了一下，已經(jīng)有人實(shí)現(xiàn)過(guò)這個(gè)效果，

對(duì)比一下，還是覺(jué)得自己的比較好（哈哈哈 賣(mài)瓜啦~~~）

不用改變你原來(lái)這個(gè)頁(yè)面的任何結(jié)構(gòu)

我動(dòng)畫(huà)的布局 是 contentView 背景的黑色 是設(shè)置給了DecorView

動(dòng)畫(huà)的語(yǔ)句簡(jiǎn)單清晰明了

以上是“如何實(shí)現(xiàn)仿iOS淘寶產(chǎn)品詳情頁(yè)選擇屬性規(guī)格的動(dòng)畫(huà)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！