一点也不炫酷的Navigation动画

在上一篇中我们说到了使用Navigation导航Fragment，介绍了Navigation的基本使用，然后突然想到做一些Fragment的跳转动画，所以产生了一些内容哈哈哈

Navigation中使用动画

通常我们设置一个跳转action是酱紫的：

<action
    android:id="@+id/action_scale1"
    app:destination="@id/fragmentTwo"
    app:enterAnim="@anim/scale_in_right"
    app:exitAnim="@anim/scale_out_left"
    app:popExitAnim="@anim/scale_out_right"
    app:popEnterAnim="@anim/scale_in_left"/>

可以点击Fragment,通过傍边的小箭头设置：

其中可以设置目的地，动画，返回地址：

设置动画需要在res目录下新建anim文件夹，保存动画xml文件：

关于几个参数的介绍：

属性	详情
app:enterAnim	目标Fragment进场动画
app:exitAnim	原Fragment退出动画
app:popExitAnim	返回时，原Fragment退出动画
app:popEnterAnim	返回Fragment进场动画

动画属性说明

这里使用的是补间动画，就是显示样式看起来改变了，其实view的实际位置是没有变化的：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:fillAfter="true"
    android:fillBefore="true"
    android:interpolator="@[package:]anim/interpolator_resource"
    android:repeatMode="restart | reverse"
    android:repeatCount = “0”
    android:shareInterpolator="true"
    android:startOffset="float">
    <alpha
        android:fromAlpha="float"
        android:toAlpha="float" />
    <scale
        android:fromXScale="float"
        android:fromYScale="float"
        android:pivotX="float"
        android:pivotY="float"
        android:toXScale="float"
        android:toYScale="float" />
    <rotate
        android:fromDegrees="float"
        android:pivotX="float"
        android:pivotY="float"
        android:toDegrees="float" />
    <translate
        android:fromXDelta="float"
        android:fromYDelta="float"
        android:toXDelta="float"
        android:toYDelta="float" />
</set>

常用的属性：

属性	介绍
alpha	透明度设置效果
scale	大小缩放效果
rotate	旋转效果
translate	位移效果

常用设置：

属性	介绍
android:duration	动画时长
fromXX	开始状态
toXX	结束状态

具体的参数太多了，可以参考：
www.jianshu.com/p/1aabbd498…
wiki.jikexueyuan.com/project/and…

接下来我们自己定义一些跳转动画，为了让大家看清楚，时间设置的会长一点，实际使用建议设置短一点，这样看起来干净利落。我一般将经场动画设置为400ms，出场动画设置为250ms

样式总结

渐入渐出样式

AS提供了一些默认的动画，是渐入渐出样式：

<action
    android:id="@+id/action_default"
    app:destination="@id/fragmentTwo"
    app:enterAnim="@anim/nav_default_enter_anim"
    app:exitAnim="@anim/nav_default_exit_anim"
    app:popEnterAnim="@anim/nav_default_pop_enter_anim"
    app:popExitAnim="@anim/nav_default_pop_exit_anim"/>

平移样式

自定义平移样式，主要是设置X轴偏移：

<translate
    android:duration="400"
    android:fromXDelta="100%"
    android:toXDelta="0%"
    android:fromYDelta="0%"
    android:toYDelta="0%"/>

缩放样式1

自定义缩放样式，translate配合scale使用：

<translate
    android:fromXDelta="-100%"
    android:toXDelta="0%"
    android:fromYDelta="0%"
    android:toYDelta="0%"
    android:duration="300"/>

<scale
    android:duration="300"
    android:fromXScale="0.5"
    android:fromYScale="0.5"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1"
    android:toYScale="1" />

缩放样式2

缩放样式3

从下往上出现

旋转

如果你想玩点花的，还可以这样子：

---

最后附上代码： github.com/xluu233/Nav…

卑微Androider在线求个Star😅

相关阅读：
封装一个好看的吐司工具