MaterialDesign系列文章(一)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

不怕跌倒,所以飛翔

這是我寫(xiě)的第一篇關(guān)于MaterialDesign的文章,希望自己能堅(jiān)持下來(lái),完成整個(gè)系列!!!什么事情都在于堅(jiān)持...

1.轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

曾經(jīng)在android中Activity和Activity之間跳轉(zhuǎn)時(shí),我們使用的動(dòng)畫(huà)基本上都是overridePendingTransition()進(jìn)行動(dòng)畫(huà)設(shè)置,這里不對(duì)這個(gè)動(dòng)畫(huà)的好壞進(jìn)行評(píng)論,但是在5.X版本之后,出現(xiàn)了一個(gè)新的動(dòng)畫(huà)效果(轉(zhuǎn)場(chǎng)動(dòng)畫(huà))

1.1轉(zhuǎn)場(chǎng)動(dòng)畫(huà)種類(lèi)(Transition)

  • 進(jìn)入: 一個(gè)進(jìn)入的過(guò)度動(dòng)畫(huà),決定了Activity中所有視圖怎么進(jìn)入屏幕;
  • 退出: 一個(gè)退出的過(guò)度動(dòng)畫(huà),決定了Activity中所有試圖怎么退出屏幕;
  • 共享元素: 一個(gè)共享元素過(guò)度動(dòng)畫(huà)決定兩個(gè)Activity之間的過(guò)渡,怎么共享他們的視圖.

