Android自定义View实现简单水波纹效果

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

效果如下:

原理

控制代码

//这里用的kotlin
//主线程刷新控件
 val mHandler = object : Handler() {
        override fun handleMessage(msg: Message?) {
            waterRippleView.refreshView()
        }
    
//开启动画,开线程,延时刷新period值,画布进行x方向平移
private fun progressAdd() {
        isAnimate = true
        Thread(Runnable {
            while (isAnimate) {
                Thread.sleep(100)
                mHandler.sendEmptyMessage(0)
            }
        }).start()
    }

//停止动画
    private fun progressReduce() {
        isAnimate = false
    }

控件源码:

//java编写
public class WaterRippleView extends View {
    
    private float mWidth;
    private float mHeight;

    //总周期为2s
    private int CIRCLE_PERIOD = 2000;
    //振幅,波纹高度
    private float ampltitude = 100;
    //填充颜色
    private int paintColor = 0xff57c011;
    //当前时间值,累加并循环
    private int period = 0;
    private Paint paint;
    private Path path;

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

    public WaterRippleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaterRippleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        paint = new Paint();
        paint.setColor(paintColor);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);
        path = new Path();
    }

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

    public void refreshView() {
        period += 100;
        if (period > CIRCLE_PERIOD) period %= CIRCLE_PERIOD;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //周期性的移动画布
        float offsetX = mWidth / CIRCLE_PERIOD * period;
        canvas.translate(-offsetX, 0);
        path.reset();
        //第一个正弦曲线
        path.moveTo(0, mHeight / 2);
        path.cubicTo(mWidth / 4, mHeight / 2 - ampltitude,
                mWidth * 3 / 4, mHeight / 2 + ampltitude, mWidth, mHeight / 2);

        //第二个正弦曲线
        path.cubicTo(mWidth * 5 / 4, mHeight / 2 - ampltitude,
                mWidth * 7 / 4, mHeight / 2 + ampltitude, 2 * mWidth, mHeight / 2);
        //形成闭合路径
        path.lineTo(2 * mWidth, mHeight);
        path.lineTo(0, mHeight);
        path.lineTo(0, mHeight / 2);
        canvas.drawPath(path, paint);
    }
}

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

(0)

相关推荐

  • Android 自定义view实现水波纹动画效果

    在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她: 在这样的关键时候,身子板就一定得硬了,可千万别说不行,爷们儿怎么能说不行呢: 好了,为了让大家都能给妹纸们想要的,后面会逐渐分享一些比较比较不错的效果,目的只有一个,通过自定义view实现我们所能实现的动效: 今天主要分享水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个

  • Android自定义View控件实现多种水波纹涟漪扩散效果

    效果图 实现思路 这个效果实现起来并不难,重要的是思路 此View满足了多种水波纹涟漪扩散效果,这要求它能满足很多的变化 根据上面的样式,可以看出此View需要满足以下变化 圆圈从中心可循环向外扩散 圆圈之间的扩散间距可以改变 可控制扩散圆的渐变度 圆圈可以是线条样式或者实心样式 圆圈扩散的速度可以控制 适配圆圈不同大小下的扩散效果 具体实现 创建自定义属性 首先为View创建自定义的xml属性 在工程的values目录下新建attrs.xml文件 <declare-styleable name

  • Android自定义View 实现水波纹动画引导效果

    一.实现效果图 二.实现代码 1.自定义view package com.czhappy.showintroduce.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Pat

  • android自定义WaveView水波纹控件

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

  • Android自定义View实现水波纹引导动画

    一.实现效果图 关于贝塞尔曲线 二.实现代码 1.自定义view package com.czhappy.showintroduce.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.grap

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

    介绍:水波纹散开效果的控件在 App 里面还是比较常见的,例如 网易云音乐歌曲识别,附近搜索场景. 看下实现的效果: 实现思路: 先将最大圆半径与最小圆半径间距分成几等份,从内到外,Paint 透明度依次递减,绘制出同心圆,然后不断的改变这些同心圆的半径大小,延迟一定时间重绘,便达到了想外散开的动画效果了. public class WaveView extends View { private static final String TAG = "WaveView"; private

  • Android自定义view实现水波纹进度球效果

    今天我们要实现的这个view没有太多交互性的view,所以就继承view. 自定义view的套路,套路很深 1.获取我们自定义属性attrs(可省略) 2.重写onMeasure方法,计算控件的宽和高 3.重写onDraw方法,绘制我们的控件 这么看来,自定义view的套路很清晰嘛. 我们看下今天的效果图,其中一个是放慢的效果(时间调的长) 我们按照套路来. 一.自定义属性 <declare-styleable name="WaveProgressView"> <at

  • Android自定义WaveProgressView实现水波纹加载需求

    先看效果图: 你可以定义成你项目的logo图片,可以设置水波颜色.波长.波宽.字体大小.颜色.进度条的最大值,当前进度值,还可以设置波纹震动的快慢.当设置一个进度不变的时候,打开时还有一个动画填满的效果(比如第二个流量显示,这里图片没有截出这个效果). 源码地址 1. 如何使用 1.1 在布局文件中 添加自定义控件: <cn.fanrunqi.waveprogressview.WaveProgressView android:id="@+id/waveProgressbar" a

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

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

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

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

随机推荐