Android實現(xiàn)紙飛機的簡單操作
更新時間：2018年05月29日 07:58:00 作者：洄游魚lu
這篇文章主要為大家詳細介紹了Android實現(xiàn)紙飛機的簡單操作，類似于漂流瓶功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在項目中，我們要求做一個紙飛機的功能：就是當打開這個界面時，會有4架紙飛機從屏幕左側飛入，然后到達自己的位置坐上下浮動，同時云彩也不斷地從屏幕右側飄到屏幕左側。當你點擊其中一個紙飛機時，這個紙飛機先向上飛出屏幕外，再從左側飛入，當飛機回到原來位置時，彈出一個消息框。下面直接上代碼：
一、首先自定義一個RelativeLayout，主要目的就是制作飛機的進入動畫：
public class PaperPlaneLayout extends RelativeLayout implements View.OnClickListener{
private OnClickListener mOnClickListener;
//自定義布局的寬、高
private int mHeight;
private int mWidth;
private LayoutParams lp;
private Drawable[] drawables;
private Random random = new Random();
//獲取4架紙飛機的寬高
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() {
// 初始化顯示的圖片
drawables = new Drawable[4];
Drawable pink =
getResources().getDrawable(R.drawable.pl_pink);
Drawable yellow =
getResources().getDrawable(R.drawable.pl_yellow);
Drawable green =
getResources().getDrawable(R.drawable.pl_green);
Drawable blue =
getResources().getDrawable(R.drawable.pl_blue);
drawables[0] = blue;
drawables[1] = yellow;
drawables[2] = green;
drawables[3] = pink;
// 獲取圖的寬高 用于后面的計算
// 注意 我這里4張圖片的大小都是一樣的,所以我只取了一個
dHeight = UIUtility.dipTopx(getContext(), 80);
dWidth = UIUtility.dipTopx(getContext(), 80);
lp = new LayoutParams(dWidth, dHeight);
}
@Override
protected void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
}
//真正動畫開始的入口，從外部進行調用，x、y分別表示飛機進入之后所
//停留的位置坐標
public void addHeart(int x, int y, int position) {
mX = x;
mY = y;
ImageView imageView = new ImageView(getContext());
// 隨機選一個
imageView.setImageDrawable(drawables[position]);
imageView.setLayoutParams(lp);
addView(imageView);
//獲取進入前后動畫
Animator set = getAnimator(imageView);
set.start();
imageView.setOnClickListener(this);
}
private Animator getAnimator(View target) {
AnimatorSet set = getEnterAnimator(target);
AnimatorSet set2 = getLineAnimation(target);
AnimatorSet finalSet = new AnimatorSet();
finalSet.playSequentially(set, set2);
finalSet.setInterpolator(new LinearInterpolator());
finalSet.setTarget(target);
return finalSet;
}
private AnimatorSet getEnterAnimator(final View target) {
ObjectAnimator alpha = ObjectAnimator
.ofFloat(target, View.ALPHA, 0.2f, 1f);
ObjectAnimator translationX = ObjectAnimator
.ofFloat(target, View.TRANSLATION_X,
-2 * mWidth, -mWidth);
AnimatorSet enter = new AnimatorSet();
enter.setDuration(500);
enter.setInterpolator(new LinearInterpolator());
enter.playTogether(translationX, alpha);
enter.setTarget(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();
flyUpAnim.setDuration(900);
flyUpAnim.playTogether(transX, transY);
flyUpAnim.setTarget(iconView);
return flyUpAnim;
}
@Override
public void onClick(View v) {
if (mOnClickListener != null) {
mOnClickListener.onClick((ImageView) v);
}
}
//定義ImageView單擊事件
public interface OnClickListener {
void onClick(ImageView v);
}
二、接下來就是布局文件的搭建了（只選取一部分控件）
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relative_plane_bj"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/paper_plane_bg">
<!--白云-->
<ImageView
android:id="@+id/img_white_cloud"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/paper_plane_cloud"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp" />
<!--自定義的飛機布局動畫-->
<com.cloudi.forum.view.PaperPlaneLayout
android:id="@+id/plane_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
三、接下來就可以在Activity中使用了：
public class PlaneActivity extends AppCompatActivity{
@Bind(R.id.img_white_cloud)
ImageView mImgWhiteCloud;
@Bind(R.id.plane_layout)
PaperPlaneLayout mPlaneLayout;
private Context mContext;
private ObjectAnimator objCloudAnim;
private TranslateAnimation planeAnimation;
private float iconX, iconY;
//設置飛機是否已點擊，如果為true，則另一個飛機不可點擊
private boolean mIsClick = true;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_plane_layout);
ButterKnife.bind(this);
mContext = getApplicationContext();
//初始化動畫
initAnimation();
initListener();
}
private void initAnimation() {
//設定紙飛機進入的位置
initPlaneEnterAnimation();
//飛機進入后做上下浮動
initPlaneAnimation();
//云彩循環(huán)從屏幕右側飄到屏幕左側
initCloudAnimation();
}
//設定紙飛機進入的位置
private void initPlaneEnterAnimation() {
for (int i = 0; i < 4; i++) {
final int temp = i;
mPlaneLayout.post(new Runnable() {
@Override
public void run() {
//下面的值根據(jù)用戶自己設定
if (temp == 0) {
mPlaneLayout.addHeart(
100dp, 140dp, 0);
}
if (temp == 1) {
mPlaneLayout.addHeart(
屏寬 - 120dp, 190dp, 1);
}
if (temp == 2) {
mPlaneLayout.addHeart(
30dp, 240dp, 2);
}
if (temp == 3) {
mPlaneLayout.addHeart(
屏寬 - 210, 290, 3);
}
}
});
}
}
//飛機進入后做上下浮動
private void initPlaneAnimation() {
planeAnimation = new TranslateAnimation(0, 0, -10, 10);
planeAnimation.setDuration(1000);
planeAnimation.setRepeatCount(Animation.INFINITE);
planeAnimation.setRepeatMode(Animation.REVERSE);
mPlaneLayout.setAnimation(planeAnimation);
planeAnimation.start();
}
//云彩循環(huán)從屏幕右側飄到屏幕左側
private void initCloudAnimation() {
if (objCloudAnim == null) {
objCloudAnim = ObjectAnimator
.ofFloat(mImgWhiteCloud, "translationX",
屏寬 - 50, -屏寬);
// 設置持續(xù)時間
objCloudAnim.setDuration(5000);
// 設置循環(huán)播放
objCloudAnim.setRepeatCount(
ObjectAnimator.INFINITE);
}
objCloudAnim.start();
}
private void initListener() {
mPlaneLayout.setOnClickListener(new
PaperPlaneLayout.OnClickListener() {
@Override
public void onClick(ImageView v) {
if (mIsClick) {
mIsClick = false;
iconX = v.getX();
iconY = v.getY();
//當點擊某一個紙飛機時，飛機會有一個飛出動畫
planeOutAnimation(v);
}
}
});
}
/**
* 飛機飛出動畫
*/
private void planeOutAnimation(final View iconView) {
AnimatorSet flyUpAnim = new AnimatorSet();
flyUpAnim.setDuration(600);
ObjectAnimator transX = ObjectAnimator
.ofFloat(iconView, "translationX",
iconView.getX(),
UIUtility.getScreenWidth(mContext) * 2);
ObjectAnimator transY = ObjectAnimator
.ofFloat(iconView, "translationY",
0,
- UIUtility.getScreenHeight(mContext) * 2);
transY.setInterpolator(PathInterpolatorCompat
.create(0.7f, 1f));
ObjectAnimator rotation = ObjectAnimator
.ofFloat(iconView, "rotation", -45, 0);
rotation.setInterpolator(new DecelerateInterpolator());
ObjectAnimator rotationX = ObjectAnimator
.ofFloat(iconView, "rotationX", 0, 60);
rotationX.setInterpolator(
new DecelerateInterpolator());
flyUpAnim.playTogether(transX, transY, rotationX,
ObjectAnimator
.ofFloat(iconView, "scaleX", 1, 0.5f),
ObjectAnimator
.ofFloat(iconView, "scaleY", 1, 0.5f),
rotation
);
flyUpAnim.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
// 飛機飛入動畫
downPlaneAnimation(iconView);
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
flyUpAnim.start();
}
/**
* 飛機飛入動畫
*/
private void downPlaneAnimation(final View iconView) {
final int offDistX = -iconView.getRight();
final int offDistY = -UIUtility.dipTopx(mContext, 10);
AnimatorSet flyDownAnim = new AnimatorSet();
flyDownAnim.setDuration(500);
ObjectAnimator transX1 = ObjectAnimator
.ofFloat(iconView, "translationX",
UIUtility.getScreenWidth(mContext), offDistX);
ObjectAnimator transY1 = ObjectAnimator
.ofFloat(iconView, "translationY",
- UIUtility.getScreenHeight(mContext),
offDistY);
transY1.setInterpolator(
PathInterpolatorCompat.create(0.1f, 1f));
ObjectAnimator rotation1 = ObjectAnimator
.ofFloat(iconView, "rotation",
iconView.getRotation(), 0);
rotation1.setInterpolator(
new AccelerateInterpolator());
flyDownAnim.playTogether(transX1, transY1,
ObjectAnimator
.ofFloat(iconView, "scaleX", 0.5f, 0.9f),
ObjectAnimator
.ofFloat(iconView, "scaleY", 0.5f, 0.9f),
rotation1
);
flyDownAnim.addListener(
new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
iconView.setRotationY(180);
}
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
AnimatorSet flyInAnim = new AnimatorSet();
flyInAnim.setDuration(500);
flyInAnim.setInterpolator(
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);
flyInAnim.playTogether(tranX2, tranY2, rotationX2,
ObjectAnimator.ofFloat(iconView, "scaleX", 0.9f, 1f),
ObjectAnimator.ofFloat(iconView, "scaleY", 0.9f, 1f));
flyInAnim.setStartDelay(100);
flyInAnim.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
iconView.setRotationY(0);
}
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
AnimatorSet mFlyAnimator = new AnimatorSet();
mFlyAnimator.playSequentially(flyDownAnim, flyInAnim);
mFlyAnimator.start();
}
這樣一來紙飛機的進入和點擊離開動畫就完成了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Android實現(xiàn)閃屏歡迎界面的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細介紹了ViewPager實現(xiàn)漂亮的引導頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
項目需要研究了一下微信紅包動畫，即硬幣轉動的效果，原理其實就是三張不同角度的圖片利用AnimationDrawable幀動畫進行播放。下面通過本文給大家分享Android仿微信紅包動畫效果，感興趣的朋友一起看看吧2017-12-12
這篇文章主要介紹了詳解Android 硬布局item的高級寫法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要為大家介紹了Android熱修復及插件化原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細介紹了Android如何高效顯示較大Bitmaps的方法，感興趣的小伙伴們可以參考一下2016-05-05
本篇文章主要介紹了Android 應用中跳轉到應用市場評分示例，非常具有實用價值，需要的朋友可以參考下。2017-02-02
詳解Android開發(fā)數(shù)據(jù)持久化之文件存儲(附源碼)
本篇文章主要介紹了詳解Android開發(fā)數(shù)據(jù)持久化之文件存儲(附源碼)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Android自定義View實現(xiàn)餅狀圖帶動畫效果
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)餅狀圖帶動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
圓角按鈕在我們現(xiàn)在的界面中常常會用到，最近在開發(fā)中就又遇到了，所以想著有沒有更快速更便捷的實現(xiàn)方法呢，所以就有了這篇文章，本文主要給大家介紹了關于Android中如何快速便捷的實現(xiàn)圓角按鈕的相關資料，需要的朋友可以參考下。2017-05-05