阅读 802
一点也不炫酷的Navigation动画

一点也不炫酷的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😅

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

文章分类
Android
文章标签