From 85aa9e3b804dbb280aa139e4b486904bb9f080c4 Mon Sep 17 00:00:00 2001 From: liujing Date: Fri, 18 Dec 2020 19:21:49 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B4=9D=E5=A1=9E=E5=B0=94=E6=9B=B2=E7=BA=BF?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/animation/BezierAnimationView.java | 110 ++++++++++-------- .../common/animation/BezierEvaluator.java | 50 ++++---- 2 files changed, 94 insertions(+), 66 deletions(-) diff --git a/modules/mogo-module-common/src/main/java/com/mogo/module/common/animation/BezierAnimationView.java b/modules/mogo-module-common/src/main/java/com/mogo/module/common/animation/BezierAnimationView.java index 85ad93badb..2bed0dae80 100644 --- a/modules/mogo-module-common/src/main/java/com/mogo/module/common/animation/BezierAnimationView.java +++ b/modules/mogo-module-common/src/main/java/com/mogo/module/common/animation/BezierAnimationView.java @@ -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; - } } diff --git a/modules/mogo-module-common/src/main/java/com/mogo/module/common/animation/BezierEvaluator.java b/modules/mogo-module-common/src/main/java/com/mogo/module/common/animation/BezierEvaluator.java index 6effc925b1..b7be514fa9 100644 --- a/modules/mogo-module-common/src/main/java/com/mogo/module/common/animation/BezierEvaluator.java +++ b/modules/mogo-module-common/src/main/java/com/mogo/module/common/animation/BezierEvaluator.java @@ -11,34 +11,44 @@ import android.graphics.PointF; */ public class BezierEvaluator implements TypeEvaluator { - 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; }