Android：布局动画和共享动画的结合效果

大家好，我是时曾相识2022。不喜欢唱跳，但对杰伦的Rap却情有独钟。

今天给大家带来能够提升用户体验感的交互动画，使用起来非常简单，体验效果非常赞。其中仅使用到布局动画和共享动画。废话不多说，直接上效果图：

怎么样，效果看起来还不错吧。这其实都是官方提供的效果，接下来让我给大家简单分享下整套效果实现的过程和其中遇到的一些问题。

首先是布局动画，何为布局动画呢？

布局动画的作用于ViewGr0up，执行动画效果的是内部的子View。布局动画在Android中可以通过LayoutAnimation或LayoutTransition来实现。咱们这里直接使用LayoutAnimation方式。在项目目录res下新建anim文件夹，并在其中新建layout_slid_from_right.xml文件和slide_from_right.xml两个文件：

//Gr0upView中设置动画文件

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标签下可包含多个动画，运行时动画就是同时进行的。具体实现步骤可以参考我之前的文章：Android：LayoutAnimal的神奇效果。

• 
  
• translate ：平移动画
  
• alpha：渐变动画
  
• scale：缩放动画
  
• rotate：旋转动画
  

接下来是共享动画，其实就是两个页面都包含了同一个元素，进行的一种转场动画。这是Android5.0以后Google推出Material Design设计风格中包含的功能。

如何使用呢？

• 
  
• 第一个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属性，在跳转页面的时候也要用到它。
  

<ImageView

   android:id="@+id/iv"

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:scaleType="centerCrop"

   android:transitionName="share"/>

• 
  
• 跳转页面时使用ActivityOptionsCompat设置共享信息并传输给下个页面：
  

val optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, iv, "share")//iv是当前点击的图片  share字符串是第二个activity布局中设置的**transitionName**属性

startActivity(Intent(this, MainActivity10::class.java).apply {

    putExtra("data", url) //这里仍然可以正常传值

}, optionsCompat.toBundle()) //注意这里是转化为了bundle

• 
  
• 当然关闭页面的时候不再使用finish() 方法而是使用如下方式：
  

ActivityCompat.finishAfterTransition(this)

到此运行程序，就能达到和上面一样的动画效果。

遇到的坑：

• 
  
• 设置布局动画的时候，一定要记得在set标签内添加duration属性并赋值，否则不会有动画效果
  
• 布局动画作用于所有的Gr0upView
  
• 转场动画在选用共享属性的时候最好选用原生View。笔者之前尝试过一些第三方的ImageView，在跳到目标页的时候即便XML中将图片宽高设置为了match_parent，结果却只展示了图片本身的宽高。很有可能是自定义过程中计算和官方有冲突。
  
• 官方的转场动画从5.0开始支持
  

好了，以上便是布局动画和共享动画的结合效果的全部内容。大家可以根据自己的需求和喜好实现更多酷炫的效果，希望这篇内容能给大家带来收获！