快捷導(dǎo)航

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

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

今天給大家?guī)砟軌蛱嵘脩趔w驗(yàn)感的交互動畫,使用起來非常簡單,體驗(yàn)效果非常贊,其中僅使用到布局動畫和共享動畫,文章通過代碼示例介紹的非常詳細(xì),感興趣的同學(xué)可以自己動手試一試

廢話不多說，直接上效果圖：

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

首先是布局動畫，何為布局動畫呢？

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

//GroupView中設(shè)置動畫文件
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)簽下可包含多個動畫，運(yùn)行時動畫就是同時進(jìn)行的。具體實(shí)現(xiàn)步驟可以參考我之前的文章：Android中LayoutAnimal的使用方法詳解_Android_腳本之家 (jb51.net)

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

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

如何使用呢？

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

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

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

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

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

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

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

ActivityCompat.finishAfterTransition(this)

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

遇到的坑：

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

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

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

您可能感興趣的文章: