仿Airbnb页面切换效果

转载请注明出处：http://blog.csdn.net/lhlhlh111000/article/details/43348763 （我爱吃鱼的博客）

看着Air里面有个页面 切换的效果挺喜欢的；点击列表大图查看详情页面，在详情页面大图出现在原先列表位置，再有一个位移动画到头部。

先看下仿的效果图：

看下分解动作

1、点击大图，跳转（这边注意下是Activity切换时没有动画的）

2、记录大图在列表的位置

3、做位移动画，从列表位置到跳转页面的顶部（最后位置可以根据需要自定）

在这边页面跳转的时候去除动画可以在主题里面如下设置：

<style name="DetailTheme" parent="AppTheme">
        <item name="android:windowAnimationStyle">@null</item>
    </style>

接着是获取图片在列表的位置信息，并传递到下一个页面

// 状态栏高度
                    Rect frame = new Rect();
                    getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
                    int statusBarHeight = frame.top;

                    // ActionBar高度
                    int actionBarHeight = getSupportActionBar().getHeight();

                    // 图片在屏幕中的位置信息
                    int[] location = new int[2];
                    v.getLocationInWindow(location);
                    
                    // 跳转页面，并传递信息
                    Intent intent = new Intent(MainActivity.this, ShowActivity.class);
                    intent.putExtra("X", location[0]);
                    intent.putExtra("Y", location[1] - statusBarHeight - actionBarHeight);
                    intent.putExtra("img", (int) getItem(position));
                    MainActivity.this.startActivity(intent);

在另外一个获取传递过来的参数，并做一个我们想要的位移动画就达到我们要的效果了；这边为了效果比较明显，做了一个动画延迟动作。

TranslateAnimation translateAnimation = new TranslateAnimation(0, 0, mY, 0);
        translateAnimation.setDuration(300);
        translateAnimation.setStartOffset(300);
        translateAnimation.start();
        mImvShow.startAnimation(translateAnimation);

实现上来看挺简单；当时会想着仿着来做是一个这样的交互确实感觉挺有意思的，对用户来说前后切换就是一个无缝的操作；再一个实现完后发现所有知识点都是基础，原来的好交互其实也不一定需要复杂的实现。