The introduction

As we all know, an app without animation is just like a body without soul, giving users poor experience. Android now has unprecedented development in animation effects, 1.View animation frame 2. 3.Drawable animation. Compared to the latter two, the View animation framework has been around since the very beginning of Android, which has the advantages of being very easy to learn, but also has the disadvantages of being too dead to use, but for beginners, pig dog can achieve a variety of optional effects.

composition

For View animation frames, the most common are:

AlphaAnimation
RotateAnimation,
ScaleAnimation,
Four types of TranslateAnimation.

In addition, AnimationSet classes are provided, which are used to combine various basic animations for display.

use

For books on the market now 📚, the basic is in the active code, step by step set transparency, running time. To add an animation frame to the control. So I’m just going to stick to Java code addition and that would be boring. So here I introduce the use of the method, in addition to the basic code form to add, more XML file format writing, and in the activity directly reference 🚰 SAO operation.

If you’re interested in other animation methods like Drawable animation and property animation, please check out my future posts.

In /res, create a Directory named “anim” and place all future XML configuration files in that Directory.

<?xml version="1.0" encoding="utf-8"? >
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="true">
    <! -- Transparency changes -->
    <alpha
        android:fromAlpha="float"
        android:toAlpha="float" />
    <! -- Zoom animation -->
    <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float" />
    <! -- Pan animation -->
    <translate
        android:fromXDelta="float"
        android:toXDelta="float"
        android:fromYDelta="float"
        android:toYDelta="float" />
    <! -- Rotate animation -->
    <rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />
    <! -... -->
</set>
Copy the code

Now, I’ll start to lead you, using ImageView TextView as an example, to show how to use it, and start sending dry goods:

Before the start of the

Important point: Nag

I’m going to give you the layout file and I’m not going to give you the layout file

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".AlphaAnimationActivity"> <! <ImageView Android :id="@+id/image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"
        android:alpha="1.0"/ > <! <TextView Android :id="@+id/text"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:gravity="center"
        android:text="@string/text"
        android:background="@color/papayawhip"
        android:alpha="0.75"/>

</LinearLayout>
Copy the code

In the layout file, set alpha to the control to indicate maximum transparency

Transparency animation -> Alpha

Set the alpha animation in the XML file, which is divided into three main properties

FromAlpha means transparency at the beginning
ToAlpha indicates the transparency at the end
Duration Indicates how long it takes for a change to happen

Create the alpha_im.xml file under /res/anim

<? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="1000"/>
</set>
Copy the code

You then instantiate the Animate object directly in the activity and reference it

        Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
        animation.setFillAfter(false); ImageView ImageView = findViewById(r.idmage); ImageView = findViewById(R.idmage); imageView.startAnimation(animation); TextView textView = findViewById(R.id.text); textView.startAnimation(animation);Copy the code

Note that setFillAfter is used to set whether the control changes permanently or is restored after it is run

Run it to see the result:

Scale animation -> Scale

In the properties file (XML), the main labels for scale are as follows

Duration Run time
FromXScale The magnitude of the change in the horizontal direction
Size at the end of toXScale’s transverse change
FromYScale specifies the size of fromYScale when it starts to change along the vertical axis
ToYScale Specifies the size at the end of the change in the longitudinal direction
The pivotX scales the abscis of the center of the zoom/zoom
PivotY scales the vertical coordinates of the center of the zoom/zoom

<? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="2000"
        android:fromXScale="1.0"
        android:toXScale="0.0"
        android:fromYScale="1.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>
Copy the code

If you wish, you can set the default starting scale in the layout file:

Known by name:

ScaleX horizontal default scaling ratio
ScaleY vertical default scaling ratio

    <ImageView
        android:id="@+id/scale_image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"
        android:scaleY="0.75"
        android:scaleX="1.15"/>Copy the code

The following results can be achieved

Also reference the properties file in the activity:

Same as before, just change the file

. Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale_anim); animation.setFillAfter(false); ImageView ImageView = findViewById(R.i.s.cale_image); imageView.startAnimation(animation); .Copy the code

Run it to see what it looks like:

Translate animation -> Translate

Compared with other simple attribute animations, pan animations are simpler, with five main attributes:

Duration Run time
FromXDelta is at the beginning of the X axis
ToXDelta at the end of the X axis
FromYDelta is the starting position on the Y axis
The end position of toYDelta on the Y axis

Notice that there’s a special point here:

When determining positional attributes, there are three types of assignment methods:

Integer values: for example: Android :fromXDelta=”20″ indicates the distance from the left edge
Percentage: for example: Android :fromXDelta=”20%” indicates the percentage of their distance from the left border and their height
% +p: for example: Android :fromXDelta=”20%p” indicates the distance between itself and the parent control (generally ViewGroup) left boundary

Because of space issues, I’ll just show you how to use integer values

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

This can also be referenced in the layout file, starting with:

    <ImageView
        android:id="@+id/scale_image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"
        android:translationX="50sp"
        android:translationY="20sp"/>Copy the code

As you can see, the ImageView with the initial displacement is offset relative to the uninitialized TextView

Again, quote in the activity:

. Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_anim); animation.setFillAfter(false); ImageView ImageView = findViewById(R.i.s.cale_image); imageView.startAnimation(animation); .Copy the code

Run it to see what it looks like:

Rotate animation -> Rotate

For the rotating animation, everything was interesting, and my hands seemed tired

First, set the properties. For the rotation animation, the basic properties are:

