【移動(dòng)應(yīng)用開發(fā)技術(shù)】怎么在Android中利用三階貝塞爾曲線繪制運(yùn)動(dòng)軌跡

【移動(dòng)應(yīng)用開發(fā)技術(shù)】怎么在Android中利用三階貝塞爾曲線繪制運(yùn)動(dòng)軌跡

怎么在Android中利用三階貝塞爾曲線繪制運(yùn)動(dòng)軌跡？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面在下將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。xml布局：<RelativeLayout

xmlns:android="/apk/res/android"

xmlns:tools="/tools"

android:id="@+id/rl_root"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".touch.MainActivity">

<.touch.MyLoveLayout

android:layout_marginBottom="100dp"

android:layout_marginRight="15dp"

android:id="@+id/love_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

</.touch.MyLoveLayout>

<Button

android:id="@+id/bt_bottom"

android:text="begin"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="20dp"

android:layout_width="100dp"

android:layout_height="50dp"

/>

</RelativeLayout>MainActivity類：public

class

MainActivity

extends

Activity

implements

View.OnClickListener{

private

Button

btBottom;

//

private

WaitNoticeDialog

dialog;

//

public

Handler

handler;

private

MyLoveLayout

love;

@Override

protected

void

onCreate(Bundle

savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

btBottom

=

(Button)

findViewById(R.id.bt_bottom);

love

=

(MyLoveLayout)

findViewById(R.id.love_layout);

btBottom.setOnClickListener(this);

//

handler=new

IHandler(this);

//

dialog

=

new

WaitNoticeDialog(this);

}

static

class

IHandler

extends

Handler

{

private

WeakReference<MainActivity>

ui;

IHandler(MainActivity

ui)

{

this.ui

=

new

WeakReference<MainActivity>(ui);

}

@Override

public

void

handleMessage(Message

msg)

{

if(ui!=null&&ui.get()!=null){

ui.get().handleMsg(msg);

}

}

}

/**

*

線程消息處理

*

@param

msg

*/

public

void

handleMsg(Message

msg){

switch

(msg.what)

{

}

}

@Override

public

void

onClick(View

v)

{

switch

(v.getId()){

case

R.id.bt_bottom:

love.addHeart();

break;

}

}

@Override

protected

void

onDestroy()

{

super.onDestroy();

//

handler.removeCallbacksAndMessages(null);

}

}自定義view：MyLoveLayoutpublic

class

MyLoveLayout

extends

RelativeLayout

