一点也不炫酷的Navigation动画

Posted by 卢小胖 on 2021-08-19
Estimated Reading Time 3 Minutes
Words 841 In Total
Viewed Times

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

通常我们设置一个跳转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 结束状态

具体的参数太多了,可以参考:
https://www.jianshu.com/p/1aabbd498262
https://wiki.jikexueyuan.com/project/android-animation/1.html

接下来我们自己定义一些跳转动画,为了让大家看清楚,时间设置的会长一点,实际使用建议设置短一点,这样看起来干净利落。我一般将经场动画设置为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

从下往上出现

旋转

如果你想玩点花的,还可以这样子:


最后附上代码:
https://github.com/xluu233/NavigationAnim

卑微Androider在线求个Star😅

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