In the process of playing with mobile phones, if we click on a certain page, there will be a phenomenon of page animation loading or animation effect. Now let's take a look at how to achieve animation effects in App development.
Table of contents
Classification of animation
Among the animations used by common apps, the common ones are frame-by-frame animation, tween animation and attribute animation. These three animations have their own advantages. Let's take a look at how they are implemented:
Frame by frame animation:
Frame-by-frame animation, as the name implies, means that the content of the animation is composed of pictures, so we only need to set the display order of these pictures and the realization of the display to achieve the effect of frame-by-frame animation.
To achieve frame-by-frame animation, we must first have several animations. I have prepared the following 6 pictures, and I plan to make them appear at regular intervals like a slideshow:
After preparing the photos, it is time to create an animation list to play these pictures: we create a new animation (animation) type xml file under the drawable file to store these pictures to be played according to the animation effect, so that these The picture can be displayed frame by frame. After creation, we remember to change the position of the red circle below to animation-list, so as to create an animation-type control:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:ignore="MissingDefaultResource">
<item android:drawable="@drawable/pic2" android:duration="220"/>
<item android:drawable="@drawable/pic2" android:duration="220"/>
<item android:drawable="@drawable/pic3" android:duration="220"/>
<item android:drawable="@drawable/pic4" android:duration="220"/>
<item android:drawable="@drawable/pic5" android:duration="220"/>
<item android:drawable="@drawable/pic6" android:duration="220"/>
</animation-list>After preparing the animation to play, next we need to prepare a Relativelayout layer to accommodate the animation xml file. The xml file here can be roughly regarded as a picture, but it is just a moving picture, so when we process them Can be processed in a similar manner to the picture. We set the background as the animation xml file, so that the animation xml file can be displayed on the background frame by frame, and an area can also be adjusted here to set the "picture" so that it is not played in full screen. Because the position where we set this "picture" is the background of Relativelayout. Since our picture can be used as the background, the picture can also be displayed in an area, so we can also draw an area to place it:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/animation"
android:id="@+id/Relid"
/>After setting these, we can create this layer directly in the Main program. First, we must create a Relativelayout layer, and find the layer we set before through findbyid and pass it to the created variable, and then Instantiate a variable animation of animation type. In order to trigger this animation effect, we also set to call the click effect function in Relativelayout to set the click to start the animation effect. The start of the animation effect is to call the start method in the animation type variable animation, and the end is to call the stop method:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RelativeLayout relativeLayout = findViewById(R.id.Relid);
AnimationDrawable animationDrawable = (AnimationDrawable) relativeLayout.getBackground();
relativeLayout.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View view) {
animationDrawable.start();
}
});
}Motion tween:
Now that we've looked at frame-by-frame animation, let's take a look at tween animation. The so-called tween animation is the operation of manipulating pictures for translation, scaling, rotation and transparency setting.
To operate on an image, first we need to prepare an image:
<ImageView
android:id="@+id/img1"
android:layout_width="0dp"
android:layout_height="300dp"
android:layout_marginStart="54dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="54dp"
android:src="@drawable/pic5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />After preparing the pictures to be operated, we need to create a new folder under the res folder and name it "anim" (must be called anim, other names do not have Animation Resource file ) , and then Then create an Animation Resource file under this folder:
The picture below shows the file after changing the name of the anim, and there is no Animation Resource file in it:
This Animation Resource file is written to record our operations. The tween animation has four operations on the picture: Alpha, rotate, translate, and scales. Corresponding to: transparency change, rotation, translation and scaling. Let's take a look at the implementation of the four transformations:
alpha：
alpha means to process the transparency of the image. When we create an Animation Resource file in the anim directory, we will get a set node, and we will create an aplha node in the node, as shown in the figure below. This node is used to configure image transparency processing information. fromalpha indicates the transparency of the image at the beginning. Here, I choose to be completely opaque. The effect I want is that the image is completely opaque at the beginning. After I click, it will gradually become transparent, so I choose 0 for toalpha. A very important setting here is duration, which indicates the duration of the transparency change of the image and must be set.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="1"
android:toAlpha="0"
android:duration = "6000"
/>
</set>Change effect (during change):
rotate：
This represents the picture rotation animation, which is similar to the previous one, but the configuration method is different. The fromDegrees here indicates the angle of the picture at the beginning. I set it to 0 degrees. The angle after the rotation is toDegrees. I set it to 180 degrees. The rotation axes are pivotX and pivotY, which respectively indicate where the rotation axis is in the picture, 50% , 50% means half of the X and Y axes, that is, the center.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="180"
android:pivotX="50%"
android:pivotY="50%"
android:duration = "6000"
/>
</set>Rotation effect (during change):
translate：
This transformation is a translation transformation. Since it is a translation, the initial position and the end position are required. The initial positions fromXdelta and fromYDelta are directly set to 0,0. The end position is set to a movement amount of 20 for X and 300 for Y.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="20"
android:toYDelta="100"
android:duration = "6000"
/>
</set>Moving process:
scale：
This operation represents a scaling effect, and it also has a central axis for scaling. Here we set it as the midpoint as usual. Since it is zoomed, it is inevitable to have the ratio before zooming and the ratio after zooming. We set the fromXScale and fromYScale before scaling to 1, which is the original state. And the scaled toXScale and toYScale can be set to both 0.5. This transformation means reducing the length and width of the picture by 0.5.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1"
android:fromYScale="1"
android:toXScale="0.5"
android:toYScale="0.5"
android:duration = "6000"
/>
</set>Zoom effect (during change):
After understanding the four changing effects, the next step is to set the changing effects in the picture. First, create the picture in the Main method as usual, and set the click method. If we want to use the animation effect here, we need to load the animation effect into the picture. First, we instantiate an animation object an. Then load this object into an through the loadAnimation method of AnimationUtils. The loadAnimation method has two parameters, one is the context, and the other is the 4 animation effects we created before. Find which one to load and pass it in. . The last is to call the startAnimation method of the picture control, and pass the object of the animation effect as a parameter.
ImageView imageView = findViewById(R.id.img1);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Animation an = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scales);
imageView.startAnimation(an);
}
});