Alpha. Automatically animates layout updates

The Android system provides preloaded animations that run after each layout change. We only need to set one property in the layout to achieve the following animation effect:

AddView and removeView:

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"<! - automatic preload animation - > android: animateLayoutChanges ="true". />Copy the code

Use transitions to animate layout changes

With Android’s transition framework, we only need to provide the start and end layouts, and the transition framework automatically animates the movement from the start to the end. Let’s start with an effect:

Android provides us with several types of animation, see below:

The basic process for adding animations between the two layouts is as follows:

  1. Create Scene objects for the start and end layouts. Usually the starting layout is automatically determined based on the current layout.
  2. Create a Transition object to define the type of animation you want.
  3. Call TransitionManager.go() and the system automatically runs an animation to swap layouts.

Ok, the above effect, the core code is shown below, the main layout of the Activity:

res/layout/anim_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">... <FrameLayout android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/scene_root". > <include layout="@layout/starting_scene" />
    </FrameLayout>
    ...
</RelativeLayout>
Copy the code

The layout of the first scenario is defined as follows:

res/layout/starting_scene.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/scene_container">
    <TextView
        android:id="@+id/tv_recommend_reduction"
        android:text="Recommended". /> </RelativeLayout>Copy the code

The layout of the second scenario is defined as follows:

res/layout/ending_scene.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="150dp"
    android:layout_height="72dp"
    android:id="@+id/scene_container">
    <ImageView
        android:id="@+id/tv_recommend_bigger"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@mipmap/recommend". /> <LinearLayout ... > <TextView android:id="@+id/tv_avoid_jam_bigger"
            android:text="Avoid congestion.". /> <TextView android:id="@+id/tv_prior_expressway_bigger"
            android:text="High speed first". /> </LinearLayout> </RelativeLayout>Copy the code

Of course, in addition to creating a layout in XML, we can also create a layout directly in dynamic code, so I won’t go into detail here. After that, we can create the corresponding Scene:

    ViewGroup sceneRoot = (ViewGroup) findViewById(R.id.scene_root);
    Scene startScene = Scene.getSceneForLayout(sceneRoot, R.layout.starting_scene, this);
    Scene endingScene = Scene.getSceneForLayout(sceneRoot, R.layout.ending_scene, this);
Copy the code

Let’s redefine the style of the animations between scenes, in this case using changeBounds:

    Transition transition = new ChangeBounds();
Copy the code

Of course, we can also specify the animation style in the resource file, the effect is the same, create the resource XML:

res/transition/change_bounds_transition.xml

Refer to it in code like this:

    Transition transition =
                TransitionInflater.from(this).inflateTransition(R.transition.change_bounds_transition);
Copy the code

Finally start animation:

    TransitionManager.go(endingScene, transition);
Copy the code

Gamma. Vectors can draw objects

A vector drawable object is a drawable object that can be scaled without pixelation or blurring. Through AnimatedVectorDrawable class (backwards compatible AnimatedVectorDrawableCompat), we can for the attributes of the object vector can map to add animation effects, such as rotating or change the path to the data to other images. Here’s an effect:

Vector can draw object to add animation effect, need 3 XML files:

  • A vector-drawable object where the < vector > element is located in res/drawable/
  • An animated vector drawable object located at res/drawable/
  • One or more object animators, where the < objectAnimator > element is located in res/ Animator /

The first < vector > file is shown below, where the < group > element defines a set of paths or subgroups, and the < path > element defines the path to be drawn (see section end for how path is obtained). The Android: Name attribute, on the other hand, specifies a unique name for each group and path so that we can refer to them through the Animator definition:

res/drawable/vectordrawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="300dp"
    android:width="300dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup" >
        <path
            android:name="v"
            android:fillColor="#7AD6CA"
            android:pathData="M312.93248, 211.45199 l95, 0 l0, 36 l - 95, 0 l0, z - 36" />
    </group>
</vector>
Copy the code

The second < animated-vector > file, shown below, is referenced by the name in the vector-drawable object < vector > :

res/drawable/animatorvectordrawable.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vectordrawable" >
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>
Copy the code

The third < objectAnimator > file, shown below, changes the path of a vector drawable object from one shape to another, noting that both paths must be compatible with deformation:

res/animator/path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="1500"
        android:propertyName="pathData"
        android:valueFrom="M312.93248, 211.45199 l95, 0 l0, 36 l - 95, 0 l0, z - 36"
        android:valueTo="M338.93249, 188.45199 l40, 0 l0, 91 l - 40, 0 l0, - 91 - z"
        android:valueType="pathType" />
</set>
Copy the code

Finally, get the corresponding AnimatedVectorDrawable object and start animating:

    ImageView imageView = findViewById(R.id.vector_image);
    imageView.setBackgroundResource(R.drawable.animatorvectordrawable);
    // Android 5.0 (API 21) or later
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        AnimatedVectorDrawable rocketAnimation = (AnimatedVectorDrawable) imageView.getBackground();
        imageView.setOnClickListener((View) -> rocketAnimation.start());
    }
Copy the code

For vector map path, we can use the online drawing tool editor.method.ac/. After drawing the graph, click View ->Source to view the graph path. Or use shapeshift.design/to export the Animated Vector Drawable directly.

δ. Clipping view animation

Using the method provided by the system ViewAnimationUtils, we can easily achieve the following effects:

See below for its usage method and parameter description:

    final View shape = findViewById(R.id.circle);
    Animator circularReveal = ViewAnimationUtils.createCircularReveal(
            shape, // To crop a circular View
            0.0.// Animate the x and y coordinates of the center of the circle relative to the view
            0.// Animate the radius at the beginning of the circle
                   // Animation circle end radius
            (float) Math.hypot(shape.getWidth(), shape.getHeight()));
    circularReveal.setDuration(3000);
    circularReveal.setInterpolator(new AccelerateDecelerateInterpolator());

    // start the animation
    circularReveal.start();
Copy the code

This is our shape: View see below:

    <View android:id="@+id/circle"
       android:layout_width="96dp"
       android:layout_height="96dp"
       android:layout_centerInParent="true"/>
Copy the code

For a more detailed understanding of animation, check out the Google Developer website. In the next section, I’ll look at transition animations between activities. Stay tuned.

That’s the end of this article. If this article is useful to you, give it a thumbs up, everyone’s affirmation is also the motivation of dumb I to keep writing.