前一阶段由于项目需要实现一个点赞效果,后来通过贝塞尔曲线实现了该效果。效果如下
我们这里使用的是三阶贝塞尔曲线。
三阶贝塞尔曲线代码如下
import android.animation.TypeEvaluator;
import android.graphics.PointF;
public class BezierEvaluator implements TypeEvaluator<PointF> {
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);
}
}
}
这里扩展效果很多,各位看官可以自己打开脑洞去实现了。