(香奈兒)Chanel App 首頁滑動視差效果

ChanelView

廢話不多說,請看效果圖疯潭。

Chanel App效果圖 我實現(xiàn)的效果
ChanelGIF.gif
MyChanel.gif

喜歡就去github star下,非常感謝o(∩_∩)o~~~

實現(xiàn)原理介紹

采用的是 豎行的ViewPage 來實現(xiàn)的两蟀,相信大家都知道怎么弄概说,然后就是在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

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末糖赔,一起剝皮案震驚了整個濱河市萍丐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌挂捻,老刑警劉巖碉纺,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異刻撒,居然都是意外死亡骨田,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門声怔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來态贤,“玉大人,你說我怎么就攤上這事醋火∮破” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵芥驳,是天一觀的道長柿冲。 經(jīng)常有香客問我,道長兆旬,這世上最難降的妖魔是什么假抄? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上宿饱,老公的妹妹穿的比我還像新娘熏瞄。我一直安慰自己,他們只是感情好谬以,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布强饮。 她就那樣靜靜地躺著,像睡著了一般为黎。 火紅的嫁衣襯著肌膚如雪邮丰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天碍舍,我揣著相機與錄音柠座,去河邊找鬼邑雅。 笑死片橡,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的淮野。 我是一名探鬼主播捧书,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼骤星!你這毒婦竟也來了经瓷?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤洞难,失蹤者是張志新(化名)和其女友劉穎舆吮,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體队贱,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡色冀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了柱嫌。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片锋恬。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖编丘,靈堂內(nèi)的尸體忽然破棺而出与学,到底是詐尸還是另有隱情,我是刑警寧澤嘉抓,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布索守,位于F島的核電站,受9級特大地震影響抑片,放射性物質(zhì)發(fā)生泄漏卵佛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望级遭。 院中可真熱鬧望拖,春花似錦、人聲如沸挫鸽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽丢郊。三九已至盔沫,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間枫匾,已是汗流浹背架诞。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留干茉,地道東北人谴忧。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像角虫,于是被迫代替她去往敵國和親沾谓。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361