SeniorUI1004_小船破浪效果

最新推荐文章于 2022-08-02 21:50:02 发布

原创最新推荐文章于 2022-08-02 21:50:02 发布 · 437 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#PathMeasure #小船破浪

Android 专栏收录该内容

240 篇文章

订阅专栏

本文详细介绍了如何使用PathMeasure和Animation结合贝塞尔曲线在自定义View中实现波浪动画效果。通过具体代码示例，展示了如何创建波浪路径，利用PathMeasure获取坐标斜率信息，并据此绘制动态图片。

SeniorUI_目录
 SeniorUI1001_PathMeasure语法

一、Rendering

在这里插入图片描述

二、Principe

Path利用贝塞尔曲线画波浪
Animation实现动画间隔值
PathMeasure利用Animation的值获取对应位置坐标斜率信息
利用获取的信息绘制图片

三、Core Code

public class WaveView extends View {

    private static final int INT_WAVE_LENGTH = 1000;
    private static final String TAG = "WaveView";

    private Path mPath;
    private Paint mPaint;

    private int mDeltaX;
    private Bitmap mBitMap;
    private PathMeasure mPathMeasure;
    private float[] pos;
    private float[] tan;
    private Matrix mMatrix;
    private float faction;

    public WaveView(Context context) {
        super(context);
        init();
        
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);

        mPath = new Path();
        pos = new float[2];
        tan = new float[2];
        mMatrix = new Matrix();

        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inSampleSize =  2;
        mBitMap = BitmapFactory.decodeResource(getResources(), R.drawable.timg,options);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.reset();
        int orginY = 800;
        int halfWaveLength = INT_WAVE_LENGTH / 2;
        mPath.moveTo(-INT_WAVE_LENGTH + mDeltaX, orginY);
        for(int i = -INT_WAVE_LENGTH ; i < getWidth() + INT_WAVE_LENGTH;
            i += INT_WAVE_LENGTH){
            mPath.rQuadTo(halfWaveLength/2,60,halfWaveLength,0);
            mPath.rQuadTo(halfWaveLength/2,-60,halfWaveLength,0);
        }
        mPath.lineTo(getWidth(),getHeight());
        mPath.lineTo(0,getHeight());
        mPath.close();



        canvas.drawPath(mPath,mPaint);

        mPathMeasure = new PathMeasure(mPath,false);
        float length = mPathMeasure.getLength();
        mMatrix.reset();
        boolean posTan = mPathMeasure.getPosTan(length*faction,pos,tan);
        Log.d(TAG,"pos[0] = " + pos[0] + "pos[1] = " +pos[1]);
        Log.d(TAG,"tan[0] = " + tan[0] + "tan[1] = " +tan[1]);
        if(posTan){
            // 方案一 ：自己计算
            // 将tan值通过反正切函数得到对应的弧度，在转化成对应的角度度数
            /*float degrees = (float) (Math.atan2(tan[1],tan[0])*180f / Math.PI);
            mMatrix.postRotate(degrees, mBitMap.getWidth()/2, mBitMap.getHeight() / 2);
            mMatrix.postTranslate(pos[0]- mBitMap.getWidth() / 2,pos[1] - mBitMap.getHeight());
            canvas.drawBitmap(mBitMap,mMatrix,mPaint);*/

            // 方案一 ：直接使用API
            mPathMeasure.getMatrix(length*faction, mMatrix, PathMeasure.TANGENT_MATRIX_FLAG | PathMeasure.POSITION_MATRIX_FLAG);
            mMatrix.preTranslate(- mBitMap.getWidth() / 2, - mBitMap.getHeight());
            canvas.drawBitmap(mBitMap,mMatrix,mPaint);
        }

        //

    }

    public void startAnimation(){
        /*ValueAnimator animator = ValueAnimator.ofInt(0,INT_WAVE_LENGTH);
        animator.setDuration(1000);
        animator.setInterpolator(new LinearInterpolator());
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mDeltaX = (int) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();*/

        ValueAnimator animator = ValueAnimator.ofFloat(0,1);
        animator.setDuration(25000);
        animator.setInterpolator(new LinearInterpolator());
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                faction  = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();
    }

}

四、Demo

WaveViewActivity