In the project, we asked to make a paper airplane function: when this interface is opened, four paper airplanes will fly in from the left side of the screen, and then reach their own position to sit up and down, and the clouds will continue to float from the right side of the screen to the left side of the screen. When you click on one of the paper planes, the paper plane first flies upwards from the outside of the screen, then flies in from the left side. When the plane returns to its original position, a message box pops up. The following code is directly listed:
1. First, customize a RelativeLayout, the main purpose is to create an entry animation of the plane:
public class PaperPlaneLayout extends RelativeLayout implements {
private OnClickListener mOnClickListener;
//The width and height of the custom layout private int mHeight;
private int mWidth;
private LayoutParams lp;
private Drawable[] drawables;
private Random random = new Random();
//Get the width and height of 4 paper planes private int dHeight;
private int dWidth;
private int mX;
private int mY;
public PaperPlaneLayout(Context context) {
super(context);
init();
}
public PaperPlaneLayout(Context context,
AttributeSet attrs) {
super(context, attrs);
init();
}
public PaperPlaneLayout(Context context,
AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public PaperPlaneLayout(Context context,
AttributeSet attrs,int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
// Initialize the displayed picture drawables = new Drawable[4];
Drawable pink =
getResources().getDrawable(.pl_pink);
Drawable yellow =
getResources().getDrawable(.pl_yellow);
Drawable green =
getResources().getDrawable(.pl_green);
Drawable blue =
getResources().getDrawable(.pl_blue);
drawables[0] = blue;
drawables[1] = yellow;
drawables[2] = green;
drawables[3] = pink;
// Get the width and height of the graph for subsequent calculations // Note that the size of the 4 pictures here is the same, so I only took one dHeight = (getContext(), 80);
dWidth = (getContext(), 80);
lp = new LayoutParams(dWidth, dHeight);
}
@Override
protected void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
(widthMeasureSpec, heightMeasureSpec);
mWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
}
//The entrance to the real animation starts is called from the outside. x and y represent the aircraft entering respectively //Stop location coordinate public void addHeart(int x, int y, int position) {
mX = x;
mY = y;
ImageView imageView = new ImageView(getContext());
// Choose one randomly (drawables[position]);
(lp);
addView(imageView);
//Get the animation before and after entry Animator set = getAnimator(imageView);
();
(this);
}
private Animator getAnimator(View target) {
AnimatorSet set = getEnterAnimator(target);
AnimatorSet set2 = getLineAnimation(target);
AnimatorSet finalSet = new AnimatorSet();
(set, set2);
(new LinearInterpolator());
(target);
return finalSet;
}
private AnimatorSet getEnterAnimator(final View target) {
ObjectAnimator alpha = ObjectAnimator
.ofFloat(target, , 0.2f, 1f);
ObjectAnimator translationX = ObjectAnimator
.ofFloat(target, View.TRANSLATION_X,
-2 * mWidth, -mWidth);
AnimatorSet enter = new AnimatorSet();
(500);
(new LinearInterpolator());
(translationX, alpha);
(target);
return enter;
}
private AnimatorSet getLineAnimation(final View iconView) {
ObjectAnimator transX = ObjectAnimator
.ofFloat(iconView, "translationX", -dWidth, mX);
ObjectAnimator transY = ObjectAnimator
.ofFloat(iconView, "translationY",
(mHeight - dHeight) / 2, mY);
transY.
setInterpolator(PathInterpolatorCompat
.create(0.7f, 1f));
AnimatorSet flyUpAnim = new AnimatorSet();
(900);
(transX, transY);
(iconView);
return flyUpAnim;
}
@Override
public void onClick(View v) {
if (mOnClickListener != null) {
((ImageView) v);
}
}
//Define ImageView click event public interface OnClickListener {
void onClick(ImageView v);
}
2. Next is the construction of the layout file(Only select a portion of the controls)
<RelativeLayout
xmlns:andro
android:
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/paper_plane_bg">
<!--Baiyun-->
<ImageView
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/paper_plane_cloud"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp" />
<!--Customized airplane layout animation-->
<
android:
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
3. Next, you can use it in the Activity:
public class PlaneActivity extends AppCompatActivity{
@Bind(.img_white_cloud)
ImageView mImgWhiteCloud;
@Bind(.plane_layout)
PaperPlaneLayout mPlaneLayout;
private Context mContext;
private ObjectAnimator objCloudAnim;
private TranslateAnimation planeAnimation;
private float iconX, iconY;
//Set whether the aircraft has been clicked. If true, the other aircraft cannot be clicked. private boolean mIsClick = true;
@Override
protected void onCreate(Bundle savedInstanceState) {
(savedInstanceState);
setContentView(.activity_plane_layout);
(this);
mContext = getApplicationContext();
//Initialize the animation initAnimation();
initListener();
}
private void initAnimation() {
//Set the location where the paper plane enters initPlaneEnterAnimation();
//Float up and down after the plane enters initPlaneAnimation();
//The cloud loop floats from the right side of the screen to the left side of the screen initCloudAnimation();
}
//Set the location where the paper plane enters private void initPlaneEnterAnimation() {
for (int i = 0; i < 4; i++) {
final int temp = i;
(new Runnable() {
@Override
public void run() {
//The following values are set by the user if (temp == 0) {
(
100dp, 140dp, 0);
}
if (temp == 1) {
(
Screen width - 120dp, 190dp, 1);
}
if (temp == 2) {
(
30dp, 240dp, 2);
}
if (temp == 3) {
(
Screen width - 210, 290, 3);
}
}
});
}
}
//Float up and down after the plane enters private void initPlaneAnimation() {
planeAnimation = new TranslateAnimation(0, 0, -10, 10);
(1000);
();
();
(planeAnimation);
();
}
//The cloud loop floats from the right side of the screen to the left side of the screen private void initCloudAnimation() {
if (objCloudAnim == null) {
objCloudAnim = ObjectAnimator
.ofFloat(mImgWhiteCloud, "translationX",
Screen width - 50, -Screen width);
// Set duration (5000);
// Set loop playback (
);
}
();
}
private void initListener() {
(new
() {
@Override
public void onClick(ImageView v) {
if (mIsClick) {
mIsClick = false;
iconX = ();
iconY = ();
//When clicking on a certain paper plane, the plane will have a flying out animation planeOutAnimation(v);
}
}
});
}
/**
* Airplane flying out animation
*/
private void planeOutAnimation(final View iconView) {
AnimatorSet flyUpAnim = new AnimatorSet();
(600);
ObjectAnimator transX = ObjectAnimator
.ofFloat(iconView, "translationX",
(),
(mContext) * 2);
ObjectAnimator transY = ObjectAnimator
.ofFloat(iconView, "translationY",
0,
- (mContext) * 2);
(PathInterpolatorCompat
.create(0.7f, 1f));
ObjectAnimator rotation = ObjectAnimator
.ofFloat(iconView, "rotation", -45, 0);
(new DecelerateInterpolator());
ObjectAnimator rotationX = ObjectAnimator
.ofFloat(iconView, "rotationX", 0, 60);
(
new DecelerateInterpolator());
(transX, transY, rotationX,
ObjectAnimator
.ofFloat(iconView, "scaleX", 1, 0.5f),
ObjectAnimator
.ofFloat(iconView, "scaleY", 1, 0.5f),
rotation
);
(new () {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
// Airplane flying into animation downPlaneAnimation(iconView);
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
();
}
/**
* Airplane flying into animation
*/
private void downPlaneAnimation(final View iconView) {
final int offDistX = -();
final int offDistY = -(mContext, 10);
AnimatorSet flyDownAnim = new AnimatorSet();
(500);
ObjectAnimator transX1 = ObjectAnimator
.ofFloat(iconView, "translationX",
(mContext), offDistX);
ObjectAnimator transY1 = ObjectAnimator
.ofFloat(iconView, "translationY",
- (mContext),
offDistY);
(
(0.1f, 1f));
ObjectAnimator rotation1 = ObjectAnimator
.ofFloat(iconView, "rotation",
(), 0);
(
new AccelerateInterpolator());
(transX1, transY1,
ObjectAnimator
.ofFloat(iconView, "scaleX", 0.5f, 0.9f),
ObjectAnimator
.ofFloat(iconView, "scaleY", 0.5f, 0.9f),
rotation1
);
(
new () {
@Override
public void onAnimationStart(Animator animation) {
(180);
}
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
AnimatorSet flyInAnim = new AnimatorSet();
(500);
(
new DecelerateInterpolator());
ObjectAnimator tranX2 = ObjectAnimator
.ofFloat(iconView, "translationX",
offDistX, iconX);
ObjectAnimator tranY2 = ObjectAnimator
.ofFloat(iconView, "translationY",
offDistY, iconY);
ObjectAnimator rotationX2 = ObjectAnimator
.ofFloat(iconView, "rotationX", 30, 0);
(tranX2, tranY2, rotationX2,
(iconView, "scaleX", 0.9f, 1f),
(iconView, "scaleY", 0.9f, 1f));
(100);
(new () {
@Override
public void onAnimationStart(Animator animation) {
(0);
}
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
AnimatorSet mFlyAnimator = new AnimatorSet();
(flyDownAnim, flyInAnim);
();
}
In this way, the animation of the paper plane entering and clicking and leaving is completed.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.