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

今天给我们带来能够提升用户体会感的交互动画，运用起来非常简略，体会作用非常赞。其间仅运用到布局动画和同享动画。废话不多说，直接上作用图：

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

怎么样，作用看起来还不错吧。这其实都是官方提供的作用，接下来让我给我们简略分享下整套作用完成的过程和其间遇到的一些问题。

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

布局动画的作用于ViewGroup，履行动画作用的是内部的子View。布局动画在Android中能够通过LayoutAnimation或LayoutTransition来完成。咱们这里直接运用LayoutAnimation方式。在项目目录res下新建anim文件夹，并在其间新建layout_slid_from_right.xml文件和slide_from_right.xml两个文件：

//GroupView中设置动画文件
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特点并赋值，不然不会有动画作用
  • 布局动画作用于一切的GroupView
  • 转场动画在选用同享特点的时分最好选用原生View。笔者之前尝试过一些第三方的ImageView，在跳到目标页的时分即使XML中将图片宽高设置为了match_parent，结果却只展示了图片本身的宽高。很有可能是自定义过程中核算和官方有抵触。
  • 官方的转场动画从5.0开端支撑

好了，以上便是布局动画和同享动画的结合作用的全部内容。我们能够依据自己的需求和喜爱完成更多酷炫的作用，希望这篇内容能给我们带来收获！