贝塞尔曲线动画类
This commit is contained in:
liujing
@@ -8,6 +8,7 @@ import android.animation.ValueAnimator;
|
||||
import android.content.Context;
|
||||
import android.graphics.PointF;
|
||||
import android.graphics.drawable.Drawable;
|
||||
import android.os.Handler;
|
||||
import android.util.AttributeSet;
|
||||
import android.util.Log;
|
||||
import android.view.View;
|
||||
@@ -27,11 +28,14 @@ public class BezierAnimationView extends RelativeLayout implements View.OnClickL
|
||||
private Context context;
|
||||
private int[] animation_drawable = {
|
||||
R.drawable.icon_common_heart_animation_vr00,
|
||||
R.drawable.icon_heart_unchoose_other,
|
||||
R.drawable.icon_map_marker_pondingl2,
|
||||
R.drawable.icon_map_marker_living};
|
||||
private Random random = new Random();
|
||||
private int width = 500, height = 210;
|
||||
private int width = 180, height = 140;
|
||||
private int drawableWidth, drawableHeight;
|
||||
private int resource = 0;
|
||||
private Handler handler = new Handler();
|
||||
private Runnable runnable;
|
||||
|
||||
public BezierAnimationView(Context context) {
|
||||
this(context, null);
|
||||
@@ -54,13 +58,24 @@ public class BezierAnimationView extends RelativeLayout implements View.OnClickL
|
||||
|
||||
@Override
|
||||
public void onClick(View view) {
|
||||
Log.d("执行点赞动画", "ppp");
|
||||
bezierAnimation();
|
||||
runnable = new Runnable() {
|
||||
@Override
|
||||
public void run() {
|
||||
try {
|
||||
Log.d("点赞--", "");
|
||||
bezierAnimation(resource);
|
||||
handler.postDelayed(this, 500);
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
};
|
||||
runnable.run();
|
||||
}
|
||||
|
||||
private void bezierAnimation() {
|
||||
private void bezierAnimation(int resource) {
|
||||
final ImageView imageView = new ImageView(context);
|
||||
imageView.setBackgroundResource(animation_drawable[random.nextInt(animation_drawable.length - 1)]);
|
||||
imageView.setBackgroundResource(animation_drawable[resource]);
|
||||
RelativeLayout.LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
|
||||
params.addRule(ALIGN_BOTTOM);
|
||||
params.addRule(CENTER_HORIZONTAL);
|
||||
@@ -79,63 +94,66 @@ public class BezierAnimationView extends RelativeLayout implements View.OnClickL
|
||||
}
|
||||
});
|
||||
animatorSet.start();
|
||||
Log.d(TAG, "动画执行到--" + String.valueOf(resource));
|
||||
}
|
||||
|
||||
private AnimatorSet getAnimatorSet(ImageView imageView) {
|
||||
AnimatorSet enter = new AnimatorSet();
|
||||
/*
|
||||
* 缩放动画
|
||||
* */
|
||||
|
||||
//1、缩放动画
|
||||
AnimatorSet scaleAnimator = new AnimatorSet();
|
||||
ObjectAnimator alpha = ObjectAnimator.ofFloat(imageView, "alpha", 0.8f, 1f);
|
||||
ObjectAnimator scaleX = ObjectAnimator.ofFloat(imageView, "scaleX", 0.8f, 1f);
|
||||
ObjectAnimator scaleY = ObjectAnimator.ofFloat(imageView, "scaleY", 0.8f, 1f);
|
||||
scaleAnimator.setDuration(500);
|
||||
ObjectAnimator alpha = ObjectAnimator.ofFloat(imageView, "alpha", 0.3f, 1f);
|
||||
ObjectAnimator scaleX = ObjectAnimator.ofFloat(imageView, "scaleX", 0.3f, 1f);
|
||||
ObjectAnimator scaleY = ObjectAnimator.ofFloat(imageView, "scaleY", 0.3f, 1f);
|
||||
scaleAnimator.setDuration(1000);
|
||||
scaleAnimator.playTogether(alpha, scaleX, scaleY);
|
||||
|
||||
/*
|
||||
* 贝塞尔动画
|
||||
* */
|
||||
ValueAnimator bezierAnimator = getBezierValueAnimator(imageView);
|
||||
/*
|
||||
* 两个动画按顺序播放
|
||||
* */
|
||||
//2、贝塞尔动画
|
||||
ValueAnimator bezierAnimator = getBezierAnimator(imageView);
|
||||
|
||||
//3、两个动画按顺序播放
|
||||
enter.playSequentially(scaleAnimator, bezierAnimator);
|
||||
return enter;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取贝塞尔曲线动画
|
||||
* 贝塞尔动画
|
||||
*
|
||||
* @param target
|
||||
* @return
|
||||
*/
|
||||
private ValueAnimator getBezierValueAnimator(View target) {
|
||||
private ValueAnimator getBezierAnimator(final ImageView imageView) {
|
||||
|
||||
//初始化一个BezierEvaluator
|
||||
BezierEvaluator evaluator = new BezierEvaluator(getPointF(1), getPointF(1));
|
||||
//1、构建贝塞尔曲线的四个点
|
||||
PointF point0 = new PointF((width - drawableWidth) / 2, height - drawableHeight);
|
||||
PointF point1 = new PointF(random.nextInt(width), random.nextInt(height / 2));
|
||||
PointF point2 = new PointF(random.nextInt(width), random.nextInt(height / 2) + height / 2);
|
||||
PointF point3 = new PointF(random.nextInt(width - drawableWidth), 0);
|
||||
|
||||
// 起点固定，终点随机
|
||||
ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF((width - 40) / 2, height - 80),
|
||||
new PointF(random.nextInt(getWidth()), 0));
|
||||
animator.addUpdateListener(new BezierListener(target));
|
||||
animator.setTarget(target);
|
||||
animator.setDuration(3000);
|
||||
return animator;
|
||||
//2、创建贝塞尔属性动画
|
||||
BezierEvaluator evaluator = new BezierEvaluator(point0, point1);
|
||||
final ValueAnimator valueAnimator = ObjectAnimator.ofObject(evaluator, point2, point3);
|
||||
valueAnimator.setInterpolator(new LinearInterpolator());
|
||||
valueAnimator.setDuration(1000);
|
||||
//3、监听贝塞尔曲线估值器返回值
|
||||
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
|
||||
@Override
|
||||
public void onAnimationUpdate(ValueAnimator animation) {
|
||||
//4、获取BezierEvaluator中evaluate()返回的运行轨迹坐标点，设置点赞图片路线
|
||||
PointF pointF = (PointF) animation.getAnimatedValue();
|
||||
imageView.setX(pointF.x);
|
||||
imageView.setY(pointF.y);
|
||||
//6、获取BezierEvaluator中evaluate()返回的参数t，设置消失动画
|
||||
float t = animation.getAnimatedFraction();
|
||||
imageView.setAlpha(1 - t + 0.2f);
|
||||
}
|
||||
});
|
||||
if (resource >= 3) {
|
||||
handler.removeCallbacks(runnable);
|
||||
return null;
|
||||
} else {
|
||||
resource += 1;
|
||||
}
|
||||
return valueAnimator;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取一条路径的两个控制点
|
||||
*
|
||||
* @param scale
|
||||
*/
|
||||
private PointF getPointF(int scale) {
|
||||
|
||||
PointF pointF = new PointF();
|
||||
//减去100 是为了控制 x轴活动范围
|
||||
pointF.x = random.nextInt((width));
|
||||
//再Y轴上 为了确保第二个控制点 在第一个点之上,我把Y分成了上下两半
|
||||
pointF.y = random.nextInt((height)) / scale;
|
||||
return pointF;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,34 +11,44 @@ import android.graphics.PointF;
|
||||
*/
|
||||
public class BezierEvaluator implements TypeEvaluator<PointF> {
|
||||
|
||||
private PointF pointF1;
|
||||
private PointF pointF2;
|
||||
private PointF point1;
|
||||
private PointF point2;
|
||||
|
||||
public BezierEvaluator(PointF point1, PointF point2) {
|
||||
this.pointF1 = point1;
|
||||
this.pointF2 = point2;
|
||||
this.point1 = point1;
|
||||
this.point2 = point2;
|
||||
}
|
||||
|
||||
@Override
|
||||
public PointF evaluate(float time, PointF startValue, PointF endValue) {
|
||||
float timeLeft = 1.0f - time;
|
||||
|
||||
//结果
|
||||
public PointF evaluate(float t, PointF point0, PointF point3) {
|
||||
PointF point = new PointF();
|
||||
//t 取值为 [0,1]
|
||||
|
||||
PointF point0 = (PointF)startValue;//起点
|
||||
PointF point3 = (PointF)endValue;//终点
|
||||
/**
|
||||
* 三阶贝塞尔公式
|
||||
*
|
||||
* B(t)=(1 - t)^3 P0
|
||||
* + 3 t (1 - t)^2 P1
|
||||
* + 3 t^2 (1 - t) P2
|
||||
* + t^3 P3
|
||||
*/
|
||||
point.x = point0.x * (1 - t) * (1 - t) * (1 - t)
|
||||
+ 3 * point1.x * t * (1 - t) * (1 - t)
|
||||
+ 3 * point2.x * t * t * (1 - t)
|
||||
+ point3.x * t * t * t;
|
||||
|
||||
// 贝塞尔公式
|
||||
point.x = timeLeft * timeLeft * timeLeft * (point0.x)
|
||||
+ 3 * timeLeft * timeLeft * time * (pointF1.x)
|
||||
+ 3 * timeLeft * time * time * (pointF2.x)
|
||||
+ time * time * time * (point3.x);
|
||||
|
||||
point.y = timeLeft * timeLeft * timeLeft * (point0.y)
|
||||
+ 3 * timeLeft * timeLeft * time * (pointF1.y)
|
||||
+ 3 * timeLeft * time * time * (pointF2.y)
|
||||
+ time * time * time * (point3.y);
|
||||
/**
|
||||
* 三阶贝塞尔公式
|
||||
*
|
||||
* B(t)=(1 - t)^3 P0
|
||||
* + 3 t (1 - t)^2 P1
|
||||
* + 3 t^2 (1 - t) P2
|
||||
* + t^3 P3
|
||||
*/
|
||||
point.y = point0.y * (1 - t) * (1 - t) * (1 - t)
|
||||
+ 3 * point1.y * t * (1 - t) * (1 - t)
|
||||
+ 3 * point2.y * t * t * (1 - t)
|
||||
+ point3.y * t * t * t;
|
||||
|
||||
return point;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user