【移动应用开发技术】Android控件怎么实现直播App点赞飘心动画

【移动应用开发技术】Android控件怎么实现直播App点赞飘心动画

运行效果/upload/information/20200623/125/123834.gif一、具体实现流程“爱心”的出现动画private

AnimatorSet

generateEnterAnimation(View

target)

{

ObjectAnimator

alpha

=

ObjectAnimator.ofFloat(target,

"alpha",

0.2f,

1f);

ObjectAnimator

scaleX

=

ObjectAnimator.ofFloat(target,

"scaleX",

0.5f,

1f);

ObjectAnimator

scaleY

=

ObjectAnimator.ofFloat(target,

"scaleY",

0.5f,

1f);

AnimatorSet

enterAnimation

=

new

AnimatorSet();

enterAnimation.playTogether(alpha,

scaleX,

scaleY);

enterAnimation.setDuration(150);

enterAnimation.setTarget(target);

return

enterAnimation;

}“爱心“的上浮轨迹动画private

ValueAnimator

generateCurveAnimation(View

target)

{

CurveEvaluator

evaluator

=

new

CurveEvaluator(generateCTRLPointF(1),

generateCTRLPointF(2));

ValueAnimator

valueAnimator

=

ValueAnimator.ofObject(evaluator,

new

PointF((mViewWidth

-

mPicWidth)

/

2,

mViewHeight

-

mChildViewHeight

-

mPicHeight),

new

PointF((mViewWidth)

/

2

+

(mRandom.nextBoolean()

?

1

:

-1)

*

mRandom.nextInt(100),

0));

valueAnimator.setDuration(3000);

valueAnimator.addUpdateListener(new

CurveUpdateLister(target));

valueAnimator.setTarget(target);

return

valueAnimator;

}/upload/information/20200623/125/123835.jpgprivate

class

CurveEvaluator

implements

TypeEvaluator<PointF>

{

//

由于这里使用的是三阶的贝塞儿曲线,

所以我们要定义两个控制点

private

PointF

ctrlPointF1;

private

PointF

ctrlPointF2;

public

CurveEvaluator(PointF

ctrlPointF1,

PointF

ctrlPointF2)

{

this.ctrlPointF1

=

ctrlPointF1;

this.ctrlPointF2

=

ctrlPointF2;

}

@Override

public

PointF

evaluate(float

fraction,

PointF

startValue,

PointF

endValue)

{

//

这里运用了三阶贝塞儿曲线的公式，参照上面公式

float

leftTime

=

1.0f

-

fraction;

PointF

resultPointF

=

new

PointF();

//

三阶贝塞儿曲线

resultPointF.x

=

(float)

Math.pow(leftTime,

3)

*

startValue.x

+

3

*

(float)

Math.pow(leftTime,

2)

*

fraction

*

ctrlPointF1.x

+

3

*

leftTime

*

(float)

Math.pow(fraction,

2)

*

ctrlPointF2.x

+

(float)

Math.pow(fraction,

3)

*

endValue.x;

resultPointF.y

=

(float)

Math.pow(leftTime,

3)

*

startValue.y

+

3

*

(float)

Math.pow(leftTime,

2)

*

fraction

*

ctrlPointF1.y

+

3

*

leftTime

*

fraction

*

fraction

*

ctrlPointF2.y

+

(float)

Math.pow(fraction,

3)

*

endValue.y;

//

二阶贝塞儿曲线，具体公式请上网查阅

//

resultPointF.x

=

(float)

Math.pow(leftTime,

2)

*

startValue.x

+

2

*

fraction

*

leftTime

*

ctrlPointF1.x

//

+

((float)

Math.pow(fraction,

2))

*

endValue.x;

//

resultPointF.y

=

(float)

Math.pow(leftTime,

2)

*

startValue.y

+

2

*

fraction

*

leftTime

*

ctrlPointF1.y

//

+

((float)

Math.pow(fraction,

2))

*

endValue.y;

return

resultPointF;

}

}二、使用操作<com.anenn.flowlikeviewlib.FlowLikeView

android:id="@+id/flowLikeView"

android:layout_width="75dp"

android:layout_height="200dp">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:background="@android:color/transparent"

android:includeFontPadding="false"

android:onClick="addLi