Android实现渐变色水波纹效果

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

项目中使用到的效果,效果图如下:

代码实现:

public class WaveView extends View {
    private Paint mPaint, mCriclePaint, mTextPaint;
    // 倾斜或旋转、快速变化,当在屏幕上画一条直线时, 横竖不会出现锯齿,
    // 但是当斜着画时, 就会出现锯齿的效果,所以需要设置抗锯齿
    private DrawFilter mDrawFilter;

    private int mTotalHeight, mTotalWidth;
    private int mXoffset = 0;
    private float[] mPointY;
    private float[] mDaymicPointY;
    private int currentIndex = 1;
    private  int currentColor=0xaa3bb6e7;
    //波浪线移动速度
    private static final int X_SPEED = 20;
    private int percent;

    public void setPercent(int percent) {
        this.percent = percent;
    }

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

    public int getCurrentIndex() {
        return currentIndex;
    }

    public void setCurrentIndex(int currentIndex) {
        this.currentIndex = currentIndex;
        if (currentIndex==1){
            currentColor = 0xaa3bb6e7;
        }else if(currentIndex==2){
            currentColor = 0xaa3c3c3c;
        }else if (currentIndex==3){
            currentColor = 0xaa724527;
        }
    }

    public WaveView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        //图片线条(通用)的抗锯齿需要另外设置
        mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
        //实例化一个画笔
        mPaint = new Paint();
        //去除画笔锯齿
        mPaint.setAntiAlias(true);
        //设置画笔风格为实线
        mPaint.setStyle(Paint.Style.FILL);
        //设置画笔颜色
        mPaint.setColor(Color.GREEN);
        //实例化圆的画笔
        mCriclePaint = new Paint(mPaint);
        mCriclePaint.setColor(Color.parseColor("#88dddddd"));
        mCriclePaint.setAlpha(255);
        //实例化文字画笔
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
    }

    LinearGradient linearGradient;

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //去除锯齿
        canvas.setDrawFilter(mDrawFilter);
        runWave();
        int canvasWidth = canvas.getWidth();
        int canvasHeight = canvas.getHeight();
        int layerId = canvas.saveLayer(0, 0, canvasWidth, canvasHeight, null, Canvas.ALL_SAVE_FLAG);
        // canvas.drawCircle(mTotalWidth / 2, mTotalHeight / 2, mTotalWidth / 2, mCriclePaint);
        //设置颜色混合模式
        // mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        //高减去宽除以2使水波纹底部在圆底部,动态改变percent值,在Y轴上变化
        //画进度条
        //aa3c3c3c
        //aa724527
        final int c = currentColor;
        int colorSweep[] = {c,Color.TRANSPARENT};
        //设置渐变色
        linearGradient = new LinearGradient(0, mTotalHeight-percent*mTotalHeight/100-80,0,mTotalHeight, colorSweep, null, Shader.TileMode.MIRROR);

        mPaint.setShader(linearGradient);
        for (int i = 0; i < mTotalWidth; i++) {

            canvas.drawLine(i, mTotalHeight - mDaymicPointY[i] - (mTotalHeight - mTotalWidth) / 2 - percent * mTotalWidth / 100, i, mTotalHeight - (mTotalHeight - mTotalWidth) / 2, mPaint);
        }
//        RoundLightBarView
        //最后将画笔去除Xfermode
        // mPaint.setXfermode(null);
        canvas.restoreToCount(layerId);
        //改变两条波纹的移动点
        mXoffset += X_SPEED;
        //如果已经移动到末尾处,则到头重新移动
        if (mXoffset > mTotalWidth) {
            mXoffset = 0;
        }
        String text = percent + " ";

        mTextPaint.setColor(Color.WHITE);
        mTextPaint.setTextSize(180);
        float textLength = mTextPaint.measureText(text);
        int textY = mTotalHeight - percent * mTotalHeight / 100;
        if (textY < 180) {
            textY = 180;
        }
        if (textY > mTotalHeight - 80) {
            textY = mTotalHeight - 80;
        }
        canvas.drawText(text, (mTotalWidth - textLength) / 2, textY, mTextPaint);
        mTextPaint.setTextSize(90);
        String aText = percent < 10 ? "     %" : percent < 100 ? "          %" : "              %";
//4 9 13
        canvas.drawText(aText, (mTotalWidth - textLength) / 2, textY, mTextPaint);
//        LogUtils.d("totalWdith:"+mTotalWidth+"---totalH:"+mTotalHeight);
        //引起view重绘
        postInvalidateDelayed(300);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mTotalHeight = h;
        mTotalWidth = w;
        //数组的长度为view的宽度
        mPointY = new float[w];
        mDaymicPointY = new float[w];
        //这里我们以view的总宽度为周期,y = a * sin(2π) + b
        for (int i = 0; i < mTotalWidth; i++) {
            mPointY[i] = (float) (20 * (Math.sin(2 * Math.PI * i / w)));
        }
    }

    private void runWave() {
        // 超出屏幕的挪到前面,mXoffset表示第一条水波纹要移动的距离
        int yIntelrval = mPointY.length - mXoffset;
        //使用System.arraycopy方式重新填充第一条波纹的数据
        System.arraycopy(mPointY, 0, mDaymicPointY, mXoffset, yIntelrval);
        System.arraycopy(mPointY, yIntelrval, mDaymicPointY, 0, mXoffset);
    }
}

