Introduction to this section:
Starting from this section, let’s explore the animations in Android. After all, adding some animations to the APP will make our applications more dazzling, such as the simplest way to turn off and on the Activity. Of course, custom control animations are definitely essential~ The animation in Android is divided into three categories, frame-by-frame animation (Frame) and tween animation (Tween) , as well as property animation (Property) introduced after Android 3.0 , and this section brings you the first one. Animation - a basic use of frame-by-frame animation~
1. Concept and usage of frame animation
Frame animation is very easy to understand. In fact, it is simply collected from N static pictures, and then we display these pictures in sequence through control. Because of the "visual residue" of the human eye, it will cause us the "illusion" of animation, and play the movie The principle is the same!
To implement frame animation in Android, generally we will use a Drawable explained earlier: AnimationDrawable first writes the Drawable, and then calls start() and stop() in the code to start or stop playing the animation~
Of course, we can also create frame-by-frame animations in Java code, create AnimationDrawable objects, and then call addFrame(Drawable frame, int duration) to add frames to the animation, and then call start() and stop()~
Let's write two examples to experience the effect of the next frame animation and familiarize yourself with the usage
2. Example of use:
Example 1: The simplest example :
Running effect diagram :
Code implementation :
First write our animation file, very simple, first create an anim directory under res, and then start our animation file: miao_gif.xml : Here android:oneshot is to set whether the animation is only played once, true only plays once, false Loop!
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item
android:drawable="@mipmap/img_miao1"
android:duration="80" />
<item
android:drawable="@mipmap/img_miao2"
android:duration="80" />
<item
android:drawable="@mipmap/img_miao3"
android:duration="80" />
<!--Limited to space, omit other items, make up by yourself-->
...
</animation-list>
With the animation file, go to our layout file: activity_main.xml :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btn_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="start" />
<Button
android:id="@+id/btn_stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="stop" />
<ImageView
android:id="@+id/img_show"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:background="@anim/miao_gif" />
</LinearLayout>
Finally, our MainActivity.java , here controls the start and pause of the animation:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button btn_start;
private Button btn_stop;
private ImageView img_show;
private AnimationDrawable anim;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bindViews();
anim = (AnimationDrawable) img_show.getBackground();
}
private void bindViews() {
btn_start = (Button) findViewById(R.id.btn_start);
btn_stop = (Button) findViewById(R.id.btn_stop);
img_show = (ImageView) findViewById(R.id.img_show);
btn_start.setOnClickListener(this);
btn_stop.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_start:
anim.start();
break;
case R.id.btn_stop:
anim.stop();
break;
}
}
}
OK, it's very simple~
Example 2: Play frame animation at a specified place
Running effect diagram :
Code implementation :
Still upload our animation file first: anim_zhuan.xml :
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item
android:drawable="@mipmap/img_zhuan1"
android:duration="80" />
<item
android:drawable="@mipmap/img_zhuan2"
android:duration="80" />
<item
android:drawable="@mipmap/img_zhuan3"
android:duration="80" />
<!--Limited to space, omit other items, make up by yourself-->
...
</animation-list>
Next, let's write a custom ImageView: FrameView.java , where the currently played frame is obtained through reflection, and whether it is the last frame, if yes, hide the control!
/**
* Created by Jay on 2015/11/15 0015.
*/
public class FrameView extends ImageView {
private AnimationDrawable anim;
public FrameView(Context context) {
super(context);
}
public FrameView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public FrameView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public void setAnim(AnimationDrawable anim){
this.anim = anim;
}
public void setLocation(int top,int left){
this.setFrame(left,top,left + 200,top + 200);
}
@Override
protected void onDraw(Canvas canvas) {
try{
// Reflection calls the mCurFrame value in AnimationDrawable
Field field = AnimationDrawable.class
.getDeclaredField("mCurFrame");
field.setAccessible(true);
int curFrame = field.getInt(anim);// Get the current frame of the anim animation
if (curFrame == anim.getNumberOfFrames() - 1)// If it has reached the last frame
{
//Let the View hide
setVisibility(View.INVISIBLE);
}
}catch (Exception e){e.printStackTrace();}
super.onDraw(canvas);
}
}
Finally, our MainActivity.java creates a FrameLayout, adds a View, handles the event pressed in the touch event, displays the control and starts the animation~
public class MainActivity extends AppCompatActivity {
private FrameView fView;
private AnimationDrawable anim = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
FrameLayout fly = new FrameLayout(this);
setContentView(fly);
fView = new FrameView(this);
fView.setBackgroundResource(R.anim.anim_zhuan);
fView.setVisibility(View.INVISIBLE);
anim = (AnimationDrawable) fView.getBackground();
fView.setAnim(anim);
fly.addView(fView);
fly.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
/ / Set the animation effect when pressed
if(event.getAction() == MotionEvent.ACTION_DOWN){
anim.stop();
float x = event.getX();
float y = event.getY();
fView.setLocation((int) y - 40,(int)x-20); //View display position
fView.setVisibility(View.VISIBLE);
anim.start(); //Start animation
}
return false;
}
});
}
}