Activity jump animation and View seamless connection, understand?

How do I set up my Activity’s switch animation?

In the last article we talked about Navigation toggle animations, but it’s also easy to switch animations in an Activity. However, we rarely set the activity to switch animations, which are generally the system default.

In the Activity class provides overridePendingTransition method:

The parameters are set to enter and exit the animation after the startActivity(Intent) or finish() method

Example: Jump from MainActivity to MainActivity2

val intent = Intent(MainActivity::class.java, MainActivity2: : class. Java) startActivity (intent) / / into the animation (for MainActivity2) and exit animation (for MainActivity) overridePendingTransition(R.anim.slide_in_left,R.anim.slide_out_right)Copy the code

R.anim.slide_in_left:

<? The XML version = "1.0" encoding = "utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="-100%" android:toXDelta="0%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="400"/> </set>Copy the code

R.anim.slide_out_right:

<? The XML version = "1.0" encoding = "utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0%" android:toXDelta="100%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="400"/> </set>Copy the code

End result:

To jump from ActivityA to ActivityB, A uses enter_anim and B uses exit_anim

We return with no action effect, so we can set it in Finish:

override fun finish() {
    super.finish()
    overridePendingTransition(R.anim.slide_in_left,R.anim.slide_out_right)
}
Copy the code

To return ActivityA from ActivtyB, B executes exit_anim and A executes enter_anim

Now we have a full jump animation:

Referring to the view animation introduced earlier, we can create a series of rotary zoom transparency animations. See the Demo for more animation effects.

View seamless connection

We often see in some apps when the interface jumps, some controls seem to be seamless, such as the search box, nine-grid images, etc

Now to make the ImageView seamless, add an image to the MainActivity interface:

<ImageView android:id="@+id/imageview" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_marginTop="32dp" android:adjustViewBounds="true" android:src="@drawable/test" android:transitionName="shareElement" app:layout_constraintEnd_toEndOf="parent" App: layout_constraintHorizontal_bias = "0.0" app: layout_constraintStart_toStartOf = "parent" app:layout_constraintTop_toBottomOf="@+id/radioGroup" />Copy the code

Android :transitionName=”shareElement” is used to set the shared element name and add the same controls to the ActivityB layout.

Use ActivityOptionsCompat to get shared elements. Note that it only works with Android 5.0 and above:

val bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(this,binding.imageview,"shareElement").toBundle()
val intent = Intent(this,MainActivity3::class.java)
startActivity(intent,bundle)
Copy the code

End result:

There is a noticeable lag in loading large bitmaps, so it is only recommended for native controls

Search box toggle:

Set multiple shared elements: Pair(View,TAG)

import androidx.core.util.Pair

val bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(this, Pair(binding.imageview,"shareElement"),
    Pair(binding.searchEdit,"shareSearch")
).toBundle()
val intent = Intent(this,MainActivity3::class.java)
startActivity(intent, bundle)
Copy the code

ActivityOptions

ActivityOptionsCompat sets shared elements, but there are many other methods in ActivityOptions

Specific can refer to the official document: developer.android.com/reference/a…

Personally, I don’t think these methods are very useful

Demo address: github.com/xluu233/Ani… The article code is slightly missing, please check the Demo for completeness, the whole project is still improving, welcome leaders to give advice. Humble Androider online for a Star😅