1.2 主要實(shí)現(xiàn)類(lèi)(ActivityOptionsCompat)

  • ActivityOptionsCompat.makeCustomAnimation(context, enterResId, exitResId)

            //(這個(gè)動(dòng)畫(huà)類(lèi)似于overridePendingTransition()這個(gè)動(dòng)畫(huà))
            ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeCustomAnimation(this, R.anim.slide_bottom_in, R.anim.slide_bottom_out);
            Intent intent = new Intent(this, SecondActivity.class);
            ActivityCompat.startActivity(this, intent, optionsCompat.toBundle());
    
  • ActivityOptionsCompat.makeScaleUpAnimation(source, startX, startY, startWidth, startHeight)(從指定位置不斷方法一個(gè)View,進(jìn)行過(guò)度)

    • source 代表共享的View(以那個(gè)View為基準(zhǔn))
    • startX 代表從本頁(yè)面的開(kāi)始X軸的位置(以source為基準(zhǔn)點(diǎn)的位置)
    • startY 代表從本頁(yè)面的開(kāi)始Y軸的位置(以source為基準(zhǔn)點(diǎn)的位置)
    • startWidth 彈出的Activity開(kāi)始的寬度
    • startHeight 彈出的Activity開(kāi)始的高度
            //這個(gè)是在4.x上使用的,可實(shí)現(xiàn)新的Activity從某個(gè)固定的坐標(biāo)以某個(gè)大小擴(kuò)大至全屏
            ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeScaleUpAnimation(iv, width, height, 0, 0);
            intent = new Intent(this, AnimationResultActivity.class);
            ActivityCompat.startActivity(this, intent, optionsCompat.toBundle());            
    

    這里有個(gè)問(wèn)題注意就是,當(dāng)你在RecycleView這種控件中獲取子條目的位置的時(shí)候要注意,我使用的是下面的這個(gè)方法:

                    int[] location = new int[2];
                    view.getLocationOnScreen(location);
                    int width = location[0];
                    int height = location[1];    
    
  • ActivityOptionsCompat.makeThumbnailScaleUpAnimation(source, thumbnail, startX, startY)

    這個(gè)動(dòng)畫(huà)和makeScaleUpAnimation非常相似,只不過(guò)這里是放大一個(gè)圖片,最后過(guò)度到一個(gè)新的activity

  • ActivityOptionsCompat.makeSceneTransitionAnimation(activity, sharedElement, sharedElementName)

    這個(gè)實(shí)現(xiàn)起來(lái)就有點(diǎn)復(fù)雜了,共享元素動(dòng)畫(huà)

    • 首先在跳轉(zhuǎn)頁(yè)面的共享元素設(shè)置android:transitionName="transitionImg"(其中這個(gè)名字可以隨便更改)
    • 在跳轉(zhuǎn)只有準(zhǔn)備共享的元素設(shè)置android:transitionName="transitionImg"(其中這個(gè)名字可以隨便更改)
    • 跳轉(zhuǎn)的邏輯
        if (Build.VERSION.SDK_INT > 20) {
            Intent intent = new Intent(this, AnimationResultActivity.class);
            ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(AnimationActivity.this, iv, "transitionImg");
            ActivityCompat.startActivity(this, intent, optionsCompat.toBundle());
        } else {
            startActivity(new Intent(AnimationActivity.this, AnimationResultActivity.class));
        }
    
  • ActivityOptionsCompat.makeSceneTransitionAnimation((Activity arg0, Pair<View, String>... arg1)

    這個(gè)是基于上面的動(dòng)畫(huà),但是可以指定多個(gè)共享元素,可以標(biāo)明多個(gè)pair對(duì)象

    ps: 如果要是使用多個(gè)共享元素的時(shí)候要用下面的代碼進(jìn)行創(chuàng)建pair

    Pair<View, String> imagePair = Pair.create(mImageView, getString(R.string.image));
    
  • 上面都是預(yù)設(shè)的動(dòng)畫(huà),如果你想換動(dòng)畫(huà)的效果的話該如何實(shí)現(xiàn)呢?

    系統(tǒng)預(yù)設(shè)的幾種動(dòng)畫(huà)效果

    • change_bounds

    • change_clip_bounds

    • change_transition

    • change_image_transition

    • change_scroll

    • 首先在res目錄下創(chuàng)建一個(gè)transition文件夾,然后在創(chuàng)建新的xml文件,這里舉個(gè)例子:如果是change_bounds,則代碼這么寫(xiě)

      <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
          <changeBounds />
          //這里也可以制動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)和插值器
          <changeBounds
               android:interpolator="@android:interpolator/accelerate_decelerate"
               android:duration="500"/>            
      </transitionSet>
      

      如果是change_clip_bounds則代碼這么寫(xiě)

      <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
          <changeClipBounds />
      </transitionSet>
      
    • 使用方法(在style.xml中配置我們的theme)

      <resources>
          <style name="AppTheme" parent="Theme.AppCompat.Light">
              <item name="android:windowContentTransitions">true</item>
              <item name="android:windowAllowEnterTransitionOverlap">true</item>
              <item name="android:windowAllowReturnTransitionOverlap">true</item>
              <item name="android:windowEnterTransition">@android:transition/slide_bottom</item>
              <item name="android:windowExitTransition">@android:transition/slide_bottom</item>
              <item name="android:windowSharedElementEnterTransition">@transition/change_bounds</item>
              <item name="android:windowSharedElementExitTransition">@transition/change_bounds</item>
          </style>
      </resources>
      

這一系列文章的地址,希望對(duì)大家有幫助

項(xiàng)目地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末公你,一起剝皮案震驚了整個(gè)濱河市慷蠕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌戳气,老刑警劉巖秉扑,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異馁筐,居然都是意外死亡涂召,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén)敏沉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)果正,“玉大人,你說(shuō)我怎么就攤上這事盟迟∏镉荆” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵攒菠,是天一觀的道長(zhǎng)迫皱。 經(jīng)常有香客問(wèn)我,道長(zhǎng)辖众,這世上最難降的妖魔是什么卓起? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮凹炸,結(jié)果婚禮上戏阅,老公的妹妹穿的比我還像新娘。我一直安慰自己还惠,他們只是感情好饲握,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著蚕键,像睡著了一般救欧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上锣光,一...
    開(kāi)封第一講書(shū)人閱讀 49,036評(píng)論 1 285
  • 那天笆怠,我揣著相機(jī)與錄音,去河邊找鬼誊爹。 笑死蹬刷,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的频丘。 我是一名探鬼主播办成,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼搂漠!你這毒婦竟也來(lái)了迂卢?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎而克,沒(méi)想到半個(gè)月后靶壮,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡员萍,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年腾降,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片碎绎。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡螃壤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出混卵,到底是詐尸還是另有隱情映穗,我是刑警寧澤,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布幕随,位于F島的核電站蚁滋,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏赘淮。R本人自食惡果不足惜辕录,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望梢卸。 院中可真熱鬧走诞,春花似錦、人聲如沸蛤高。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)戴陡。三九已至塞绿,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間恤批,已是汗流浹背异吻。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留喜庞,地道東北人诀浪。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像延都,于是被迫代替她去往敵國(guó)和親雷猪。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容