美文网首页
android 水波纹+小船漂浮实现

android 水波纹+小船漂浮实现

作者: Levipeng | 来源:发表于2020-01-16 15:39 被阅读0次

如图


wave.gif

实现思路贝塞尔曲线+属性动画

1:先画曲线

曲线类似正弦函数曲线,所以也就是画贝塞尔曲线。如何做到流动的效果,让贝塞尔曲线移动起来。不断的改变起始点的位置,重新绘制,也就能实现流动水波纹效果了。然后旋转平移和旋转矩阵实现浮动的小船。
如图


QQ图片20200116153239.jpg

不断的改变A的位置。
代码如下

  //一个波长的长度
    private final int INT_WAVE_LENGTH = 1000;
    private Paint mPaint;
    private Path mPath;
    private Integer move = 0;
    private Bitmap mBitMap;
    private Matrix mMatrix;
    private PathMeasure mPathMeasure;
  private void init() {
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setColor(Color.RED);
        mPath = new Path();
        mMatrix = new Matrix();
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inSampleSize =  4;
        mBitMap = BitmapFactory.decodeResource(getResources(), R.drawable.timg,options);
    }
 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.reset();
        int orginy = getHeight() / 2;
        mPath.moveTo(-INT_WAVE_LENGTH + move, orginy);
        int half = INT_WAVE_LENGTH / 2;
        for (int i = -INT_WAVE_LENGTH; i < getWidth() + INT_WAVE_LENGTH; i += INT_WAVE_LENGTH) {
            mPath.rQuadTo(half / 2, 80, half, 0);
            mPath.rQuadTo(half / 2, -80, half, 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();
        mPathMeasure.getMatrix(getWidth()+500-move, mMatrix, PathMeasure.TANGENT_MATRIX_FLAG | PathMeasure.POSITION_MATRIX_FLAG);
        mMatrix.preTranslate(- mBitMap.getWidth() / 2, - mBitMap.getHeight());
        canvas.drawBitmap(mBitMap, mMatrix, mPaint);

    }
  @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        startAnimation();
    }

    public void startAnimation() {
        ValueAnimator valueAnimator = ValueAnimator.ofInt(0, INT_WAVE_LENGTH);
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setDuration(2000);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                move = (Integer) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        valueAnimator.start();
    }

相关文章

  • android 水波纹+小船漂浮实现

    如图 实现思路贝塞尔曲线+属性动画 1:先画曲线 曲线类似正弦函数曲线,所以也就是画贝塞尔曲线。如何做到流动的效果...

  • RecyclerView

    默认水波纹实现方式android:background="?android:attr/selectableItem...

  • 2019-11-05

    水波纹,interpolator加速器属性值 ------- 水波纹效果实现: 点击水波纹效果:只有android...

  • 2020-04-12

    Android 实现水波纹动效 ​ WaterRippleView核心文件 package com.manss.m...

  • 漂浮的小船

    偶然点到大众点评,页面有很多有趣的东西,五颜六色的食物,各种不算新奇的店铺。但没有感觉。 记忆里忽而出现第一次去迪...

  • android水波纹点击效果的实现

    效果图: 前言: 最近使用BRVAH简单了解了一下水波纹效果的实现,谷歌在android5.0以后加入了水波纹的属...

  • 点击Android 中Tablayout 的各个Tab时,rip

    一: 实现的目标 点击Android 中Tablayout 的各个Tab时,有ripple(水波纹)效果,并且水波...

  • ripple自定义实现水波纹效果

    在原来的shape上略作修改即可实现水波纹点击效果

    Android水波纹点击效果

    Android API 21及以上新增了ripple标签用来实现水波纹的效果。我们可以通过设置ripple背景来实...

  • selectableItemBackground不起作用

    首先它作用于android:background和android:foreground效果是水波纹 android...

网友评论

      本文标题:android 水波纹+小船漂浮实现

      本文链接:https://www.haomeiwen.com/subject/psbfzctx.html