Android自定义view之path类描绘二阶贝塞尔曲线+属性动画(模仿QQ账号信息曲线动画)

最新推荐文章于 2022-11-09 11:30:39 发布
最新推荐文章于 2022-11-09 11:30:39 发布
阅读量1.4k 收藏 2
点赞数 3
CC 4.0 BY-SA版权
分类专栏： Android 文章标签： path 二阶贝塞尔曲线 自定义view 属性动画 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dailog/article/details/53606970
本文介绍如何在Android中使用Path类绘制二阶贝塞尔曲线，并结合属性动画模仿QQ账号信息曲线动画。通过调整控制点，可以改变贝塞尔曲线的形态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

写之前先简单的介绍一下后面代码中用到二阶贝塞尔曲线,Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生化。

/**
     * 二阶贝塞尔曲线
     * B(t)=(1-t)*(1-t)*p0+2t(1-t)*p1+t*t*p2
     */
    private int getCurvePoint(int start, int control, int end) {
        return (int) ((1.0 - t) * (1.0 - t) * start + 2.0 * t * (1.0 - t) * control + t * t * end);
    }

设置二阶贝塞尔曲线的方法： 
moveTo(float x,float y)  
其中x,y的坐标代表图中曲线左边起点的位置坐标 
quadTo(float x1, float y1, float x2, float y2 ) 
其中x1,y1的坐标就是图中小圆点的位置，也就是控制点的坐标 
x2,y2的坐标就是图中曲线右边终点的位置坐标

在代码中具体实现如下: 
 mPath = new Path();
        startX = 0;
        startY = getHeight() / 2 + 100;
        mPath.moveTo(startX, startY);
        controlX = getWidth() / 2 + 300;
        controlY = getHeight() / 2 + 100;
        endX = getWidth() + 100;
        endY = 0;
        mPath.quadTo(controlX, controlY, endX, endY);
        canvas.drawPath(mPath, mPaint);
我们具体要实现的效果图

上述代码描绘的曲线:

用一个类来记录头像的坐标位置: 
public class TheCoordinate {
    private int coordinateX;
    private int coordinateY;

    public int getCoordinateX() {
        return coordinateX;
    }

    public void setCoordinateX(int coordinateX) {
        this.coordinateX = coordinateX;
    }

    public int getCoordinateY() {
        return coordinateY;
    }

    public void setCoordinateY(int coordinateY) {
        this.coordinateY = coordinateY;
    }
}

记录四个头像的位置: 
public void addView(int vNum) {
        Log.e("test", 1 + "");
        for (int i = 0; i < VIEWNUM; i++) {
            t = ((double) i) / ((double) VIEWNUM);
            int x = getCurvePoint(startX, controlX, endX);
            int y = getCurvePoint(startY, controlY, endY);
            TheCoordinate coordinate = new TheCoordinate();
            coordinate.setCoordinateX(x);
            coordinate.setCoordinateY(y);
            mList.add(coordinate);
            Log.e("test" + i + "", "t:" + t + "x:" + x + "y:" + y);
        }
        initImageView(mList);
    }
添加图片View: 
private void initImageView(List<TheCoordinate> list) {
        for (int i = 0; i < list.size(); i++) {
            ImageView imageView = new ImageView(getContext());
            RelativeLayout.LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            params.width = VIEWWIDTH;
            params.height = VIEWHEIGHT;
            if (i < 4) {
                if (i == 0) {
                    params.setMargins(list.get(i).getCoordinateX(), list.get(i).getCoordinateY() - params.height / 2, list.get(i).getCoordinateX() + params.width, list.get(i).getCoordinateY() + params.height);
                } else {
                    params.setMargins(list.get(i).getCoordinateX() - params.width / 2, list.get(i).getCoordinateY() - params.height / 2, list.get(i).getCoordinateX() + params.width, list.get(i).getCoordinateY() + params.height);
                }
                imageView.setBackgroundColor(Color.WHITE);
                imageView.setLayoutParams(params);
                imageView.setId(i);
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);
                imageView.setImageResource(R.mipmap.amap_location_pressed);
                this.addView(imageView);
            }
            iList.add(imageView);
        }
    }
给View添加点击事件: 
private void setViewClickEvent() {
        for (int i = 0; i < iList.size(); i++) {
            iList.get(i).setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    Log.e("test", "tag:" + tag + "" + "vid:" + v.getId() + "");
                    clickAnimation(v.getId());
                    tag = v.getId();
                }
            });
        }
        moveView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                moveViewAnimation();
            }
        });


    }
