如何實現仿iOS淘寶產品詳情頁選擇屬性規格的動畫

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

關鍵代碼

@TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
private void startContentViewAnim(boolean isSmall)
{
    // 設置旋轉的中心點
    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);
            }
        });
    }
}

分析動畫，拆解開來看

1. window進入變暗退出變亮

2. 選擇框進入自下而上，退出自上而下

3. activity布局旋轉變小

前兩點比較簡單常見，分析第三點

可以看成是：

  1. 以底部為軸，旋轉適當角度；

  2. 上個動畫結束后緊跟著的是以底部為軸，旋轉回來，同時布局縮小，同時，整個布局向上移動；

回來就是一個相反的過程

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

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

寫完之后，上網搜索了一下，已經有人實現過這個效果，

對比一下，還是覺得自己的比較好（哈哈哈 賣瓜啦~~~）

不用改變你原來這個頁面的任何結構

我動畫的布局 是 contentView 背景的黑色 是設置給了DecorView

動畫的語句簡單清晰明了

以上是“如何實現仿iOS淘寶產品詳情頁選擇屬性規格的動畫”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！