In the last article, we talked about the use of Navigation Navigation Fragment and introduced the basic use of Navigation. Then we suddenly thought of doing some jump animations of fragments, so we produced some content hahaha

Use animations in Navigation

Usually we set a jump action like this:

<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"/>
Copy the code

You can click on the Fragment and set it with the small arrow next to it:

Where you can set destination, animation, return address:

To set up the animation, create a new anim folder under the RES directory and save the animation XML file:

Introduction to several parameters:

attribute details
app:enterAnim Target Fragment comes into play animation
app:exitAnim The original Fragment exits the animation
app:popExitAnim When you return, the original Fragment exits the animation
app:popEnterAnim Return to the Fragment entry animation

Animation property Description

Here we use the tween animation, which means that the display style looks changed, but the actual position of the view is unchanged:

<? The 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>Copy the code

Common attributes:

attribute introduce
alpha Transparency Settings
scale Size scaling effect
rotate Effect of rotation
translate The displacement effect

Common Settings:

attribute introduce
android:duration Animation duration
fromXX Start state
toXX End state

There are too many specific parameters, you can refer to: www.jianshu.com/p/1aabbd498… Wiki.jikexueyuan.com/project/and…

Next, we will define some jump animations ourselves. In order to make it clear, we will set the time to be longer and the actual time is recommended to be shorter so that it looks clean. I usually set the post-scene animation to 400ms and the exit animation to 250ms

Style summary

Fade in and out style

AS provides some default animations that are in and out:

<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"/>
Copy the code

Translation style

Custom translation style, mainly set X-axis offset:

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

Scale Style 1

Customize the scale style, translate with 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" />Copy the code

Scale Style 2

Scale Style 3

From the bottom up

rotating

If you want to do something fancy, you can go like this:

Finally, attach the code: github.com/xluu233/Nav…

Humble Androider online for a Star😅

Related reading: Encapsulate a good-looking toast tool