文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android实现渐变色水波纹效果

2022-06-07 20:35

关注

本文实例为大家分享了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实现。


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