MaterialDesign系列文章(一)轉(zhuǎn)場動畫

不怕跌倒,所以飛翔

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

1.轉(zhuǎn)場動畫

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

1.1轉(zhuǎn)場動畫種類(Transition)

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

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

  • ActivityOptionsCompat.makeCustomAnimation(context, enterResId, exitResId)

            //(這個動畫類似于overridePendingTransition()這個動畫)
            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)(從指定位置不斷方法一個View,進(jìn)行過度)

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

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

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

    這個動畫和makeScaleUpAnimation非常相似,只不過這里是放大一個圖片,最后過度到一個新的activity

  • ActivityOptionsCompat.makeSceneTransitionAnimation(activity, sharedElement, sharedElementName)

    這個實(shí)現(xiàn)起來就有點(diǎn)復(fù)雜了,共享元素動畫

    • 首先在跳轉(zhuǎn)頁面的共享元素設(shè)置android:transitionName="transitionImg"(其中這個名字可以隨便更改)
    • 在跳轉(zhuǎn)只有準(zhǔn)備共享的元素設(shè)置android:transitionName="transitionImg"(其中這個名字可以隨便更改)
    • 跳轉(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)

    這個是基于上面的動畫,但是可以指定多個共享元素,可以標(biāo)明多個pair對象

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

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

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

    • change_bounds

    • change_clip_bounds

    • change_transition

    • change_image_transition

    • change_scroll

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

      <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
          <changeBounds />
          //這里也可以制動動畫時長和插值器
          <changeBounds
               android:interpolator="@android:interpolator/accelerate_decelerate"
               android:duration="500"/>            
      </transitionSet>
      

      如果是change_clip_bounds則代碼這么寫

      <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>
      

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

項(xiàng)目地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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