Duration Animation time
FromDegrees Animation start Angle
ToDegrees End of animation deflection Angle
PivotX Pivots at point X
Pivot point Y on pivotY

The same rotation animation property can be set in three different ways, but this is primarily used for pivot position

Integer values: For example, Android :pivotX=”20″ indicates the distance to the left edge
Percentage: For example, Android :pivotX=”20%” indicates the distance to the left edge and the percentage of its own height
Percentage + P: For example, Android :pivotX=” 20%P “indicates the distance to the left edge of the parent control (generally ViewGroup)

<? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="+ 360"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>
Copy the code

As usual, add layout

    <ImageView
        android:id="@+id/scale_image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"/>Copy the code

Add code to the activity

. Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate_anim); animation.setFillAfter(false); ImageView ImageView = findViewById(R.i.s.cale_image); imageView.startAnimation(animation); .Copy the code

Let’s do the same thing

At this point, you may be picking at my thinning hair and asking me, why is this interesting? !

Ok, look!

360 degrees brainless spin, all right, I’m done. I’m not gonna tell you what I did. I’m gonna run

Just kidding, it’s actually very simple, in the layout file, set the tilt Angle

RotationX lateral inclination
RotationY longitudinal inclination

    <ImageView
        android:id="@+id/scale_image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"
        android:rotationX="50"
        android:rotationY="20"/>Copy the code

Time interpolator

Ok, that’s the end of the basic animation, now let’s do something drastic: yes: time interpolator

What is a time interpolator? I was really confused when I first started, but NOW I find it convenient to show you examples

use

First teach you the use of the method, finished in the zha transparency animation as an example to do fine introduction

Let’s start with our original transparency code:

<? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="1000"/>
</set>
Copy the code

In effect, we can see that this is a fairly uniform process

We simply add a line:

<? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_interpolator">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="5000"/>
</set>
Copy the code

Again, add the time to 10s to see the effect;

As you can see, the sudoku changes faster and faster, and this is the time interpolator:

Common time interpolators are:

Android :interpolator=”@android: interpolator /accelerate_interpolator” Sets animation to acceleration animation (animation playing is getting faster and faster)

That’s the example. I’m not going to talk about it here

Android :interpolator=”@android:anim/ theme “Animation is slowing down (animation is playing slower and slower)

Android :interpolator=”@android: interpolator/accelerate_activity “Animation is accelerated first in deceleration (start fastest gradually slowed down)

Android :interpolator=”@android: Anim/argate_interpolator “Will be executed in reverse order and then will be accelerated in reverse order again (equivalent to our spring, in which a short period will be compressed in reverse order and then will be interpolated at acceleration)

Android :interpolator=”@android: Anim/argate_overshoot_interpolator “in the same direction and then in the same position

Interpolator =”@android: interpolator /bounce_interpolator” Android :interpolator=”@android: interpolator /bounce_interpolator” android:interpolator=”@android:anim/ interpolator”

Android :interpolator=”@android: interpolator /cycle_interpolator” loop, animation loop a certain number of times, change the value to a sine function: math.sin (2* mCycles* math.pi * input)

Android :interpolator=”@android: interpolator /linear_interpolator” Linear uniform change

Android :interpolator=”@android: interpolator /overshoot_interpolator” Accelerates execution, interpolates after completion

Tween Animation

Having covered all the details above, let’s play with wave size. First we define a set of animations:

First of all, we define a properties file, but here we combine the two effects of scaling transparency:

<? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/bounce_interpolator" >

    <scale
        android:duration="500"
        android:fromXScale="0.1"
        android:fromYScale="0.1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />

    <alpha
        android:duration="500"
        android:fromAlpha="0"
        android:toAlpha="1.0" />

</set>
Copy the code

Then we in the code, set it to RecyclerView, for the RecyclerView Adapter writing method is omitted here, set the detailed method as follows:

    private List<String> list;

    private void iniList(){
        list = new ArrayList<>();
        for (int i = 0 ; i < 30 ; i ++){
            list.add(i + "-- tween test --");
        }
    }

    private void iniRecyclerView(){ recyclerView = findViewById(R.id.recycler); GridLayoutManager manager = new GridLayoutManager(this,1); recyclerView.setLayoutManager(manager); LayoutAnimationController lac=new LayoutAnimationController(AnimationUtils .loadAnimation(this, R.anim.in_anim)); Lac. SetDelay (0.5 f); lac.setOrder(LayoutAnimationController.ORDER_RANDOM); recyclerView.setLayoutAnimation(lac); TweenRecyclerAdapter adapter = new TweenRecyclerAdapter(list); recyclerView.setAdapter(adapter); }Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

After watching this animation frame of Never View again, I kneeled and rubbed the clothes board

The introduction

composition

use

Before the start of the

Transparency animation -> Alpha

Run it to see the result:

Scale animation -> Scale

Translate animation -> Translate

Rotate animation -> Rotate

Time interpolator

use

Tween Animation

Let’s run it and see how cool it looks:

Feel free to point out any errors in the comments section

After watching this animation frame of Never View again, I kneeled and rubbed the clothes board

The introduction

composition

use

Before the start of the

Transparency animation -> Alpha

Run it to see the result:

Scale animation -> Scale

Translate animation -> Translate

Rotate animation -> Rotate

Time interpolator

use

Tween Animation

Let’s run it and see how cool it looks:

Feel free to point out any errors in the comments section

Related Posts

Android right sidebar scroll to select

Android advanced Activity startup mode and application scenario details

Rust Build. Rs Advanced learning