Android animation is an indispensable requirement in development. With the increasingly complex animation effects of designers, it is necessary to master animation skills as a qualified Android engineer.
Frame-by-frame animation
Frame-by-frame animation is to make use of the effect of human visual staying, in constant change, feel the effect of animation, the designer gives a series of pictures that can be changed, the developer specifies the playing time of each picture, and then starts animation.
Step 1: Name all pictures in drawable order
Step 2 Create a file name under drawble that can be animation 1. XML
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false"
>
<item android:duration="100" android:drawable="@drawable/loading_11" />
<item android:duration="100" android:drawable="@drawable/loading_12" />
<item android:duration="100" android:drawable="@drawable/loading_13" />
<item android:duration="100" android:drawable="@drawable/loading_14" />
<item android:duration="100" android:drawable="@drawable/loading_15" />
<item android:duration="100" android:drawable="@drawable/loading_16" />
<item android:duration="100" android:drawable="@drawable/loading_17" />
<item android:duration="100" android:drawable="@drawable/loading_18" />
<item android:duration="100" android:drawable="@drawable/loading_19" />
<item android:duration="100" android:drawable="@drawable/loading_110" />
</animation-list>Step 3 Create layout files to meet requirements as needed
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:id="@+id/animationIV"
android:layout_gravity="center"
android:layout_width="50dp"
android:layout_height="50dp"
/>
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Start animation frame by frame"
/>
</LinearLayout>Step 4 Binds the layout in the code to start the animation core code as follows
public class MainActivity extends AppCompatActivity {
ImageView animationIV;
Button button1;
private AnimationDrawable animationDrawable;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
animationIV= (ImageView) findViewById(R.id.animationIV);
button1= (Button) findViewById(R.id.button1);
button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
animationIV.setImageResource(R.drawable.default_loading);
animationDrawable = (AnimationDrawable) animationIV.getDrawable();
animationDrawable.start();
}
});
}
}II. Intermediate Animation
Inter-complement animation is a popular animation. It only needs to define two key frames at the beginning and end of the animation, and specify the time and manner of animation changes. It mainly includes four kinds of animation, transparency change Alpha, size change Scale, displacement change Translate and rotation change Rotate. These four effects can be dynamically combined to achieve complex animation effects.
2.1Alpha Animation Animation
Step 1 Define the layout in anim
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="200"
></alpha>
</set>Step 2: Design the layout
<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" tools:context="viewdraw.animation.MainActivity"
android:orientation="vertical"
>
<ImageView
android:id="@+id/img1"
android:layout_gravity="center_horizontal"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@mipmap/ic_launcher"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="0dp" />
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="xml Way to Start Transparent Animation"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp" />
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Code way to start transparent animation"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp" />
</LinearLayout>Step 3 binds in code
button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.alpha);
img.startAnimation(animation);
}
});Or it can be implemented directly in code
button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
alphaAnimation.setDuration(1000);
img.startAnimation(alphaAnimation);
}
});2.2 Scale Animation Zoom Animation
Step 1 Configure the xml file
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="2000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="0.1"
android:toYScale="0.1"
android:pivotX="50%"
android:pivotY="50%"
></scale>
</set>Configuration layout file is the same as above
Binding code
button3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale);
img.startAnimation(animation);
}
});Code implementation
button4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//Parameter 1 is the size of animation start x, the size of animation end x, the size of animation start Y, the size of animation end Y, the size of animation end Y, the size of reference object 6 x, the zoom point of reference object 8 Y
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 4f,1.0f,4.0f,Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,0.0f);
scaleAnimation.setDuration(1000);
img.startAnimation(scaleAnimation);
}
});2.3 Translate Animation Displacement Animation
xml configuration file
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
>
<translate
android:duration="2000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100"
android:toYDelta="0"
></translate>
</set>The layout is the same as above.
Code binding implementation
button5.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
img.startAnimation(animation);
}
});
//Direct Code Implementation
button6.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
TranslateAnimation animation= new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,100f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);
img.startAnimation(animation);
}
});
}2.4 Rotate Animation Rotation Animation
xml configuration file
<rotate
android:duration="2000"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotY="50%"
android:pivotX="50%"
></rotate>Layout file is the same as above
Code layout
button7.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate); img.startAnimation(animation);
img.startAnimation(animation);
}
});Direct Code Implementation
button8.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
RotateAnimation animation= new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
animation.setDuration(2000);
img.startAnimation(animation);
}
});III. Attribute Animation
In the interpolation animation, the real attributes of View have not been changed, and the attribute animation can directly change the attribute values of View objects. In a sense, the attribute animation is an enhanced version of interpolation animation.
3.1 Direct Code
Layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="@+id/img"
android:layout_gravity="center_horizontal"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@mipmap/ic_launcher"
/>
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Start Attribute Animation Stretching X"
/>
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Start Attribute Animation Transparent"
/>
<Button
android:id="@+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Start Property Animation Rotation"
/>
<Button
android:id="@+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Start Property Animation Move"
/>
<Button
android:id="@+id/button5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Start Attribute Animation Listener Set"
/>
</LinearLayout>
Code file
package viewdraw.propertyanimation;
import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
ImageView imageView;
Button button,button2,button3,button4,button5;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView= (ImageView) findViewById(R.id.img);
button= (Button) findViewById(R.id.button1);
button2= (Button) findViewById(R.id.button2);
button3= (Button) findViewById(R.id.button3);
button4= (Button) findViewById(R.id.button4);
button5= (Button) findViewById(R.id.button5);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator scaleY = ObjectAnimator.ofFloat(imageView, "scaleY", 0, 3,1);
scaleY.setDuration(2000);
scaleY.start();
}
});
button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator alpha = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0f);
alpha.setDuration(2000);
alpha.start();
}
});
button3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator rotation = ObjectAnimator.ofFloat(imageView, "rotation", 0, 360);
rotation.setDuration(2000);
rotation.start();
}
});
button4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator alpha = ObjectAnimator.ofFloat(imageView, "translationX", 0f, 500f);
alpha.setDuration(2000);
alpha.start();
}
});
button5.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ObjectAnimator moveIn = ObjectAnimator.ofFloat(imageView, "translationX", -500f, 0f);
ObjectAnimator rotate = ObjectAnimator.ofFloat(imageView, "rotation", 0f, 360f);
ObjectAnimator fadeInOut = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0f, 1f);
AnimatorSet animSet = new AnimatorSet();
animSet.play(rotate).with(fadeInOut).after(moveIn);
animSet.setDuration(5000);
animSet.start();
animSet.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
Toast.makeText(getApplicationContext(),"The animation begins",Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimationRepeat(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
Toast.makeText(getApplicationContext(),"The animation is over",Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimationCancel(Animator animation) {
}
});
}
});
}
}