前言

ndroid5.0之后新增了很多好看的轉(zhuǎn)場(chǎng)動(dòng)畫(huà),相比于以前的overridePendingTransition()豐富了很多,特別新增了共享元素跳轉(zhuǎn)的方式。本文將給大家詳細(xì)介紹關(guān)于Android工具欄頂出轉(zhuǎn)場(chǎng)動(dòng)畫(huà)實(shí)現(xiàn)的相關(guān)資料，下面話(huà)不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧

實(shí)現(xiàn)效果

為何做這個(gè)動(dòng)畫(huà)

起初對(duì)于這兩個(gè)界面的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)打算簡(jiǎn)單使用android原生的共享元素動(dòng)畫(huà)，可是實(shí)現(xiàn)后發(fā)現(xiàn)效果并不是很好，在很多手機(jī)上流暢度太差。

以下在敘述時(shí)把轉(zhuǎn)場(chǎng)前的頁(yè)面稱(chēng)為A頁(yè)面， 轉(zhuǎn)場(chǎng)的目前頁(yè)面稱(chēng)為B頁(yè)面

實(shí)現(xiàn)原理

在A頁(yè)面，把需要頂出的區(qū)域截取出來(lái)

val contentView = (context as Activity).window.decorView.findViewById<View>(android.R.id.content) ?: return null
var captureImage: Bitmap? = null
contentView.isDrawingCacheEnabled = true
captureImageFromView(contentView)
contentView.destroyDrawingCache()

在B頁(yè)面，把A頁(yè)面截取的圖片用ImageView展示在頂部，并做上移動(dòng)畫(huà)。同時(shí)，取消按鈕做出現(xiàn)的動(dòng)畫(huà)。
ImageView的上移動(dòng)畫(huà)非常簡(jiǎn)單:通過(guò)不斷改變topMarigin來(lái)實(shí)現(xiàn)上移效果

 val captureImageUpAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
 addUpdateListener {
  val newTopMargin = captureImageStartLocationY * (animatedValue as Float)
  (captureView.layoutParams as LinearLayout.LayoutParams)?.apply {
   topMargin = -(newTopMargin.toInt())
  }
 }
}
val captureImageDownAnimator = ValueAnimator.ofFloat(1f, 0f).apply {
 addUpdateListener {
  val newTopMargin = captureImageStartLocationY * (animatedValue as Float)
  (captureView.layoutParams as LinearLayout.LayoutParams)?.apply {
   topMargin = -(newTopMargin.toInt())
  }
 }
}

取消按鈕的出現(xiàn)動(dòng)畫(huà)，則是通過(guò)取消按鈕左側(cè)的框不斷變小來(lái)實(shí)現(xiàn)的。

val rightBtnShowAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
 addUpdateListener {
  val animateWidth = (it.animatedValue as Float) * RIGHT_BTN_WIDTH
  flexingView.layoutParams = LinearLayout.LayoutParams(containerWidth - animateWidth.toInt(), UIUtil.dp2px(30f))
 }
}

下圖大概描述了整個(gè)動(dòng)畫(huà)時(shí)如何實(shí)現(xiàn)的：

動(dòng)畫(huà)實(shí)現(xiàn)需要注意的點(diǎn)

頁(yè)面A保存的截圖如何傳到B頁(yè)面？

1、截圖應(yīng)該放到內(nèi)存還是本地？

這個(gè)截圖應(yīng)該放在內(nèi)存中，如果截圖保存到本地。那么 I/O 占用的時(shí)間肯定會(huì)導(dǎo)致動(dòng)畫(huà)實(shí)現(xiàn)效果不好。

2、對(duì)于截取的圖片需要壓縮

對(duì)于不同分辨率的手機(jī)，截取出的圖片的大小是不一樣的。圖片太大放在內(nèi)存中是不合適的，因此在截取圖片后對(duì)圖片的大小做了壓縮。

private fun captureFromView(view: View): Bitmap? {
 return translateToRgb555(view.drawingCache)
}

