Android实现纸飞机的简单操作
在项目中,我们要求做一个纸飞机的功能:就是当打开这个界面时,会有4架纸飞机从屏幕左侧飞入,然后到达自己的位置坐上下浮动,同时云彩也不断地从屏幕右侧飘到屏幕左侧。当你点击其中一个纸飞机时,这个纸飞机先向上飞出屏幕外,再从左侧飞入,当飞机回到原来位置时,弹出一个消息框。下面直接上代码:
一、首先自定义一个RelativeLayout,主要目的就是制作飞机的进入动画:
publicclassPaperPlaneLayoutextendsRelativeLayoutimplementsView.OnClickListener{ privateOnClickListenermOnClickListener; //自定义布局的宽、高 privateintmHeight; privateintmWidth; privateLayoutParamslp; privateDrawable[]drawables; privateRandomrandom=newRandom(); //获取4架纸飞机的宽高 privateintdHeight; privateintdWidth; privateintmX; privateintmY; publicPaperPlaneLayout(Contextcontext){ super(context); init(); } publicPaperPlaneLayout(Contextcontext, AttributeSetattrs){ super(context,attrs); init(); } publicPaperPlaneLayout(Contextcontext, AttributeSetattrs,intdefStyleAttr){ super(context,attrs,defStyleAttr); init(); } @TargetApi(Build.VERSION_CODES.LOLLIPOP) publicPaperPlaneLayout(Contextcontext, AttributeSetattrs,intdefStyleAttr,intdefStyleRes){ super(context,attrs,defStyleAttr,defStyleRes); init(); } privatevoidinit(){ //初始化显示的图片 drawables=newDrawable[4]; Drawablepink= getResources().getDrawable(R.drawable.pl_pink); Drawableyellow= getResources().getDrawable(R.drawable.pl_yellow); Drawablegreen= getResources().getDrawable(R.drawable.pl_green); Drawableblue= 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=newLayoutParams(dWidth,dHeight); } @Override protectedvoidonMeasure(intwidthMeasureSpec, intheightMeasureSpec){ super.onMeasure(widthMeasureSpec,heightMeasureSpec); mWidth=getMeasuredWidth(); mHeight=getMeasuredHeight(); } //真正动画开始的入口,从外部进行调用,x、y分别表示飞机进入之后所 //停留的位置坐标 publicvoidaddHeart(intx,inty,intposition){ mX=x; mY=y; ImageViewimageView=newImageView(getContext()); //随机选一个 imageView.setImageDrawable(drawables[position]); imageView.setLayoutParams(lp); addView(imageView); //获取进入前后动画 Animatorset=getAnimator(imageView); set.start(); imageView.setOnClickListener(this); } privateAnimatorgetAnimator(Viewtarget){ AnimatorSetset=getEnterAnimator(target); AnimatorSetset2=getLineAnimation(target); AnimatorSetfinalSet=newAnimatorSet(); finalSet.playSequentially(set,set2); finalSet.setInterpolator(newLinearInterpolator()); finalSet.setTarget(target); returnfinalSet; } privateAnimatorSetgetEnterAnimator(finalViewtarget){ ObjectAnimatoralpha=ObjectAnimator .ofFloat(target,View.ALPHA,0.2f,1f); ObjectAnimatortranslationX=ObjectAnimator .ofFloat(target,View.TRANSLATION_X, -2*mWidth,-mWidth); AnimatorSetenter=newAnimatorSet(); enter.setDuration(500); enter.setInterpolator(newLinearInterpolator()); enter.playTogether(translationX,alpha); enter.setTarget(target); returnenter; } privateAnimatorSetgetLineAnimation(finalViewiconView){ ObjectAnimatortransX=ObjectAnimator .ofFloat(iconView,"translationX",-dWidth,mX); ObjectAnimatortransY=ObjectAnimator .ofFloat(iconView,"translationY", (mHeight-dHeight)/2,mY); transY. setInterpolator(PathInterpolatorCompat .create(0.7f,1f)); AnimatorSetflyUpAnim=newAnimatorSet(); flyUpAnim.setDuration(900); flyUpAnim.playTogether(transX,transY); flyUpAnim.setTarget(iconView); returnflyUpAnim; } @Override publicvoidonClick(Viewv){ if(mOnClickListener!=null){ mOnClickListener.onClick((ImageView)v); } } //定义ImageView单击事件 publicinterfaceOnClickListener{ voidonClick(ImageViewv); }
二、接下来就是布局文件的搭建了(只选取一部分控件)
三、接下来就可以在Activity中使用了:
publicclassPlaneActivityextendsAppCompatActivity{ @Bind(R.id.img_white_cloud) ImageViewmImgWhiteCloud; @Bind(R.id.plane_layout) PaperPlaneLayoutmPlaneLayout; privateContextmContext; privateObjectAnimatorobjCloudAnim; privateTranslateAnimationplaneAnimation; privatefloaticonX,iconY; //设置飞机是否已点击,如果为true,则另一个飞机不可点击 privatebooleanmIsClick=true; @Override protectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_plane_layout); ButterKnife.bind(this); mContext=getApplicationContext(); //初始化动画 initAnimation(); initListener(); } privatevoidinitAnimation(){ //设定纸飞机进入的位置 initPlaneEnterAnimation(); //飞机进入后做上下浮动 initPlaneAnimation(); //云彩循环从屏幕右侧飘到屏幕左侧 initCloudAnimation(); } //设定纸飞机进入的位置 privatevoidinitPlaneEnterAnimation(){ for(inti=0;i<4;i++){ finalinttemp=i; mPlaneLayout.post(newRunnable(){ @Override publicvoidrun(){ //下面的值根据用户自己设定 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); } } }); } } //飞机进入后做上下浮动 privatevoidinitPlaneAnimation(){ planeAnimation=newTranslateAnimation(0,0,-10,10); planeAnimation.setDuration(1000); planeAnimation.setRepeatCount(Animation.INFINITE); planeAnimation.setRepeatMode(Animation.REVERSE); mPlaneLayout.setAnimation(planeAnimation); planeAnimation.start(); } //云彩循环从屏幕右侧飘到屏幕左侧 privatevoidinitCloudAnimation(){ if(objCloudAnim==null){ objCloudAnim=ObjectAnimator .ofFloat(mImgWhiteCloud,"translationX", 屏宽-50,-屏宽); //设置持续时间 objCloudAnim.setDuration(5000); //设置循环播放 objCloudAnim.setRepeatCount( ObjectAnimator.INFINITE); } objCloudAnim.start(); } privatevoidinitListener(){ mPlaneLayout.setOnClickListener(new PaperPlaneLayout.OnClickListener(){ @Override publicvoidonClick(ImageViewv){ if(mIsClick){ mIsClick=false; iconX=v.getX(); iconY=v.getY(); //当点击某一个纸飞机时,飞机会有一个飞出动画 planeOutAnimation(v); } } }); } /** *飞机飞出动画 */ privatevoidplaneOutAnimation(finalViewiconView){ AnimatorSetflyUpAnim=newAnimatorSet(); flyUpAnim.setDuration(600); ObjectAnimatortransX=ObjectAnimator .ofFloat(iconView,"translationX", iconView.getX(), UIUtility.getScreenWidth(mContext)*2); ObjectAnimatortransY=ObjectAnimator .ofFloat(iconView,"translationY", 0, -UIUtility.getScreenHeight(mContext)*2); transY.setInterpolator(PathInterpolatorCompat .create(0.7f,1f)); ObjectAnimatorrotation=ObjectAnimator .ofFloat(iconView,"rotation",-45,0); rotation.setInterpolator(newDecelerateInterpolator()); ObjectAnimatorrotationX=ObjectAnimator .ofFloat(iconView,"rotationX",0,60); rotationX.setInterpolator( newDecelerateInterpolator()); flyUpAnim.playTogether(transX,transY,rotationX, ObjectAnimator .ofFloat(iconView,"scaleX",1,0.5f), ObjectAnimator .ofFloat(iconView,"scaleY",1,0.5f), rotation ); flyUpAnim.addListener(newAnimator.AnimatorListener(){ @Override publicvoidonAnimationStart(Animatoranimation){ } @Override publicvoidonAnimationEnd(Animatoranimation){ //飞机飞入动画 downPlaneAnimation(iconView); } @Override publicvoidonAnimationCancel(Animatoranimation){ } @Override publicvoidonAnimationRepeat(Animatoranimation){ } }); flyUpAnim.start(); } /** *飞机飞入动画 */ privatevoiddownPlaneAnimation(finalViewiconView){ finalintoffDistX=-iconView.getRight(); finalintoffDistY=-UIUtility.dipTopx(mContext,10); AnimatorSetflyDownAnim=newAnimatorSet(); flyDownAnim.setDuration(500); ObjectAnimatortransX1=ObjectAnimator .ofFloat(iconView,"translationX", UIUtility.getScreenWidth(mContext),offDistX); ObjectAnimatortransY1=ObjectAnimator .ofFloat(iconView,"translationY", -UIUtility.getScreenHeight(mContext), offDistY); transY1.setInterpolator( PathInterpolatorCompat.create(0.1f,1f)); ObjectAnimatorrotation1=ObjectAnimator .ofFloat(iconView,"rotation", iconView.getRotation(),0); rotation1.setInterpolator( newAccelerateInterpolator()); flyDownAnim.playTogether(transX1,transY1, ObjectAnimator .ofFloat(iconView,"scaleX",0.5f,0.9f), ObjectAnimator .ofFloat(iconView,"scaleY",0.5f,0.9f), rotation1 ); flyDownAnim.addListener( newAnimator.AnimatorListener(){ @Override publicvoidonAnimationStart(Animatoranimation){ iconView.setRotationY(180); } @Override publicvoidonAnimationEnd(Animatoranimation){ } @Override publicvoidonAnimationCancel(Animatoranimation){ } @Override publicvoidonAnimationRepeat(Animatoranimation){ } }); AnimatorSetflyInAnim=newAnimatorSet(); flyInAnim.setDuration(500); flyInAnim.setInterpolator( newDecelerateInterpolator()); ObjectAnimatortranX2=ObjectAnimator .ofFloat(iconView,"translationX", offDistX,iconX); ObjectAnimatortranY2=ObjectAnimator .ofFloat(iconView,"translationY", offDistY,iconY); ObjectAnimatorrotationX2=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(newAnimator.AnimatorListener(){ @Override publicvoidonAnimationStart(Animatoranimation){ iconView.setRotationY(0); } @Override publicvoidonAnimationEnd(Animatoranimation){ } @Override publicvoidonAnimationCancel(Animatoranimation){ } @Override publicvoidonAnimationRepeat(Animatoranimation){ } }); AnimatorSetmFlyAnimator=newAnimatorSet(); mFlyAnimator.playSequentially(flyDownAnim,flyInAnim); mFlyAnimator.start(); }
这样一来纸飞机的进入和点击离开动画就完成了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。