实现原理:

1、首先波浪的绘制是很多个竖直的线,并通过正弦坐标转换坐标实现。

2、渐变色通过设置画笔LinearGradient实现。

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

时间: 2021-11-24

Android实现自定义华丽的水波纹效果

先来看看效果 实现效果 模拟水波纹的效果:点击屏幕就有圆环出现,半径从小到大,透明度从大到小(0为透明) 实现思路 1.自定义类继承View. 2.定义每个圆环的实体类 Wave,并初始化绘制圆环的画笔的数据. 3.重写onTouchEvent方法,down时,获得坐标点,做为圆环圆心. 4.发送handler信息,对数据进行修改,刷新页面. 5.重写onDraw方法,绘制一个圆环. 1. 自定义类继承View 新建WaterWaveView2类继承View public class Water

Android特效之水波纹的实现

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

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

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

Android实现水波纹效果

一.效果 点击开始: 点击停止: 二.在MainActivity中 import android.graphics.Paint; import android.os.Bundle; import android.support.v4.view.animation.LinearOutSlowInInterpolator; import android.support.v7.app.AppCompatActivity; import android.view.View; import android

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

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

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自定义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 自定义view实现水波纹动画效果

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

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仿小米安全中心检测进度条效果

模仿小米安全中心检测效果 废话少说,咱们先上效果图: github地址: https://github.com/niniloveyou/GradeProgressView 这个效果的使用场景并不多,主要是各种检测的时候,比如垃圾清理,手机安全检测, 当然如果你不嫌弃这个效果丑, 也可以用作进度条.哈哈. 下面说点干货分析下这个效果怎么实现: 拿到这个效果首先想想主要有哪些技术难点: 1.进度条 2.中间的指针怎么弄 1.进度条 有人说进度条还不容易吗? 就这样写: mPaint.setPathE

Android 自定义球型水波纹带圆弧进度效果(实例代码)

需求 如下,实现一个圆形水波纹,带进度,两层水波纹需要渐变显示,且外围有一个圆弧进度. 思路 外围圆弧进度:可以通过canvas.drawArc()实现.由于圆弧需要实现渐变,可以通过给画笔设置shader(SweepGradient)渲染,为了保证圆弧起始的颜色值始终一致,需要动态调整shader的参数.具体参见 SweepGradient(centerX.toFloat(), centerY.toFloat(), circleColors[0], floatArrayOf(0f, value

Android自定义View仿华为圆形加载进度条

View仿华为圆形加载进度条效果图 实现思路 可以看出该View可分为三个部分来实现 最外围的圆,该部分需要区分进度圆和底部的刻度圆,进度部分的刻度需要和底色刻度区分开来 中间显示的文字进度,需要让文字在View中居中显示 旋转的小圆点,小圆点需要模拟小球下落运动时的加速度效果,开始下落的时候慢,到最底部时最快,上来时速度再逐渐减慢 具体实现 先具体细分讲解,博客最后面给出全部源码 (1)首先为View创建自定义的xml属性 在工程的values目录下新建attrs.xml文件 <resourc

Android Webview添加网页加载进度条实例详解

推荐阅读:Android WebView线性进度条实例详解 最近在android项目中使用webview嵌套了一个抽奖活动网页,活动上线,运行良好(改了N次需求和突发bug),还好这种模式的活动,只需要修改网页,不需要重新打包发布市场,这也是这种模式开发的优势之一.后来据产品哥反馈说加载网页无进度提示,好吧,这个当时真没考虑这么多,这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点... 1.首先自定义一个WebView控件 /** * 带进度条的Webivew * @author

Android实现带数字的圆形进度条(自定义进度条)

开发 设计搞了一个带圆形进度的进度条,在GitHub上逛了一圈,发现没有,自己撸吧. 先看界面效果: 主要思路是写一个继承ProgressBar的自定义View,不废话,直接上代码: package com.fun.progressbarwithnumber; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.g

Android自定义水波纹动画Layout实例代码

话不多说,我们先来看看效果: Hi前辈搜索预览 这一张是<Hi前辈>的搜索预览图,你可以在这里下载这个APP查看更多效果: http://www.wandoujia.com/apps/com.superlity.hiqianbei LSearchView 这是一个MD风格的搜索框,集成了ripple动画以及search时的loading,使用很简单,如果你也需要这样的搜索控件不妨来试试:https://github.com/onlynight/LSearchView RippleEverywh

JS仿Windows开机启动Loading进度条的方法

本文实例讲述了JS仿Windows开机启动Loading进度条的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>JS仿Windows开机启动的Loading进度条</title> </head> <body style="margin:0;background-color:#5279CE;" scroll=no> <table id=lw style="disp

Android实现为Notification加上一个进度条的方法

本文实例讲述了Android实现为Notification加上一个进度条的方法.分享给大家供大家参考,具体如下: package com.notification; import android.app.Activity; import android.app.Notification; import android.app.NotificationManager; import android.app.PendingIntent; import android.content.Intent;