其中移动头像单独提出来为moveView.先看看效果:


ok,下面附上完整代码和动画代码: 
public class MyCViewLayout extends RelativeLayout {
    private Paint mPaint;
    private Path mPath;
    // 贝赛尔曲线成员变量(起始点，控制（操作点），终止点，3点坐标)
    private int startX, startY, controlX, controlY, endX, endY;
    //添加view的个数
    public static int VIEWNUM = 5;
    //控制坐标平均分的比例的
    private double t;
    //坐标点集合
    private List<TheCoordinate> mList;
    private List<ImageView> iList;
    //移动的view
    private ImageView moveView;
    private int tag = 0;
    private Handler handler;
    public static int VIEWWIDTH;//moveview的宽度
    public static int VIEWHEIGHT;//moveview的高度

    public MyCViewLayout(Context context) {
        this(context, null);
    }

    public MyCViewLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mList = new ArrayList<TheCoordinate>();
        iList = new ArrayList<ImageView>();
        moveView = new ImageView(getContext());
        VIEWWIDTH=dip2px(context,34);
        VIEWHEIGHT=dip2px(context,34);
        moveView.setImageDrawable(getResources().getDrawable(R.mipmap.amap_call_normal));
        handler=new Handler(){
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                if (msg.what==1){
                    firstLoadAniomation();
                }
            }
        };
    }

    public MyCViewLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.e("test", 2 + "");
        mPath = new Path();
        startX = 0;
        startY = getHeight() / 2 + 100;
        mPath.moveTo(startX, startY);
        controlX = getWidth() / 2 + 300;
        controlY = getHeight() / 2 + 100;
        endX = getWidth() + 100;
        endY = 0;
        mPath.quadTo(controlX, controlY, endX, endY);
        canvas.drawPath(mPath, mPaint);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        startX = 0;
        startY = getHeight() / 2 + 100;
        controlX = getWidth() / 2 + 300;
        controlY = getHeight() / 2 + 100;
        endX = getWidth() + 100;
        endY = 0;
        addView(4);
        addMoveView(moveView);
        setViewClickEvent();
        this.setBackgroundColor(Color.parseColor("#ffffff"));
        handler.sendEmptyMessageDelayed(1,1500);
    }

    private void setViewClickEvent() {
        for (int i = 0; i < iList.size(); i++) {
            iList.get(i).setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    Log.e("test", "tag:" + tag + "" + "vid:" + v.getId() + "");
                    clickAnimation(v.getId());
                    tag = v.getId();
                }
            });
        }
        moveView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                moveViewAnimation();
            }
        });


    }

    /**
     * 根据点击的view移动moveview
     *
     * @param vId
     */
    private void clickAnimation(int vId) {
        if (tag == 0 && vId == 1) {
            moveAnimation(mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX() - VIEWWIDTH / 2, mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY());
        }
        if (tag == 0 && vId == 2) {
            moveAnimation(0, 0, mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX() - VIEWWIDTH / 2, mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(2).getCoordinateX() - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(2).getCoordinateY() - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY());
        }
        if (tag == 0 && vId == 3) {
            moveAnimation(0, 0, mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX() - VIEWWIDTH / 2, mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(2).getCoordinateX() - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(2).getCoordinateY() - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(3).getCoordinateX() - mList.get(2).getCoordinateX() + mList.get(2).getCoordinateX()
                            - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(3).getCoordinateY() - mList.get(2).getCoordinateY() + mList.get(2).getCoordinateY()
                            - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY()
            );
        }
        if (tag == 1 && vId == 2) {
            moveAnimation(mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX() - VIEWWIDTH / 2, mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(2).getCoordinateX() - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(2).getCoordinateY() - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY());
        }
        if (tag == 2 && vId == 3) {
            moveAnimation(
                    mList.get(2).getCoordinateX() - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(2).getCoordinateY() - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(3).getCoordinateX() - mList.get(2).getCoordinateX() + mList.get(2).getCoordinateX()
                            - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(3).getCoordinateY() - mList.get(2).getCoordinateY() + mList.get(2).getCoordinateY()
                            - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY()
            );
        }
        if (tag == 3 && vId == 0) {
            moveAnimation(
                    mList.get(3).getCoordinateX() - mList.get(2).getCoordinateX() + mList.get(2).getCoordinateX()
                            - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(3).getCoordinateY() - mList.get(2).getCoordinateY() + mList.get(2).getCoordinateY()
                            - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(2).getCoordinateX() - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(2).getCoordinateY() - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX() - VIEWWIDTH / 2, mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    0, 0
            );
        }
        if (tag == 3 && vId == 1) {
            moveAnimation(
                    mList.get(3).getCoordinateX() - mList.get(2).getCoordinateX() + mList.get(2).getCoordinateX()
                            - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(3).getCoordinateY() - mList.get(2).getCoordinateY() + mList.get(2).getCoordinateY()
                            - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(2).getCoordinateX() - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(2).getCoordinateY() - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX() - VIEWWIDTH / 2, mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY()
            );
        }
        if (tag == 3 && vId == 2) {
            moveAnimation(mList.get(3).getCoordinateX() - mList.get(2).getCoordinateX() + mList.get(2).getCoordinateX()
                            - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(3).getCoordinateY() - mList.get(2).getCoordinateY() + mList.get(2).getCoordinateY()
                            - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(2).getCoordinateX() - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(2).getCoordinateY() - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY());
        }
        if (tag == 2 && vId == 1) {
            moveAnimation(
                    mList.get(2).getCoordinateX() - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(2).getCoordinateY() - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX() - VIEWWIDTH / 2, mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY()
            );
        }
        if (tag == 2 && vId == 0) {
            moveAnimation(
                    mList.get(2).getCoordinateX() - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(2).getCoordinateY() - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX() - VIEWWIDTH / 2, mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    0, 0
            );
        }
        if (tag == 1 && vId == 0) {
            moveAnimation(
                    mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX() - VIEWWIDTH / 2, mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    0, 0
            );
        }
        if (tag == 1 && vId == 3) {
            moveAnimation(mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX() - VIEWWIDTH / 2, mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(2).getCoordinateX() - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(2).getCoordinateY() - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                    mList.get(3).getCoordinateX() - mList.get(2).getCoordinateX() + mList.get(2).getCoordinateX()
                            - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                    mList.get(3).getCoordinateY() - mList.get(2).getCoordinateY() + mList.get(2).getCoordinateY()
                            - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY()
            );
        }
    }

    private void moveAnimation(int startPointX, int startPointY) {
        ObjectAnimator animatorX = ObjectAnimator.ofFloat(moveView, "TranslationX", 0, startPointX);
        ObjectAnimator animatorY = ObjectAnimator.ofFloat(moveView, "TranslationY", 0, startPointY);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(800);
        set.setInterpolator(new FastOutSlowInInterpolator());
        set.playTogether(animatorX, animatorY);
        set.start();
    }

    private void moveAnimation(int startPointX, int startPointY, int X1, int Y1, int endPointX, int endPointY) {
        Log.e("test", "startPointX:" + startPointX + "startPointY:" + startPointY + "endPointX:" + endPointX + "endPointY:" + endPointY + "");
        ObjectAnimator animatorX = ObjectAnimator.ofFloat(moveView, "TranslationX", startPointX, X1, endPointX);
        ObjectAnimator animatorY = ObjectAnimator.ofFloat(moveView, "TranslationY", startPointY, Y1, endPointY);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(1000);
        set.setInterpolator(new FastOutSlowInInterpolator());
        set.playTogether(animatorX, animatorY);
        set.start();
    }

    private void moveAnimation(int startPointX, int startPointY, int X1, int Y1, int X2, int Y2, int endPointX, int endPointY) {
        Log.e("test", "startPointX:" + startPointX + "startPointY:" + startPointY + "endPointX:" + endPointX + "endPointY:" + endPointY + "");
        ObjectAnimator animatorX = ObjectAnimator.ofFloat(moveView, "TranslationX", startPointX, X1, X2, endPointX);
        ObjectAnimator animatorY = ObjectAnimator.ofFloat(moveView, "TranslationY", startPointY, Y1, Y2, endPointY);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(1000);
        set.setInterpolator(new FastOutSlowInInterpolator());
        set.playTogether(animatorX, animatorY);
        set.start();
    }
    private void moveAnimation(int startPointX, int startPointY, int X1, int Y1, int X2, int Y2, int endPointX, int endPointY,int X3,int Y3,int X4,int Y4) {
        Log.e("test", "startPointX:" + startPointX + "startPointY:" + startPointY + "endPointX:" + endPointX + "endPointY:" + endPointY + "");
        ObjectAnimator animatorX = ObjectAnimator.ofFloat(moveView, "TranslationX", startPointX, X1, X2, endPointX,X3,X4,0);
        ObjectAnimator animatorY = ObjectAnimator.ofFloat(moveView, "TranslationY", startPointY, Y1, Y2, endPointY,Y3,Y4,0);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(3000);
//        set.setInterpolator(new FastOutSlowInInterpolator());
        set.setInterpolator(new LinearInterpolator());
        set.playTogether(animatorX, animatorY);
        set.start();
    }

    private void moveAnimation(int startPointX, int startPointY, int endPointX, int endPointY) {
        Log.e("test", "startPointX:" + startPointX + "startPointY:" + startPointY + "endPointX:" + endPointX + "endPointY:" + endPointY + "");
        ObjectAnimator animatorX = ObjectAnimator.ofFloat(moveView, "TranslationX", startPointX, endPointX);
        ObjectAnimator animatorY = ObjectAnimator.ofFloat(moveView, "TranslationY", startPointY, endPointY);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(1000);
        set.setInterpolator(new FastOutSlowInInterpolator());
        set.playTogether(animatorX, animatorY);
        set.start();
    }

    private void moveViewAnimation() {
        ObjectAnimator mAnimator = ObjectAnimator.ofFloat(moveView, "rotation", 0F, 720f);
        mAnimator.setDuration(800);
        mAnimator.start();
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
    }

    public void addView(int vNum) {
        Log.e("test", 1 + "");
        for (int i = 0; i < VIEWNUM; i++) {
            t = ((double) i) / ((double) VIEWNUM);
            int x = getCurvePoint(startX, controlX, endX);
            int y = getCurvePoint(startY, controlY, endY);
            TheCoordinate coordinate = new TheCoordinate();
            coordinate.setCoordinateX(x);
            coordinate.setCoordinateY(y);
            mList.add(coordinate);
            Log.e("test" + i + "", "t:" + t + "x:" + x + "y:" + y);
        }
        initImageView(mList);
    }

    public void addMoveView(ImageView imageView) {
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        params.width = VIEWWIDTH;
        params.height = VIEWHEIGHT;
        params.setMargins(mList.get(0).getCoordinateX(), mList.get(0).getCoordinateY() - params.height / 2, mList.get(0).getCoordinateX() + params.width, mList.get(0).getCoordinateY() + params.height);
        tag = 0;
        imageView.setLayoutParams(params);
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        removeView(imageView);
        this.addView(imageView);

    }

    private void initImageView(List<TheCoordinate> list) {
        for (int i = 0; i < list.size(); i++) {
            ImageView imageView = new ImageView(getContext());
            RelativeLayout.LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            params.width = VIEWWIDTH;
            params.height = VIEWHEIGHT;
            if (i < 4) {
                if (i == 0) {
                    params.setMargins(list.get(i).getCoordinateX(), list.get(i).getCoordinateY() - params.height / 2, list.get(i).getCoordinateX() + params.width, list.get(i).getCoordinateY() + params.height);
                } else {
                    params.setMargins(list.get(i).getCoordinateX() - params.width / 2, list.get(i).getCoordinateY() - params.height / 2, list.get(i).getCoordinateX() + params.width, list.get(i).getCoordinateY() + params.height);
                }
                imageView.setBackgroundColor(Color.WHITE);
                imageView.setLayoutParams(params);
                imageView.setId(i);
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);
                imageView.setImageResource(R.mipmap.amap_location_pressed);
                this.addView(imageView);
            }
            iList.add(imageView);
        }
    }

    /**
     * 二阶贝塞尔曲线
     * B(t)=(1-t)*(1-t)*p0+2t(1-t)*p1+t*t*p2
     */
    private int getCurvePoint(int start, int control, int end) {
        return (int) ((1.0 - t) * (1.0 - t) * start + 2.0 * t * (1.0 - t) * control + t * t * end);
    }

    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
     */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
    /**
     * 获取屏幕的宽度
     *
     * @return
     */
    private int getScreenWidth() {
        WindowManager wm = (WindowManager) getContext().getSystemService(
                Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        return outMetrics.widthPixels;
    }

    /**
     * 获取屏幕的高度
     *
     * @return
     */
    private int getScreenHeight() {
        WindowManager wm = (WindowManager) getContext().getSystemService(
                Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        return outMetrics.heightPixels;
    }
    public void firstLoadAniomation(){
        moveAnimation(
                0, 0, mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX() - VIEWWIDTH / 2, mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                mList.get(2).getCoordinateX() - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                mList.get(2).getCoordinateY() - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                mList.get(3).getCoordinateX() - mList.get(2).getCoordinateX() + mList.get(2).getCoordinateX()
                        - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                mList.get(3).getCoordinateY() - mList.get(2).getCoordinateY() + mList.get(2).getCoordinateY()
                        - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                mList.get(2).getCoordinateX() - mList.get(1).getCoordinateX() - VIEWWIDTH / 2 + mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX(),
                mList.get(2).getCoordinateY() - mList.get(1).getCoordinateY() + mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY(),
                mList.get(1).getCoordinateX() - mList.get(0).getCoordinateX() - VIEWWIDTH / 2, mList.get(1).getCoordinateY() - mList.get(0).getCoordinateY()
        );
    }
}
说明一下,动画的坐标由于只是demo就写死了,后续可以提取出来封装一个方法.
that's all .THX!!!



android path 合并_Android 实现Path曲线动画两种方案
weixin_26720479的博客
12-28 428
Path动画是一种非常特殊的动画，可以理解为动画沿着Path路径移动。构建Path动画有两种方式，第一种是基于TypeEvalutor，该类用于控制View的状态、位置等。另一种是通过PathMeasure，这种可以更加直观的定义路径，同样也可以定义draw绘图等。方案一：通过TypeEvalutor定义Path动画曲线动画很常见，但最著名的是贝塞尔曲线动画(贝塞尔曲线的数学原理)class Be...
自定义View动画-贝塞尔曲线动画
qq_34071798的博客
04-25 469
一个胜利者不会放弃，而一个放弃者永远不会胜利。
Android 属性动画使控件沿贝塞尔曲线移动
04-17
项目中抽取出来的通过属性动画使空间沿贝塞尔曲线运动，运动时长，幅度可自己控制，同时可以给控件设置点击事件。
android贝塞尔曲线公式,Android之二阶贝塞尔曲线的波浪头像(三阶的爱心飞出)
weixin_39875832的博客
05-31 239
一、写这个demo主要是由于一个同事给我看了一个ios的效果，由于感受好玩因此我就写了android样式的，具体的效果就以下图展现(图是ios的gif不过效果是同样的)，有须要的朋友在下面会给出下载地址java 首先分析一下个人作法，我是将波浪的部分和头像分开考虑，根据波浪的移动高度将头像画出android 1、定义属性其实我在作的时候我是直接开始画，画完了才去优化自定义属性，然而如今这些过程已经...
Android自定义View - 贝塞尔曲线简介
WillScorpio
01-19 359
贝塞尔曲线
Android 贝塞尔曲线解析
热门推荐
一个码农的博客
07-24 1万+
相信很多同学都知道“贝塞尔曲线”这个词，我们在很多地方都能经常看到。利用“贝塞尔曲线”可以做出很多好看的UI效果，本篇博客就让我们一起学习“贝塞尔曲线”。贝塞尔曲线的原理贝塞尔曲线是用一系列点来控制曲线状态的，这些点简单分为两类： 类型 作用 数据点 确定曲线的起始和结束位置 控制点 确定曲线的弯曲程度 一阶贝塞尔曲线 一阶曲线是没有控制点的，仅有两个数据点(A 和 B)，最
属性动画 平移，旋转，缩放，透明度变化，使用ValueAnimator和ObjectAnimator实现 基于贝塞尔曲线实现的仿qq点赞效果的自定义ViewGr
05-11
在Android中，可以通过Path类的`quadTo()`、`cubicTo()`等方法来绘制贝塞尔曲线。 - 在仿QQ点赞效果中，通常会用到四阶贝塞尔曲线，因为它的灵活性可以模拟手指滑动点赞时的流畅轨迹。 5. **自定义ViewGroup**： ...
Android贝塞尔曲线实现粘性动画
09-09
"Android贝塞尔曲线实现粘性动画"这个主题就是关于如何利用贝塞尔曲线来制作具有粘性效果的动画，通常这种动画效果常见于如QQ未读消息提示等应用场景。下面将详细介绍贝塞尔曲线及其在Android中的应用。 **贝塞尔...
自定义view实战(10)：贝塞尔曲线绘制小红点
silencefly的博客
11-09 545
自定义view实战(10)：贝塞尔曲线绘制小红点
Android自定义View实现QQ气泡效果
11-19
本教程将探讨如何利用Android自定义View实现QQ气泡效果，包括手势拖动、贝塞尔曲线绘制以及动态的回弹和爆炸动画。 首先，我们要理解`自定义View`的概念。自定义View是在Android系统提供的基本View类基础上进行扩展...
二阶贝塞尔曲线Test
03-25
二阶贝塞尔曲线Test
Android代码-漂亮的区间选择器，贝塞尔曲线优雅实现。
08-08
BezierSeekBar > Beautiful custom View, SeekBar selector, easy to use, and rich in customization. 中文README Preview DEMO or you can scan this QRcode to download Features Supported functions： [x] Easy to use！ [x] Optionally configure the colors of ALL [x] Smooth Bezier animation effects [x] Freely configure the selection interval [x] Dynamic monitoring of changes in selection How to To get a Git project into your build: Step 1. Add the JitPack repository to your build file Add it in yo
android高级动画——贝塞尔曲线
wode_dream的专栏
02-26 2779
简介：贝塞尔曲线是计算机图形学中相当重要的参数曲线。可以用数学公式来描述一段曲线。 用途：1、贝塞尔曲线可以帮助我们在二维平面内用平滑的曲线画出各种图形。 2、同时也可以给动画提供一个平滑的曲线运动路径。 android中我们通过Path可以画出二阶跟三阶贝塞尔曲线。复杂的图形我们可以组合几个二阶和三阶的贝塞尔曲线就可以实现。 这次整理一下沿着二阶贝塞尔曲线运动的例子。下面是一个沿着二阶贝
android波浪动画简书,Android Path绘制贝塞尔曲线波浪动画
weixin_35626077的博客
05-25 524
本文主讲一种动画的实现方式：在自定义View的onDraw()方法的最后调用invalidate()来实现持续绘制更新画面，在onDraw()中根据流逝的时间来计算图像当前的位置、形状，即实现了动画。详见下文优势：更可控，动画播放速度、方向等等可自由控制、随时变更；可以通过监听触摸事件来实现可触摸交互的动画。(本文以匀速运动为例，如需变速、响应触摸需要自行修改代码)完整代码见最后波浪效果图.gif...
Android 贝塞尔曲线（二阶，三阶）差值器
VcStrong的专栏
08-01 841
android根据三阶贝塞尔速度公式执行path动画
Android 高级UI解密 (四) ：花式玩转贝塞尔曲线（波浪、轨迹变换动画）
lemonGuo的大脑皮层、小脑、海马体、杏仁核.....
05-21 8162
一. 贝塞尔初识 概念 A Bézier curve (pronounced [bezje] in French) is a parametric curve frequently used in computer graphics and related fields. Generalizations of Bézier curves to higher dimensions ar...
小动画之“波浪动画”(二阶贝塞尔曲线)
是非的Android学习之路
08-14 371
@[TOC](二阶贝塞尔曲线 rQuadTo() 函数实现波浪动画) 上篇博客 ”小动画之“绘画板”“ 中讲述了 二阶贝塞尔曲线以及，quadTo() 函数；本文将实现上图动画。 1. rQuadTo() 函数 函数 publiC void rQuadTo(float dxl , float dyl, float dx2, float dy2); 参数 - 这4 个参数都是 相对值，即相对上一个终点的位移值。 • dxl ： 控制点x 坐标，相对上一个终点 x 坐标的位移坐标。可为负值，正值
Android 进阶——高级UI必知必会之Path和贝塞尔曲线（五）
最美不过，心中有梦，身旁有你！
12-06 2784
文章大纲引言 引言 相关文章链接如下： Android进阶——自定义View必知必会之Android坐标系与Paint的基础应用（一） Android进阶——自定义View必知必会之Android坐标系与Paint的高级应用（二） Android进阶——自定义View必知必会之Android坐标系与Canvas小结（三） ...
android贝塞尔曲线的简单应用
易水寒的专栏
02-25 1029
需求：开始有个四分之一圆弧曲线，通过手指滑动，曲线慢慢变成直线 分析：通过观察，发现该view可以通过绘制特定path的内容来实现曲线的变化，正好android，Paht类提供了quadTo方法： android.graphics.Path.quadTo(float x1, float y1, float x2, float y2)前两个参数确认了一个点（参考点）；后面两个参数确认最终结束的点
Android自定义View实战：仿QQ小红点拉伸动画
"自定义View之案列篇：仿QQ小红点" 在Android开发中，自定义View是一项挑战性但有趣的任务，它允许开发者创造出独特的交互体验。本案例旨在模仿QQ应用中的小红点效果，这是一个创新且引人注目的交互元素。下面将...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值