贝塞尔曲线的应用(三)

综合技术 2018-05-21

仿直播点赞爱心动画

先看下实现效果

点的轨迹可以采用三阶贝塞尔曲线

image.png

关键点分别是

PointF startF = new PointF(totalWidth / 2, totalHeight);
PointF pointF1 = new PointF(new Random().nextInt(totalWidth), new Random().nextInt(totalHeight / 2) + totalHeight / 2);
PointF pointF2 = new PointF(new Random().nextInt(totalWidth), new Random().nextInt(totalHeight / 2));
PointF endF = new PointF(new Random().nextInt(totalWidth), 0);

我们可以在点击时在初始点new一个imageview,根据给出的点运用贝塞尔三阶公式绘制imageview的运动轨迹。

同样,我们需要自定义估值器给出坐标的转换方法

public class PointEvaluate implements TypeEvaluator {

    private PointF pointF1, pointF2;

    public PointEvaluate(PointF pointF1, PointF pointF2) {
        this.pointF1 = pointF1;
        this.pointF2 = pointF2;
    }

    @Override
    public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
        float x = (1 - fraction) * (1 - fraction) * (1 - fraction) * startValue.x
                + 3 * (1 - fraction) * (1 - fraction) * fraction * pointF1.x
                + 3 * (1 - fraction) * fraction * fraction * pointF2.x
                + fraction * fraction * fraction * endValue.x;

        float y = (1 - fraction) * (1 - fraction) * (1 - fraction) * startValue.y
                + 3 * (1 - fraction) * (1 - fraction) * fraction * pointF1.y
                + 3 * (1 - fraction) * fraction * fraction * pointF2.y
                + fraction * fraction * fraction * endValue.y;
        return new PointF(x, y);
    }
}

为了让点赞的爱心显示的更自然,可以添加上scale动画和alpha动画以及爱心上移到屏幕顶端是,渐渐隐藏。

public class PraiseView extends RelativeLayout {


    private Drawable[] drawables;
    private LayoutParams layoutParams;
    private Context context;
    private Paint paint;
    private Path path;
    private int totalWidth, totalHeight, praiseWidth, praiseHeight;

    public PraiseView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        init();
    }

    public void init() {
        setWillNotDraw(false);
        Drawable a = getResources().getDrawable(R.mipmap.praise01);
        Drawable b = getResources().getDrawable(R.mipmap.praise02);
        Drawable c = getResources().getDrawable(R.mipmap.praise03);
        Drawable d = getResources().getDrawable(R.mipmap.praise04);

        praiseWidth = a.getIntrinsicWidth();
        praiseHeight = a.getIntrinsicHeight();

        drawables = new Drawable[]{a, b, c, d};
        layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

        layoutParams.addRule(ALIGN_PARENT_BOTTOM);
        layoutParams.addRule(CENTER_HORIZONTAL);

        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(6);
        paint.setColor(Color.BLUE);

        path = new Path();

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        totalHeight = getMeasuredHeight();
        totalWidth = getMeasuredWidth();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(path, paint);

    }

    public void addPraise() {
        final ImageView imageView = new ImageView(context);
        imageView.setImageDrawable(drawables[new Random().nextInt(4)]);
        addView(imageView, layoutParams);


        PointF startF = new PointF(totalWidth / 2, totalHeight);
        PointF pointF1 = new PointF(new Random().nextInt(totalWidth), new Random().nextInt(totalHeight / 2) + totalHeight / 2);
        PointF pointF2 = new PointF(new Random().nextInt(totalWidth), new Random().nextInt(totalHeight / 2));
        PointF endF = new PointF(new Random().nextInt(totalWidth), 0);

//        path.moveTo(startF.x, startF.y);
//        path.cubicTo(pointF1.x, pointF1.y, pointF2.x, pointF2.y, endF.x, endF.y);
//        invalidate();

        ValueAnimator valueAnimator = ValueAnimator.ofObject(new PointEvaluate(pointF1, pointF2), startF, endF);
        valueAnimator.setDuration(1000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                PointF animatedValue = (PointF) animation.getAnimatedValue();
                imageView.setX(animatedValue.x);
                imageView.setY(animatedValue.y);
                imageView.setAlpha(1 - animation.getAnimatedFraction());

            }
        });

//        ObjectAnimator scaleX = ObjectAnimator.ofFloat(imageView, "scaleX", 0, 1);
//        ObjectAnimator scaleY = ObjectAnimator.ofFloat(imageView, "scaleY", 0, 1);
//        ObjectAnimator alpha = ObjectAnimator.ofFloat(imageView, "alpha", 0, 1);

        PropertyValuesHolder scaleX = PropertyValuesHolder.ofFloat("scaleX", 0,1);
        PropertyValuesHolder scaleY = PropertyValuesHolder.ofFloat("scaleY", 0,1);
        PropertyValuesHolder alpha = PropertyValuesHolder.ofFloat("alpha", 0,1);

        ValueAnimator valueAnimator1 = ObjectAnimator.ofPropertyValuesHolder(scaleX, alpha, scaleY);

//        AnimatorSet animatorSet = new AnimatorSet();
//        animatorSet.playTogether(scaleX, scaleY, alpha);
//        animatorSet.setDuration(500);



        AnimatorSet totalSet = new AnimatorSet();
        totalSet.playTogether(valueAnimator1, valueAnimator);
        totalSet.start();
        totalSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                removeView(imageView);
            }
        });
    }
}

可以在动画结束后removeView掉刚刚生成的imageview

您可能感兴趣的

想让 Android 更独特?来试试自己 DIY 一套图标包... 众所周知,Android 的特点之一,在于它为用户提供了相对而言更大的自由度,而这也成了很多智能手机爱好者选择 Android 的理由之一。要知道,对于个性化来说,Android 用户除了更换壁纸铃声,还能更换应用图标、系统配色、字体、主题、桌面小工具......甚至整个桌面启动器。 如此之多的...
自定义圆形播放按钮进度条 前言 由于我最近在公司开发的项目做一个音乐播放器,类似于咪咕音乐,qq音乐,网易云音乐。刚开始的需求还只是做一些简单的播放音乐功能,播放按钮也是直接拿UI给的图标,还不需要搞什么在按钮上显示进度之类的,小日子过的还算轻松,没什么大鸭梨。可是后来我们伟大的产品经理说要在歌曲列表上添加一个播放按钮,...
Android Custom SeekBar Example SeekBar is the extension of ProgressBar in android. In this tutorial, I am going to show how to customize android SeekBar. There are lots of ways to ...
结合zxing和zbar,支持二维码和条码的真正快速扫描库... FastScanCode Very fast scan code project(support-qrcode-and-barcode) Can well support the following situations,barcodes folded ,the light is dark ...
Exploring the Play Billing Library for Android Exploring the Play Billing Library for Android In-app billing is a powerful part of the Android framework that allows...