Android实现简单水波纹效果

本文为大家分享了Android实现水波纹效果展示的具体代码,供大家参考,具体内容如下

一、效果

二、实现原理

自定义view,使用Path和贝塞尔曲线绘制,然后不断刷新,并且改变X、Y的值

主要知识点rQuadTo的使用

三、实现

WaveView.java

public class WaveView extends View {
  private Paint mPaint;
  private final Path mPath;
  //波长
  private int wavelength = 500;
  private int originY=800;
  private int dx,dy;

  public WaveView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    mPaint = new Paint();
    mPath = new Path();
    mPaint.setColor(Color.GREEN);
    mPaint.setStrokeWidth(5);
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
//    startanimation();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //重置path
    mPath.reset();
//    改变y的起始坐标
    if(dy<originY+150){
      dy+=10;
    }

    int halfWaveLength = wavelength / 2;
    mPath.moveTo(-wavelength + dx, originY-dy);
    //屏幕多宽,画多少
    for (int i = -wavelength; i <= getWidth() + wavelength; i += wavelength) {
      /**
       * 相对绘制二阶贝塞尔曲线(相对于自己的起始点--也即是上一个曲线的终点 )
       * float dx1 相对于上一个曲线的终点 的距离
       * float dy1
       * float dx2
       * float dy2
       */
      mPath.rQuadTo(halfWaveLength / 2, -150, halfWaveLength, 0);
      mPath.rQuadTo(halfWaveLength / 2, 150, halfWaveLength, 0);

    }
    //颜色填充
    //画一个封闭的空间
    mPath.lineTo(getWidth(), getHeight());
    mPath.lineTo(0, getHeight());
    mPath.close();
    canvas.drawPath(mPath, mPaint);
//    //设置起始点坐标
//    path.moveTo(100,400);
//    //二阶贝塞尔曲线1
//    path.quadTo(250,200,400,400);
//    //二阶贝塞尔曲线2
//    path.quadTo(550,600,700,400);
//    //关闭路径(将起点和终点闭合)
//    path.close();
//    path.moveTo(100,700);
//    path.cubicTo(50,500,550,500,700,700);

  }

  public void startanimation() {
    ValueAnimator animator = ValueAnimator.ofInt(0, wavelength);
    animator.setDuration(1000);
    animator.setInterpolator(new LinearInterpolator());
    //无限循环
    animator.setRepeatCount(ValueAnimator.INFINITE);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        dx = (int) animation.getAnimatedValue();
        postInvalidate();
      }
    });
    animator.start();
  }
}

最后把这个当成一个控件使用就可以。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android水波纹载入控件CircleWaterWaveView使用详解

    一.效果图 本控件已上传Github,欢迎Star和Fork,项目地址:CircleWaterWaveView 二.设计思路 观察效果图,可以看出,该自定义控件由三个部分构成:外圆.内圆.正弦曲线.他们的关系如下图: 因为控件是动态的,所以我们需要一个线程去不停地绘制,所以我选择了SurfaceView来作为该控件地父类.该控件地核心是如何去绘制波浪,我采用如下的思路来进行内圆下部地绘制.利用内圆与正弦曲线地交集,来绘制. 核心代码如下: /** * 绘制图像 * * @author luxun

  • Android实现水波纹扩散效果

    本文实例为大家分享了Android实现水波纹扩散效果的具体代码,供大家参考,具体内容如下 先上图 囧!没有图片所以就拿了小安代替了. 先看一下如何使用这个View. <jianpan.com.mybutton.view.RippleDiffuse android:layout_width="200dp" android:layout_height="200dp" app:btn_img_res="@drawable/rd" app:ripp

  • Android实现点击Button产生水波纹效果

    先上图,看看接下来我要向大家介绍的是个什么东西,如下图: 接下来要介绍的就是如何实现上述图中的波纹效果,这种效果如果大家没有体验过的话,可以看看百度手机卫士或者360手机卫士,里面的按钮点击效果都是这样的,另外Android 5.0以上的版本也出现了这种效果.不多说,下面聊聊具体的怎么实现. 首先大家看到的是三个button,水波纹的出现给我们的错觉是直接将波纹绘制在button上面的,但是这样能做到吗?首先button自己有background和src,如果把半透明的水波纹当作backgrou

  • Android中Item实现点击水波纹效果

    前言 水波纹效果大致上可以分为两类,一类是有界水波纹,而另一类是无界水波纹,较为广泛使用的是有界水波纹. 系统自带的水波纹实现 系统自带的方法非常方便,只需要给相应的空间设置背景,背景内容则为系统自带的 selectableItemBackground ,这样的话,水波纹就会在TextView所在的区域内进行绘制. <TextView android:background="?android:attr/selectableItemBackground" ... /> 先上效

  • Android仿水波纹流量球进度条控制器

    仿水波纹流球进度条控制器,Android实现高端大气的主流特效,供大家参考,具体内容如下 效果图: CircleView 这里主要是实现中心圆以及水波特效 package com.lgl.circleview; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.gra

  • android自定义WaveView水波纹控件

    本文实例为大家分享了android自定义WaveView水波纹控件的使用方法,供大家参考,具体内容如下 Github Repository and libaray WaveView水波纹控件 首先看下演示demo demo中可以看到不同高度,不同速度,不同幅度的水波纹:你可以通过view的参数直接控制view的表现形式. 引入你的工程 在项目的根目录下的build.gradle文件中添加如下代码: allprojects { repositories { ... maven { url 'htt

  • Android项目实战手把手教你画圆形水波纹loadingview

    本文实例讲解的是如何画一个满满圆形水波纹loadingview,这类效果应用场景很多,比如内存占用百分比之类的,分享给大家供大家参考,具体内容如下 效果图如下: 预备的知识: 1.贝塞尔曲线    如果你不了解,可以来这里进行基础知识储备:神奇的贝塞尔曲线 2.Paint.setXfermode()  以及PorterDuffXfermode 千万不要被这个b的名字吓到,不熟悉看到可能会认为很难记,其实 只要站在巨人的丁丁上 还是很简单的. 好了 废话不多说 ,跟我一步步来做一个炫酷的view吧

  • Android实现水波纹特效

    最近需要做个类似于水波纹动画的效果,思考了一下不需要UI切个动态图,Android原生的技术利用动画或者自定义控件都可以实现,下面上个图类似于这样的效果 下面请看第一种动画实现,这种方式较为简单些,就是利用3个ImageView不断地做缩放和渐变的动画. 布局文件定义一下 <RelativeLayout android:id="@+id/rl" android:layout_width="match_parent" android:layout_height=

  • Android特效之水波纹的实现

    前言 水波纹特效,想必大家或多或少见过,在我的印象中,大致有如下几种: 支付宝 "咻咻咻" 式 流量球 "荡漾" 式 真实的水波纹效果,基于Bitmap处理式 话不多说,先来看看效果: 填充式水波纹,间距相等 非填充式水波纹,间距相等 非填充式水波纹,间距不断变大 填充式水波纹,间距不断变小 想必大家已经知道基本的原理了,就是用Canvas来画嘛,但可不是简单的画哦,请往下看. 分析 这种类型的水波纹,其实无非就是画圆而已,在给定的矩形中,一个个圆由最小半径扩大到最

  • Android自定义控件实现水波纹效果

    本文实例为大家分享了Android自定义控件实现水波纹的具体代码,供大家参考,具体内容如下 示例代码: MainActivity.java package com.example.mhy.shuibowen; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { @Override protec

随机推荐