Android實(shí)現(xiàn)布局動(dòng)畫(huà)和共享動(dòng)畫(huà)的結(jié)合效果

更新時(shí)間：2023年09月13日 09:00:26 作者：似曾相識(shí)2022

今天給大家?guī)?lái)能夠提升用戶體驗(yàn)感的交互動(dòng)畫(huà),使用起來(lái)非常簡(jiǎn)單,體驗(yàn)效果非常贊,其中僅使用到布局動(dòng)畫(huà)和共享動(dòng)畫(huà),文章通過(guò)代碼示例介紹的非常詳細(xì),感興趣的同學(xué)可以自己動(dòng)手試一試

廢話不多說(shuō)，直接上效果圖：

怎么樣，效果看起來(lái)還不錯(cuò)吧。這其實(shí)都是官方提供的效果，接下來(lái)讓我給大家簡(jiǎn)單分享下整套效果實(shí)現(xiàn)的過(guò)程和其中遇到的一些問(wèn)題。

首先是布局動(dòng)畫(huà)，何為布局動(dòng)畫(huà)呢？

布局動(dòng)畫(huà)的作用于ViewGroup，執(zhí)行動(dòng)畫(huà)效果的是內(nèi)部的子View。布局動(dòng)畫(huà)在Android中可以通過(guò)LayoutAnimation或LayoutTransition來(lái)實(shí)現(xiàn)。咱們這里直接使用LayoutAnimation方式。在項(xiàng)目目錄res下新建anim文件夾，并在其中新建layout_slid_from_right.xml文件和slide_from_right.xml兩個(gè)文件：

//GroupView中設(shè)置動(dòng)畫(huà)文件
android:layoutAnimation="@anim/layout_slid_from_right"
//layout_slid_from_right.xml文件
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/slide_from_right"
    android:animationOrder="normal"
    android:delay="15%"/>
//slide_from_right.xml文件
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600">
    <translate
        android:fromYDelta="100%p"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toYDelta="0" />
    <alpha
        android:fromAlpha="0.5"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1" />
    <scale
        android:fromXScale="20%"
        android:fromYScale="20%"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="100%"
        android:toYScale="100%" />
    <rotate
        android:fromDegrees="-5"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="0" />
</set>

其中set標(biāo)簽下可包含多個(gè)動(dòng)畫(huà)，運(yùn)行時(shí)動(dòng)畫(huà)就是同時(shí)進(jìn)行的。具體實(shí)現(xiàn)步驟可以參考我之前的文章：Android中LayoutAnimal的使用方法詳解_Android_腳本之家 (jb51.net)

translate ：平移動(dòng)畫(huà)
alpha：漸變動(dòng)畫(huà)
scale：縮放動(dòng)畫(huà)
rotate：旋轉(zhuǎn)動(dòng)畫(huà)

接下來(lái)是共享動(dòng)畫(huà)，其實(shí)就是兩個(gè)頁(yè)面都包含了同一個(gè)元素，進(jìn)行的一種轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。這是Android5.0以后Google推出Material Design設(shè)計(jì)風(fēng)格中包含的功能。

如何使用呢？

第一個(gè)Activity的XML文件中咱們將ImageView作為共享元素

<ImageView
    android:id="@+id/iv"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    app:riv_corner_radius="10dp" />

第二個(gè)Activity的XML文件中需要添加一個(gè)transitionName屬性，在跳轉(zhuǎn)頁(yè)面的時(shí)候也要用到它。

<ImageView
   android:id="@+id/iv"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:scaleType="centerCrop"
   android:transitionName="share"/>

跳轉(zhuǎn)頁(yè)面時(shí)使用ActivityOptionsCompat設(shè)置共享信息并傳輸給下個(gè)頁(yè)面：

val optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, iv, "share")//iv是當(dāng)前點(diǎn)擊的圖片  share字符串是第二個(gè)activity布局中設(shè)置的**transitionName**屬性
startActivity(Intent(this, MainActivity10::class.java).apply {
    putExtra("data", url) //這里仍然可以正常傳值
}, optionsCompat.toBundle()) //注意這里是轉(zhuǎn)化為了bundle

當(dāng)然關(guān)閉頁(yè)面的時(shí)候不再使用finish() 方法而是使用如下方式：

ActivityCompat.finishAfterTransition(this)

到此運(yùn)行程序，就能達(dá)到和上面一樣的動(dòng)畫(huà)效果。

遇到的坑：

設(shè)置布局動(dòng)畫(huà)的時(shí)候，一定要記得在set標(biāo)簽內(nèi)添加duration屬性并賦值，否則不會(huì)有動(dòng)畫(huà)效果
布局動(dòng)畫(huà)作用于所有的GroupView
轉(zhuǎn)場(chǎng)動(dòng)畫(huà)在選用共享屬性的時(shí)候最好選用原生View。筆者之前嘗試過(guò)一些第三方的ImageView，在跳到目標(biāo)頁(yè)的時(shí)候即便XML中將圖片寬高設(shè)置為了match_parent，結(jié)果卻只展示了圖片本身的寬高。很有可能是自定義過(guò)程中計(jì)算和官方有沖突。
官方的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)從5.0開(kāi)始支持

好了，以上便是布局動(dòng)畫(huà)和共享動(dòng)畫(huà)的結(jié)合效果的全部?jī)?nèi)容。大家可以根據(jù)自己的需求和喜好實(shí)現(xiàn)更多酷炫的效果，希望這篇內(nèi)容能給大家?guī)?lái)收獲！

到此這篇關(guān)于Android實(shí)現(xiàn)布局動(dòng)畫(huà)和共享動(dòng)畫(huà)的結(jié)合效果的文章就介紹到這了,更多相關(guān)Android布局動(dòng)畫(huà)和共享動(dòng)畫(huà)結(jié)合內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: