美文网首页Android开发探索自定义view菜菜Android
(香奈儿)Chanel App 首页滑动视差效果

(香奈儿)Chanel App 首页滑动视差效果

作者: 歇斯底里的苦笑 | 来源:发表于2018-03-21 16:25 被阅读505次

    ChanelView

    废话不多说,请看效果图。

    Chanel App效果图 我实现的效果
    ChanelGIF.gif MyChanel.gif

    实现原理介绍

    采用的是 竖行的ViewPage 来实现的,相信大家都知道怎么弄,然后就是在ViewPage的transformPage方法里面,里面要怎么样的效果都可以自行修改。

     mVerticalViewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
                @Override
                public void transformPage(View view, float position) {
                    int pageHeight = view.getHeight();
                    ImageView iv_picture=view.findViewById(R.id.iv_picture);
                    if (position < 1) {
                        view.setTranslationY(mOffset * position);
                        //移动文字
                        if (position >= 0) {
                            TextView tv_title2=(TextView) view.findViewById(R.id.tv_title2);
                            TextView tv_sign=(TextView)view. findViewById(R.id.tv_sign);
                            RelativeLayout layout_live_content=(RelativeLayout) view.findViewById(R.id.layout_live_content);
    
                            tv_title2.setAlpha((1-position));
                            iv_picture.setScaleX((float) ((1-position)*0.2+1));
                            iv_picture.setScaleY((float) ((1-position)*0.2+1));
    
                            float live_content_offset;
                            //如果在最后一个,则移动到底部50dp
                            if(tv_sign.getText().toString().trim().equals((list.size() -1))){
                                live_content_offset = pageHeight - MainActivity.this.getResources().getDimension(R.dimen.DIMEN_120DP);
                            } else {
                                live_content_offset = pageHeight -  MainActivity.this.getResources().getDimension(R.dimen.DIMEN_300DP);
                            }
                            layout_live_content.setTranslationY(live_content_offset * (1 - position));
                        }
                    } else { // (1,+Infinity]
                        view.setTranslationY(-pageHeight * (position - 1) + (mOffset + (position - 1) * (-mOffset / 2)));
                    }
                }
            });
    

    APK 地址:https://www.pgyer.com/xsIo

    github https://github.com/yanxuwen/ChanelView

    喜欢就在 star下,非常感谢o(∩_∩)o~~~

    相关文章

      网友评论

        本文标题:(香奈儿)Chanel App 首页滑动视差效果

        本文链接:https://www.haomeiwen.com/subject/hkpgqftx.html