//為了壓縮大小，同時(shí)保證圖片寬高不變，直接將圖片轉(zhuǎn)成 RGB_565。
private fun translateToRgb555(srcBitmap: Bitmap): Bitmap? {
 try {
  /*傳入bitmap參數(shù)，返回bitmap。*/
  val dataByte = ByteArrayOutputStream()
  srcBitmap.compress(Bitmap.CompressFormat.JPEG, 100, dataByte)
  val opts = BitmapFactory.Options()
  opts.inPreferredConfig = Bitmap.Config.RGB_565
  return BitmapFactory.decodeByteArray(dataByte.toByteArray(), 0, dataByte.size(), opts)
 } catch (e: Exception) {
  e.printStackTrace()
 } catch (e: OutOfMemoryError) {
  e.printStackTrace()
 }
 return null
}

經(jīng)過(guò)上面的處理，大部分手機(jī)截圖大小在0.2MB左右

3、B界面如何獲取截取的圖片？

放在intent中傳給B

這樣是有問(wèn)題的,雖然android官方說(shuō)intent中可以傳遞小于1MB的圖片，但是國(guó)內(nèi)各anroid廠(chǎng)商對(duì)framework做了不同的定制，有可能你的圖片0.3MB就會(huì)出現(xiàn)崩潰，即TransactionTooLargeException

放在Fresco的緩存中？

嘗試將圖片放入Fresco緩存中，不過(guò)Fresco提供的接口十分不友好，（大概就不是給框架外使用的:

CloseableReference<V> cache(K key, CloseableReference<V> value);

放在全局靜態(tài)變量中

不過(guò)需要注意的是在頁(yè)面finish時(shí)，將這個(gè)變量置null，以免占用內(nèi)存

覆蓋系統(tǒng)原生轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

如果對(duì)于默認(rèn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)不做處理的話(huà)，效果就不是我們想要的，因此要取消默認(rèn)的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

需要把B頁(yè)面的Theme的動(dòng)畫(huà)相關(guān)屬性置null就可以了

<style name="NullAnimation" parent="@android:style/Animation.Activity">
<item name="android:activityOpenEnterAnimation">@null</item>
<item name="android:activityOpenExitAnimation">@null</item>
<item name="android:activityCloseEnterAnimation">@null</item>
<item name="android:activityCloseExitAnimation">@null</item>
</style>

不過(guò)這樣后，在一些手機(jī)，比如華為，還是會(huì)有默認(rèn)的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，為了保險(xiǎn)起見(jiàn)，在startActivity是最好這樣

 context.overridePendingTransition(0, 0)

頁(yè)面閃爍的問(wèn)題

在覆蓋了系統(tǒng)原生動(dòng)畫(huà)后，大部分手機(jī)效果都還是ok的，不過(guò)在一些手機(jī)上會(huì)出現(xiàn)閃屏的問(wèn)題，比如華為 Mate10。在網(wǎng)上參考一些大家的解決方法：

 <item name="android:windowIsTranslucent">true</item>

即設(shè)置B頁(yè)面的背景為透明的。

不過(guò)問(wèn)題到這里還沒(méi)有結(jié)束

windowIsTranslucent引發(fā)的崩潰問(wèn)題

在設(shè)置windowIsTranslucent屬性后，在Mate10進(jìn)行測(cè)試，發(fā)現(xiàn)頁(yè)面啟動(dòng)就崩潰：

java.lang.RuntimeException: Unable to start activity ComponentInfo{com.linkedin.android.XXXX.XXXX/com.linkedin.android.XXXX.XXXX.activity.LoginActivity}:
java.lang.IllegalStateException: Only fullscreen activities can request orientation

最后google找到了原因，原來(lái) Android 8.0某SDK要求，如果界面是鎖死方向的，那么是不允許設(shè)置這個(gè)屬性的，不然會(huì)引發(fā)崩潰, 如果想知道詳細(xì)細(xì)節(jié)可以看一下這篇文章：http://chabaoo.cn/article/146945.htm

怎么解決呢？

前有山后有虎，腦殼子疼，最后決定取消B頁(yè)面的鎖屏屬性，并且頁(yè)面旋轉(zhuǎn)時(shí)頁(yè)面不做變化。

 <activity
  android:name=".activity.BActivity"
  android:exported="false"
  android:configChanges="orientation|keyboardHidden|screenSize"
  android:theme="@style/AnimationTheme">

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論