{

private

Drawable[]

drawables;

private

Interpolator[]

mInterpolators;

private

int

dWidth,

mWidth;

private

int

dHeight,

mHeight;

private

LayoutParams

lp;

private

Random

random

=

new

Random();

public

MyLoveLayout(Context

context,

AttributeSet

attrs)

{

super(context,

attrs);

//imageView位置是相對(duì)于MyLoveLayout

init();

}

@Override

protected

void

onMeasure(int

widthMeasureSpec,

int

heightMeasureSpec)

{

super.onMeasure(widthMeasureSpec,

heightMeasureSpec);

//得到本布局的寬高

mWidth

=

getMeasuredWidth();

mHeight

=

getMeasuredHeight();

}

private

void

init()

{

//

初始化顯示的圖片

drawables

=

new

Drawable[7];

drawables[0]

=

getResources().getDrawable(R.drawable.heart_1);

drawables[1]

=

getResources().getDrawable(R.drawable.heart_2);

drawables[2]

=

getResources().getDrawable(R.drawable.heart_3);

drawables[3]

=

getResources().getDrawable(R.drawable.heart_4);

drawables[4]

=

getResources().getDrawable(R.drawable.heart_5);

drawables[5]

=

getResources().getDrawable(R.drawable.heart_6);

drawables[6]

=

getResources().getDrawable(R.drawable.heart_7);

//

初始化插補(bǔ)器

mInterpolators

=

new

Interpolator[4];

mInterpolators[0]

=

new

LinearInterpolator();//

線性

mInterpolators[1]

=

new

AccelerateInterpolator();//

加速

mInterpolators[2]

=

new

DecelerateInterpolator();//

減速

mInterpolators[3]

=

new

AccelerateDecelerateInterpolator();//

先加速后減速

//

獲取圖片寬高

//

dWidth

=

drawables[0].getIntrinsicWidth();

//

dHeight

=

drawables[0].getIntrinsicHeight();

//手動(dòng)設(shè)置寬高

dWidth

=

dip2px(getContext(),

40);

dHeight

=

dip2px(getContext(),

40);

lp

=

new

LayoutParams(dWidth,

dHeight);

//設(shè)置view控件的起始位置

//

lp.addRule(CENTER_HORIZONTAL,

TRUE);//

這里的TRUE

要注意

不是true

lp.addRule(ALIGN_PARENT_RIGHT,

TRUE);

lp.addRule(ALIGN_PARENT_BOTTOM,

TRUE);

}

/**

*

dp轉(zhuǎn)px值

*/

private

int

dip2px(Context

context,

float

dpValue)

{

float

scale

=

context.getResources().getDisplayMetrics().density;

return

(int)

(dpValue

*

scale

+

0.5f);

}

/**

*

進(jìn)場(chǎng)動(dòng)畫，三種同時(shí)播放

*

alpha透明度

（80%-0%）

*

scaleX

寬度

target（20%-100%）

*

scaleY

高度

*

@param

target

*

@return

*/

private

AnimatorSet

getEnterAnimator(final

View

target)

{

ObjectAnimator

alpha

=

ObjectAnimator.ofFloat(target,

View.ALPHA,

0.2f,

1f);

ObjectAnimator

scaleX

=

ObjectAnimator.ofFloat(target,

View.SCALE_X,

0.2f,

1f);

ObjectAnimator

scaleY

=

ObjectAnimator.ofFloat(target,

View.SCALE_Y,

0.2f,

1f);

AnimatorSet

enter

=

new

AnimatorSet();

enter.setTarget(target);

enter.setInterpolator(new

LinearInterpolator());

enter.setDuration(500).playTogether(alpha,

scaleX,

scaleY);

return

enter;

}

private

ValueAnimator

getBezierValueAnimator(final

View

target)

{

//

初始化貝塞爾估值器

//隨機(jī)產(chǎn)生兩個(gè)點(diǎn)，以確定一條3階貝塞爾曲線

BezierEvaluator

evaluator

=

new

BezierEvaluator(getPointF(2),

getPointF(1));

//

起點(diǎn)在底部中心位置，終點(diǎn)在底部隨機(jī)一個(gè)位置，改變new

PointF()中值來(lái)改變起始位置

//

ValueAnimator

animator

=

ValueAnimator.ofObject(evaluator,

new

PointF((mWidth

-

dWidth)

/

//

2,

mHeight

-

dHeight),

new

PointF(random.nextInt(getWidth()),

0));

//

起點(diǎn)在右下角位置，終點(diǎn)在左上角位置

ValueAnimator

animator

=

ValueAnimator.ofObject(evaluator,

new

PointF(mWidth

-

dWidth,

mHeight

-

dHeight),

new

PointF(0,

0));

animator.setTarget(target);

animator.addUpdateListener(new

ValueAnimator.AnimatorUpdateListener()

{

@Override

public

void

onAnimationUpdate(ValueAnimator

valueAnimator)

{

//

這里獲取到貝塞爾曲線計(jì)算出來(lái)的的x

y值

賦值給view

這樣就能讓愛心隨著曲線走啦

PointF

pointF

=

(PointF)

valueAnimator.getAnimatedValue();

target.setX(pointF.x);

target.setY(pointF.y);

//

alpha動(dòng)畫，根據(jù)運(yùn)動(dòng)距離改變透明度

//

target.setAlpha(1

-

valueAnimator.getAnimatedFraction());

target.setAlpha(1

-

valueAnimator.getAnimatedFraction()

+

0.3f);

}

});

animator.setDuration(3000);

return

animator;

}

private

PointF

getPointF(int

i)

{

PointF

pointF

=

new

PointF();

//pointF.x,pointF.y都是隨機(jī)，因此可以產(chǎn)生n多種軌跡

pointF.x

=

random.nextInt(mWidth);//0~loveLayout.Width

//為了美觀,建議盡量保證P2在P1上面,那怎么做呢??

//只需要將該布局的高度分為上下兩部分,讓p1只能在下面部分范圍內(nèi)變化(1/2height~height),讓p2只能在上面部分范圍內(nèi)變化(0~1/2height),因?yàn)樽鴺?biāo)系是倒著的;

//0~loveLayout.Height/2

if

(i

==

1)

{

pointF.y

=

random.nextInt(mHeight

/

2)

+

mHeight

/

2;//P1點(diǎn)Y軸坐標(biāo)變化

}

else

if

(i

==

2)

{//P2點(diǎn)Y軸坐標(biāo)變化

pointF.y

=

random.nextInt(mHeight

/

2);

}

//

寫死的一條軌跡

//

if

(i

==

1)

{

//

pointF.x=mWidth-dWidth*2;

//

pointF.y

=

3*dHeight;

//

}

else

if

(i

==

2)

{

//

pointF.x=dWidth*2;

//

pointF.y

=

mHeight

-dHeight;

//

}

return

pointF;

}

public

void

addHeart()

{

final

ImageView

imageView

=

new

ImageView(getContext());

//

隨機(jī)選一個(gè)愛心

imageView.setImageDrawable(drawables[random.nextInt(6)]);

imageView.setLayoutParams(lp);

addView(imageView);

AnimatorSet

finalSet

=

new

AnimatorSet();

AnimatorSet

enterAnimatorSet

=

getEnterAnimator(imageView);//入場(chǎng)動(dòng)畫

ValueAnimator

bezierValueAnimator

=

getBezierValueAnimator(imageView);//貝塞爾曲線路徑動(dòng)畫

finalSet.playSequentially(enterAnimatorSet,

bezierValueAnimator);

//

finalSet.playSequentially(bezierValueAnimator);

finalSet.setInterpolator(mInterpolators[random.nextInt(4)]);

finalSet.setTarget(imageView);

finalSet.addListener(new

AnimatorListenerAdapter()

{

@Override

public

void

onAnimationEnd(Animator

animation)

{

super.onAnimationEnd(animation);

removeView((imageView));//刪除愛心

}

});

finalSet.star