android悬顶效果实现简书,Android基于贝塞尔曲线实现的点赞效果

前一阶段由于项目需要实现一个点赞效果，后来通过贝塞尔曲线实现了该效果。效果如下

我们这里使用的是三阶贝塞尔曲线。

三阶贝塞尔曲线代码如下

import android.animation.TypeEvaluator;

import android.graphics.PointF;

public class BezierEvaluator implements TypeEvaluator {

private PointF pointF1;

private PointF pointF2;

public BezierEvaluator(PointF pointF1, PointF pointF2) {

this.pointF1 = pointF1;

this.pointF2 = pointF2;

}

@Override

public PointF evaluate(float time, PointF startValue,

PointF endValue) {

float timeLeft = 1.0f - time;

PointF point = new PointF();//结果

point.x = timeLeft * timeLeft * timeLeft * (startValue.x)

+ 3 * timeLeft * timeLeft * time * (pointF1.x)

+ 3 * timeLeft * time * time * (pointF2.x)

+ time * time * time * (endValue.x);

point.y = timeLeft * timeLeft * timeLeft * (startValue.y)

+ 3 * timeLeft * timeLeft * time * (pointF1.y)

+ 3 * timeLeft * time * time * (pointF2.y)

+ time * time * time * (endValue.y);

return point;

}

}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

like = (ImageView) findViewById(R.id.like);

like.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

PointF pointP0 = new PointF();//p0

pointP0.x = like.getX();

pointP0.y = like.getY();

original = pointP0;

PointF pointP3 = new PointF();//p3

pointP3.x = pointP0.x - 250;

pointP3.y = pointP0.y - 300;

PointF pointP1 = new PointF();//p1

pointP1.x = pointP0.x - 50;

pointP1.y = pointP0.y - 300;

PointF pointP2 = new PointF();//p2

pointP2.x = pointP0.x - 200;

pointP2.y = pointP0.y - 300;

// 初始化一个贝塞尔计算器- - 传入

BezierEvaluator evaluator = new BezierEvaluator(pointP1,

pointP2);

ValueAnimator animator = ValueAnimator.ofObject(evaluator, pointP0,

pointP3);

animator.addUpdateListener(new BezierListener(like));

animator.setTarget(like);

animator.setDuration(1500);

animator.start();

}

});

}

private class BezierListener implements ValueAnimator.AnimatorUpdateListener {

private ImageView target;

public BezierListener(ImageView target) {

this.target = target;

}

@Override

public void onAnimationUpdate(ValueAnimator animation) {

//更新值之后更新UI

PointF pointF = (PointF) animation.getAnimatedValue();

target.setX(pointF.x);

target.setY(pointF.y);

// 这里顺便做一个alpha动画

target.setAlpha(1 - animation.getAnimatedFraction());

target.setScaleX(1 + animation.getAnimatedFraction());

target.setScaleY(1 + animation.getAnimatedFraction());

if (animation.getAnimatedFraction() == 1) {

target.setX(original.x);

target.setY(original.y);

target.setAlpha(1.0f);

target.setScaleX(1);

target.setScaleY(1);

}

}

}

这里扩展效果很多，各位看官可以自己打开脑洞去实现了。